ruby-align

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

/* 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

<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
CSS Ruby Annotation Layout Module Level 1
# ruby-align-property

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
ruby-align 128 128 38 114 18.2 128 38 85 18.2 No 128
center 128 128 38 114 18.2 128 38 85 18.2 No 128
space-around 128 128 38 114 18.2 128 38 85 18.2 No 128
space-between 128 128 38 114 18.2 128 38 85 18.2 No 128
start 128 128 38 114 18.2 128 38 85 18.2 No 128

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align