★CSS3リファレンス

ruby-positionプロパティは、ルビの配置位置を指定する際に使用します。

指定できる値は、before、after、rightのいずれかです。

ruby-position:before（初期値）の場合

ruby-position:beforeを指定すると、ルビテキストはベースの前に表示されます。
これは日本語など、東アジアの表意文字の記述方法では最も一般的な設定です。
以下は、横書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。

ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の右側に表示されて本体と同じ縦書きレイアウトモードで描画されます。
以下は、縦書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。

台湾・香港・マカオなどで使用される繁体字中国語にルビをふる場合には、特殊なケースとなるので注意が必要です。
この場合のルビはボポモフォ（注音符号）になりますが、ルビを縦書きレイアウトにして本体の右側に表示させると分かりやすくなるでしょう。
ルビは縦書きですが、ルビをふる本体のレイアウトは横書きなので、本体自体は水平行で表示されます。
以下の例では、ルビ部分を分かりやすくするために青くしています。

上のような表示にするには、それぞれ個別のルビに　ruby.bopomofo {writing-mode:tb-rl}　といった指定をして、縦書き表意レイアウトにする必要があります。

ruby-position:afterの場合

ruby-position:afterを指定すると、ルビテキストは本体の後に表示されます。
これは日本語など、東アジアの表意文字の記述方法では比較的稀な設定ですが、教育用テキストなどで使用されることがあります。
以下は、水平レイアウトの日本語テキストに適用されたafterの場合のルビの表示例です。

ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の左側に表示されて本体と同じ縦書きレイアウトモードで描画されます。
以下は、縦書きレイアウトの日本語テキストに適用されたafterの場合のルビの表示例です。

ruby-position:rightの場合

ruby-position:rightを指定すると、ルビテキストはベースの右側に表示されます。rightの場合には
beforeやafterの場合とは異なり、テキストの記述方向には関連しません。

■値

■初期値・適用対象・値の継承

■使用例