CSS RUBY-ALIGN

This property specifies the horizontal alignment of the Ruby Text (RT) relative to the RUBY element content.

Example
ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace }

Ruby base contentRuby text

Possible Values
Value Description
auto The browser determines how the Ruby Text (RT) is to be aligned. Content from Asian character sets will be aligned using the ‘distribute-space' method, while non-Asian character content will be aligned using the ‘center' method.
left The left side of the Ruby Text (RT) is aligned with the left side of the Ruby content.
center The Ruby Text (RT) is centered relative to the Ruby content
right The right side of the Ruby Text (RT) is aligned with the right side of the Ruby content.
distribute-letter If the width of the content of the Ruby Text (RT) is less than the width of the RUBY content, the letter-spacing of the RT content is set so that the content is evenly distributed across the width of the RUBY content. For RT widths greater than or equal to the width of the RUBY content, this value is treated like ‘center'.
distribute-space If the width of the content of the Ruby Text (RT) is less than the width of the RUBY content, white space is added to the right and left of the RT content equal to half the kerning value of the RT content. Remaining horizontal space in the RT content is evenly distributed across the width of the RUBY content. For RT widths greater than or equal to the width of the RUBY content, this value is treated like ‘center'.
line-edge If the Ruby Text (RT) is next to or adjacent to a line edge, it is aligned to that edge. Otherwise, it is center aligned. The IE reference is not very clear on what a “line edge” specifically IS.