<HTML>
<HEAD>
<TITLE>ルビの位置を決める</TITLE>
<style type="text/css">
<!--
rt { color : mediumaquamarine ; font-size : 8pt }
span { text-decoration : overline ; font-size : 12pt }
.sample1 { ruby-align : auto }
.sample2 { ruby-align : left }
.sample3 { ruby-align : center }
.sample4 { ruby-align : right }
.sample5 { ruby-align : distribure-letter }
.sample6 { ruby-align : distribute-space }
.sample7 { ruby-align : line-edge }
.sample8 { ruby-position : above }
.sample9 { ruby-position : inline }
-->
</style></HEAD>
<BODY>
line-edgeについては、ブラウザの大きさを変えて試してみてください。<BR>
<P>
<ruby class="sample1"><span>ruby-align : auto</span>
<rt>auto
</ruby></P>
<P>
<ruby class="sample2"><span>ruby-align : left</span>
<rt>left
</ruby></P>
<P>
<ruby class="sample3"><span>ruby-align : center</span>
<rt>center
</ruby></P>
<P>
<ruby class="sample4"><span>ruby-align : right</span>
<rt>right
</ruby></P>
<P>
<ruby class="sample5"><span>ruby-align : distribute-letter</span>
<rt>distribute-letter
</ruby></P>
<P>
<ruby class="sample6"><span>ruby-align : distribute-space</span>
<rt>distribute-space
</ruby></P>
<P>
<ruby class="sample7"><span>ruby-align : line-edge</span>
<rt>line-edge
</ruby></P>
<P>
<ruby class="sample8"><span>ruby-position : above</span>
<rt>above
</ruby></P>
<P>
<ruby class="sample9"><span>ruby-position : inline</span>
<rt>inline
</ruby></P>
</BODY>
</HTML>
