sets how the ruby is displayed

ruby-align: ***; ruby-overhang: ***; ruby-position: ***;

Browser
Internet Explorer5
Type
Extension

The ruby-align, ruby-overhang, and ruby-position properties sets how the ruby is displayed.

ruby-align : Specifies the horizontal alignment of the ruby text.
ruby-overhang : Specifies how the ruby text overhang other text.
ruby-position : Specifies the position of the ruby text.

ruby {
ruby-align: distribute-space;
ruby-overhang: auto;
ruby-position: above;
}

In the following examples, the ruby is defined for the blue text.

Property Value Example
ruby-align auto ABCDEFGHIJKL(Ruby)
left ABCDEFGHIJKL(Ruby)
center ABCDEFGHIJKL(Ruby)
right ABCDEFGHIJKL(Ruby)
distribute-letter ABCDEFGHIJKL(Ruby)
distribute-space ABCDEFGHIJKL(Ruby)
line-edge ABC(RubyRubyRuby)DEFGHIJKL
ABCDEF(RubyRubyRuby)GHIJKL
ABCDEFGHIJKL(RubyRubyRuby)
ruby-overhang auto ABCDEFG(RubyRubyRuby)HIJKL
whitespace ABCDEFG(RubyRubyRuby)HIJKL
none ABCDEFG(RubyRubyRuby)HIJKL
ruby-position above ABCDEFGHIJKL(Ruby)
inline ABCDEFGHIJKL(Ruby)

The ruby-overhang property seems not to be supported　by MSIE.

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example1 { ruby-align: distribute-letter; }
#example2 { ruby-position: inline; }

</style>

</head>
<body>

<p>
<ruby>
<rb>EXAMPLE</rb><rp>(</rp><rt>Ruby</rt><rp>)</rp>
</ruby>
</p>

<p>
<ruby id="example1">
<rb>EXAMPLE</rb><rp>(</rp><rt>Ruby</rt><rp>)</rp>
</ruby>
</p>

<p>
<ruby id="example2">
<rb>EXAMPLE</rb><rp>(</rp><rt>Ruby</rt><rp>)</rp>
</ruby>
</p>

</body>
</html>
Output

EXAMPLE(Ruby)

EXAMPLE(Ruby)

EXAMPLE(Ruby)