CSS ruby-align Property
Description
The ruby-align
property can be used on any element to control the text alignment of the ruby text and ruby base contents relative to each other.
- Initial value
- auto
- Applies to
- All elements and generated content
- Inherited
- Yes
- Computed value
- Specified value (except for initial and inherit)
- Animatable
- No
- JavaScript syntax
- object.style.rubyAlign
Syntax
ruby-align: start | center | space-between | space-around
Values
- startThe ruby content is aligned with the start edge of its box.
- centerThe ruby content is centered within its box.
- space-betweenThe ruby content expands as defined for normal text justification, except that if there are no expansion opportunities the content is centered.
- space-aroundAs for 'space-between' except that there exists an extra expansion opportunity whose space is distributed half before and half after the ruby content.
Example
<ruby>
<rb>This is a long text to check</rb>
<rp>(</rp><rt>short ruby</rt><rp>)</rp>
</ruby>
ruby {
ruby-align: start;
}
Browser Support
The following table will show you the current browser support for the CSS ruby-align
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
x | x | 38 | x | x |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
x | 38 | x | x | x | x |
Last updated by CSSPortal on: 31st December 2023