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.

Summary

The ruby-align CSS property defines the distribution of the different ruby elements over the base.

ÐÐ°ÑÐ°Ð»ÑÐ½Ð¾Ðµ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ðµ	`space-around`
ÐÑÐ¸Ð¼ÐµÐ½ÑÐµÑÑÑ Ðº	Ð±Ð°Ð·Ð¾Ð²ÑÐµ ÑÐ»ÐµÐ¼ÐµÐ½ÑÑ ruby, Ð°Ð½Ð½Ð¾ÑÐ°ÑÐ¸Ð¸ Ðº ruby, Ð±Ð°Ð·Ð¾Ð²ÑÐµ ruby ÐºÐ¾Ð½ÑÐµÐ¹Ð½ÐµÑÑ, ÐºÐ¾Ð½ÑÐµÐ¹Ð½ÐµÑÑ Ð°Ð½Ð½Ð¾ÑÐ°ÑÐ¸Ð¹ Ðº ruby
ÐÐ°ÑÐ»ÐµÐ´ÑÐµÑÑÑ	Ð´Ð°
ÐÐ±ÑÐ°Ð±Ð¾ÑÐºÐ° Ð·Ð½Ð°ÑÐµÐ½Ð¸Ñ	ÐºÐ°Ðº ÑÐºÐ°Ð·Ð°Ð½Ð¾
Animation type	by computed value type

Syntax

css

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

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 syntax

ruby-align = 
  start          |
  center         |
  space-between  |
  space-around

Examples

This HTML will render differently with each value of ruby-align:

html

<ruby>
  <rb>This is a long text to check</rb>
  <rp>ï¼</rp><rt>short ruby</rt><rp>ï¼</rp>
</ruby>

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;
}

This gives the following 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;
}

This gives the following 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;
}

This gives the following result:

Extra space distributed between and around ruby element

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;
}

This gives the following result:

Ð¡Ð¿ÐµÑÐ¸ÑÐ¸ÐºÐ°ÑÐ¸Ð¸

Specification
CSS Ruby Annotation Layout Module Level 1 # ruby-align-property

Ð¡Ð¾Ð²Ð¼ÐµÑÑÐ¸Ð¼Ð¾ÑÑÑ Ñ Ð±ÑÐ°ÑÐ·ÐµÑÐ°Ð¼Ð¸

Ð¡Ð¼Ð¾ÑÑÐ¸ÑÐµ ÑÐ°ÐºÐ¶Ðµ

HTML Ruby elements: <ruby>, <rt>, <rp>, and <rtc>.
CSS Ruby properties: ruby-position, ruby-merge.

Help improve MDN

Learn how to contribute

This page was last modified on 7 Ð½Ð¾ÑÐ±. 2025 Ð³. by MDN contributors.

View this page on GitHub â¢ Report a problem with this content