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

Is a keyword indicating that the ruby will be aligned with the start of the base text.

Is a keyword indicating that the ruby will be aligned at the middle of the base text.

Is a keyword indicating that the extra space will be distributed between the elements of the ruby.

Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

Formal definition

Formal syntax

start | center | space-between | space-around

Examples

Ruby aligned at the start of the base text

<ruby>   <rb>This is a long text to check</rb>   <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby {   ruby-align: start; } 

Ruby aligned at the center of the base text

<ruby>   <rb>This is a long text to check</rb>   <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby {   ruby-align: center; } 

Extra space distributed between ruby elements

<ruby>   <rb>This is a long text to check</rb>   <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby {   ruby-align: space-between; } 

Extra space distributed between and around ruby elements

<ruby>   <rb>This is a long text to check</rb>   <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> 

ruby {   ruby-align: space-around; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors