ruby-align
Baseline 2024
Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The ruby-align
CSS property defines the distribution of the different ruby elements over the base.
Syntax
css
/* 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: revert;
ruby-align: revert-layer;
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 definition
Initial value | space-around |
---|---|
Applies to | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
Inherited | yes |
Computed value | as specified |
Animation type | by computed value type |
Formal syntax
Examples
Ruby aligned at the start of the base text
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>(</rp><rt>short ruby</rt><rp>)</rp>
</ruby>
CSS
css
ruby {
ruby-align: start;
}
Result
Ruby aligned at the center of the base text
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>(</rp><rt>short ruby</rt><rp>)</rp>
</ruby>
CSS
css
ruby {
ruby-align: center;
}
Result
Extra space distributed between ruby elements
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>(</rp><rt>short ruby</rt><rp>)</rp>
</ruby>
CSS
css
ruby {
ruby-align: space-between;
}
Result
Extra space distributed between and around ruby elements
HTML
html
<ruby>
<rb>This is a long text to check</rb>
<rp>(</rp><rt>short ruby</rt><rp>)</rp>
</ruby>
CSS
css
ruby {
ruby-align: space-around;
}
Result
Specifications
Specification |
---|
CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |
Browser compatibility
BCD tables only load in the browser
See also
- HTML Ruby elements:
<ruby>
,<rt>
,<rp>
, and<rtc>
. - CSS Ruby properties:
ruby-position
,ruby-merge
.