ruby-positionプロパティは、ルビの配置位置を指定する際に使用します。
指定できる値は、before、after、rightのいずれかです。
ruby-position:beforeを指定すると、ルビテキストはベースの前に表示されます。
これは日本語など、東アジアの表意文字の記述方法では最も一般的な設定です。
以下は、横書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。
ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の右側に表示されて本体と同じ縦書きレイアウトモードで描画されます。
以下は、縦書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。
台湾・香港・マカオなどで使用される繁体字中国語にルビをふる場合には、特殊なケースとなるので注意が必要です。
この場合のルビはボポモフォ（注音符号）になりますが、ルビを縦書きレイアウトにして本体の右側に表示させると分かりやすくなるでしょう。
ルビは縦書きですが、ルビをふる本体のレイアウトは横書きなので、本体自体は水平行で表示されます。
以下の例では、ルビ部分を分かりやすくするために青くしています。
上のような表示にするには、それぞれ個別のルビに ruby.bopomofo {writing-mode:tb-rl} といった指定をして、縦書き表意レイアウトにする必要があります。
ruby-position:afterを指定すると、ルビテキストは本体の後に表示されます。
これは日本語など、東アジアの表意文字の記述方法では比較的稀な設定ですが、教育用テキストなどで使用されることがあります。
以下は、水平レイアウトの日本語テキストに適用されたafterの場合のルビの表示例です。
ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の左側に表示されて本体と同じ縦書きレイアウトモードで描画されます。
以下は、縦書きレイアウトの日本語テキストに適用されたafterの場合のルビの表示例です。
ruby-position:rightを指定すると、ルビテキストはベースの右側に表示されます。rightの場合には
beforeやafterの場合とは異なり、テキストの記述方向には関連しません。
ruby.sample1 {ruby-position:before;}
ruby.sample2 {ruby-position:after;}
ruby.sample3 {ruby-position:right;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p><ruby class=”sample1″>新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby class=”sample2″>新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby class=”sample3″>新幹線<rt>しんかんせん</rt></ruby></p>
</body>
</html>
新幹線
新幹線
新幹線
