Abakada CSS Attributes Reference: ruby-align Attribute

asp.net.ph

Sets or retrieves the position of the ruby text specified by the RT object.

CSS	{ ruby-align: "auto" \| "left" \| "center" \| "right" \| "distribute-letter" \| "distribute-space" \| "line-edge" }
Script	object.style.rubyAlign = sRubyAlign ]

auto	The browser determines how the ruby text is aligned. The recommended behavior for an Ideographic ( East 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	The ruby text is left aligned with the base.
center	The 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, then the base is centered within the width of the ruby text.
right	The ruby text is right aligned with the base.
distribute-letter	The ruby text contents are 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	The ruby text contents are 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 preceeds 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	The 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 lines up with the side of the base text.

The property is read/write with a default value of auto; the proposed cascading stylesheet ( CSS ) extension attribute is not inherited.

The rubyAlign property specifies the alignment of the ruby text defined by the RT object, and is set on the RUBY object. The base text is defined in the RUBY object with the RB object.

The following example demonstrates the use of both the CSS ruby-align style attribute and the rubyAlign object property to set the alignment of the ruby text.

The sample uses an inline stylesheet 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';">

This feature requires Microsoft^® Internet Explorer^® 5 or later.

Show me