| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {ruby-position: 値 } |
| 値 の形式 | before，after，inter-character，inline |
| 初 期 値 | before |
| 対応ブラウザー | C3+ / e5+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | <ruby> を含む要素の親要素 |
| 継 承 | する |
ruby-positionプロパティ は，ルビの表示位置を指定 します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| before | ルビのテキストは基本ブロックの前に表示します。 （初期値） |
| after | ルビのテキストは基本ブロックの後に表示します。 |
| inter-character | ルビのテキストは基本ブロック内の文字と文字の間に表示します。 |
| inline | ルビのテキストは基本ブロックの文字列の後ろにまとめて表示します。 これは配置を行わないのと同じ状態です。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
ruby.sample1 { ruby-position: before; }
ruby.sample2 { ruby-position: after; }
ruby.sample3 { ruby-position: inter-character; }
ruby.sample4 { ruby-position: inline; }
-->
</style> |
| HTML <body> ～ </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> <p><ruby class="sample4">新幹線<rt>しんかんせん</rt></ruby></p> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示されません） |
|---|
| 新幹線 新幹線 新幹線 新幹線 |