CSS - ruby-align
The ruby-align
CSS property defines the distribution of the different ruby elements over the base.
Examples
Example1
This HTML will render differently with each value of ruby-align
:
<ruby> <rb>This is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby>
Ruby aligned at the start of the base text
<ruby> <rb>This is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby>
ruby { ruby-align:start; }
This gives the following result:
Ruby aligned at the center of the base text
<ruby> <rb>This is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby>
ruby { ruby-align:center; }
This gives the following result:
Extra space distributed between ruby elements
<ruby> <rb>This is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby>
ruby { ruby-align:space-between; }
This gives the following result:
Extra space distributed between and around ruby elements
<ruby> <rb>This is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby>
ruby { ruby-align:space-around; }
This gives the following result:
Syntax
/* Keyword values */ ruby-align: start; ruby-align: center; ruby-align: space-between; ruby-align: space-around; /* Global values */ ruby-align: inherit; ruby-align: initial; ruby-align: unset;
Values
start
- Is a keyword indicating that the ruby will be aligned with the start of the base text.
center
- Is a keyword indicating that the ruby will be aligned at the middle of the base text
space-between
- Is a keyword indicating that the extra space will be distributed between the elements of the ruby.
space-around
- Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.
Formal syntax
start <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> space-between <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> space-around
Description
The ruby-align
CSS property defines the distribution of the different ruby elements over the base.
Initial value | space-around |
---|---|
Applies to | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | No support | 38 (38) | No support[1] | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 38.0 (38) | No support[1] | No support | No support |
[1] Since version 9 Internet Explorer implements an early draft of CSS Ruby where ruby-align
had the following values: auto
, left
, center
, right
, distribute-letter
, distribute-space
, and line-edge
. Here is a rough conversion table:
IE syntax | Standard syntax |
---|---|
auto |
Don't use ruby-align |
left |
Use start (in ltr scripts) |
center |
center |
right |
Use start (in rtl scripts) |
distribute-letter |
No direct equivalent, use space-between or space-around |
distribute-space |
space-around |
line-edge |
No direct equivalent. |
See Also
- HTML Ruby elements:
<ruby>
,<rt>
,<rp>
, and<rtc>
. - CSS Ruby properties:
ruby-position
,ruby-merge
.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Ruby Layout Module Level 1 The definition of 'ruby-align' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/ruby-align