The cover of The Complete Idiot's Guide to Create a Web Page The Complete Idiot's Style Sheets Reference

| Index | Current Category: Text (International) |
| Previous Style: right | Next Style: ruby-overhang |


ruby-align

Sets the alignment of the ruby text relative to the ruby base.

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported
Notes:
  • A ruby is a word or phrase—called the base (see the <RUBY> tag)—combined with an annotation or pronunciation guide—called the ruby text (see the <RT> tag).

See Also:

ruby-overhang, ruby-position

Possible Values:

auto
The browser determines the alignment.

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

center
The ruby text is centered on the ruby base.

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

distribute-letter
The ruby text is evenly distributed across the ruby base if the ruby text is smaller than the ruby base. (Otherwise, the ruby text is centered.)

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

distribute-space
The ruby text is evenly distributed across the ruby base, and white space is added to the left and right, if the ruby text is smaller than the ruby base. (Otherwise, the ruby text is centered.)

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

left
The left side of the ruby text is aligned with the left side of the ruby base.

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

line-edge
The ruby text is aligned with the side of the ruby base if the ruby text is adjacent to a line edge. (Otherwise, the ruby text is centered.)

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

right
The right side of the ruby text is aligned with the right side of the ruby base.

Support:

W3C StandardInternet ExplorerNetscape Navigator
Not supported 5.0 and later Not supported

Example:
<RUBY STYLE="ruby-align: right">
This is the ruby base text.
<RT>This is right-aligned ruby text.</RT>
</RUBY>
<BR>
<RUBY STYLE="ruby-align: left">
This is the ruby base text
<RT>This is left-aligned ruby text.</RT>
</RUBY>
<BR>
<RUBY STYLE="ruby-align: distribute-letter">
This is the ruby base text
<RT>This is distribute-letter ruby text.</RT>
</RUBY>
How It Looks:
This is the ruby base text. This is right-aligned ruby text.
This is the ruby base text This is left-aligned ruby text.
This is the ruby base text This is distribute-letter ruby text.

| Index | Current Category: Text (International) |
| Previous Style: right | Next Style: ruby-overhang |