`ruby-align` CSS property
Baseline Newly available
This feature works across the latest devices and browser versions. This feature might not work in older devices or browser versions. It's been available across browsers since December 2024.
The ruby-align CSS property defines the distribution of the different ruby elements over the base.
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: revert; ruby-align: revert-layer; ruby-align: unset;
Values
This property is specified as one of the following keyword 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
<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
CSS
ruby {
ruby-align: start;
}
Result
Ruby aligned at the center of the base text
HTML
<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
CSS
ruby {
ruby-align: center;
}
Result
Extra space distributed between ruby elements
HTML
<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
CSS
ruby {
ruby-align: space-between;
}
Result
Extra space distributed between and around ruby elements
HTML
<ruby> <rb>This is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby>
CSS
ruby {
ruby-align: space-around;
}
Result
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | WebView on iOS | |
ruby-align |
128 |
128 |
38 |
114 |
18.2 |
128 |
38 |
85 |
18.2 |
28.0 |
128 |
18.2 |
center |
128 |
128 |
38 |
114 |
18.2 |
128 |
38 |
85 |
18.2 |
28.0 |
128 |
18.2 |
space-around |
128 |
128 |
38 |
114 |
18.2 |
128 |
38 |
85 |
18.2 |
28.0 |
128 |
18.2 |
space-between |
128 |
128 |
38 |
114 |
18.2 |
128 |
38 |
85 |
18.2 |
28.0 |
128 |
18.2 |
start |
128 |
128 |
38 |
114 |
18.2 |
128 |
38 |
85 |
18.2 |
28.0 |
128 |
18.2 |
See also
ruby-position- CSS ruby layout module
- HTML Ruby elements:
<ruby>,<rt>,<rp>, and<rtc>
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/ruby-align
