This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

ruby-align

Overview table

Initial value
:

Applies to
All elements
Inherited
No
Media
visual

Computed value
:

Animatable
No

CSS Object Model Property
:

Syntax

  • ruby-align: auto
  • ruby-align: center
  • ruby-align: distribute-letter
  • ruby-align: distribute-space
  • ruby-align: left
  • ruby-align: line-edge
  • ruby-align: right

Values

auto
Default. Browser determines how the ruby text is aligned. The recommended behavior for an ideographic (Asian character) ruby is to be aligned in the distribute-space mode. The recommended behavior for a Latin character ruby is to be aligned in the center mode.
left
Ruby text is left-aligned with the base.
center
Ruby text is centered within the width of the base. If the length of the base is smaller than the length of the ruby text, the base is centered within the width of the ruby text.
right
Ruby text is right-aligned with the base.
distribute-letter
Ruby text is evenly distributed across the width of the base if the width of the ruby text is smaller than the width of the base. If the width of the ruby text is at least the width of the base, the ruby text is center-aligned.
distribute-space
Ruby text is evenly distributed across the width of the base if the width of the ruby text is smaller than the width of the base. White space precedes the first and follows the last character in the ruby text, equal to half the kerning of the ruby text. If the width of the ruby text is at least the width of the base, the ruby text is centered.
line-edge
Ruby text is centered if it is not adjacent to a line edge. If it is adjacent to a line edge, the side of the ruby text lines up with the side of the base text.

Examples

This example uses the ruby-align attribute and the ruby-align property to set the alignment of the ruby text. It uses an inline style sheet to set the ruby-align attribute to right.

<RUBY ID=oRuby STYLE = "ruby-align: right">
Ruby base.
<RT>Ruby text.
</RUBY>
<INPUT
TYPE=button VALUE="Center"
onclick="oRuby.style.rubyAlign='center';"
>

View live example

Notes

Remarks

The ruby-align property specifies the alignment of the ruby text defined by the rt object, and is set on the ruby object.

Syntax

ruby-align: auto | left | center | right | distribute-letter | distribute-space | line-edge

Standards information

See also

Related pages

Attributions