This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The ruby-align
CSS property defines the distribution of the different ruby elements over the base.
/* 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;
Syntax
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 | discrete |
Formal syntax
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
Specification | Status | Comment |
---|---|---|
CSS Ruby Layout Module Level 1The definition of 'ruby-align' in that specification. | Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 38 |
IE No support No No support No Notes' Internet Explorer 9 and later supports an earlier draft of CSS Ruby with non-standard values for this property: |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 38 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
See also
- HTML Ruby elements:
<ruby>
,<rt>
,<rp>
, and<rtc>
. - CSS Ruby properties:
ruby-position
,ruby-merge
.
ruby-align by Mozilla Contributors is licensed under CC-BY-SA 2.5.