CSS ruby-align Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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
Edge Chrome Firefox Opera Safari
xx38xx
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
x38xxxx

Last updated by CSSPortal on: 31st December 2023