ruby-align CSS property
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
ruby-align =
start |
center |
space-between |
space-around
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby-align
|
|
|
|
|
|
|
|
|
|
|
|
|
center
|
|
|
|
|
|
|
|
|
|
|
|
|
space-around
|
|
|
|
|
|
|
|
|
|
|
|
|
space-between
|
|
|
|
|
|
|
|
|
|
|
|
|
start
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
ruby-position- CSS ruby layout module
- HTML Ruby elements:
<ruby>,<rt>,<rp>, and<rtc>