【ruby-position】ルビの表示位置を指定

ruby-positionプロパティでは、<RUBY>タグで付けたルビの表示位置を指定することができます。 例えばルビを、ルビがふられる文字の上部に配置したり、文字の横に配置することなどが可能です。

またルビを右寄せ、左寄せ、中央寄せ、などしたい場合はruby-alignを使用して下さい。

なおruby-positionプロパティはInternet Explorerが独自に追加した機能となります。css3の場合は、値に指定できるキーワードが一部異なるようです。

書式

  • ruby-position : ……… ルビの表示位置を指定

★:above、inline

above
ルビがふられる文字の上部にルビを表示する
inline
ルビがふられる文字の右(後ろ)にルビを表示する

使用した時の例

.sample1 {ruby-position: above;}
.sample2 {ruby-position: inline;}
<h4>above</h4>
<ruby class="sample1">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>
<h4>inline</h4>
<ruby class="sample2">漢字部分漢字部分<rt>ルビテキスト</rt></ruby>

ブラウザ上の表示例

above

漢字部分漢字部分ルビテキスト

inline

漢字部分漢字部分ルビテキスト

※IEの場合有効となります

対応ブラウザなどのデータ

初期値 above 値の継承 継承しない
適用可能な要素 ruby
メディア visual
対応ブラウザ Internet Explorer5~

関連情報