CSS/Text Styles/sets how the ruby is displayed

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

Browser
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)
ruby-position	inline	ABCDEFGHIJKL(Ruby)

ruby text

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

Categories