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: revert; ruby-align: unset; 

ruby-align

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

See also

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

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語Português (do Brasil)Русский Change language