| 属性名 | ruby-position |
|---|---|
| 値 | [ alternate || [ over | under ] ] | inter-character |
| 初期値 | alternate |
| 適用可能要素 | ルビ |
| 継承 | 継承する |
| メディア | Visual / Ruby |
| サポート | https://caniuse.com/mdn-css_properties_ruby-position |
ruby要素で記述するルビにおいて、ルビテキストを配置する場所を指定します。
| 値 | 説明 |
|---|---|
| alternate | 異なるレベルの複数のルビがある場合に上部と下部に交互に表示します。異なるレベルとは発音の注釈である rt と意味の注釈である rtc の違いですが rtc は HTML Living Standard には採用されていません。この値自体がまだあまりサポートされていません。(サポート状況↗) |
| over | 上側に表示します。縦書きの場合は右側。 |
| under | 下側に表示します。縦書きの場合は左側。 |
| inter-character | 台湾のルビ様に追加された仕様で、漢字1文字ずつに対してその読みを漢字の右側に表示します。Can I use... を見ると Chrome 84 以降で -webkit 付きで実装済とあるのですが、うまく動作しないようです。(サポート状況↗) |
<h3>alternate</h3> <div style="margin-left:1em"> <ruby style="ruby-position: alternate">新幹線<rt>しんかんせん1</rt><rtc>しんかんせん2</rtc></ruby> </div> <h3>over</h3> <div style="margin-left:1em"> <ruby style="ruby-position: over">新幹線<rt>しんかんせん</rt></ruby> </div> <h3>under</h3> <div style="margin-left:1em"> <ruby style="ruby-position: under">新幹線<rt>しんかんせん</rt></ruby> </div> <h3>inter-character</h3> <div style="margin-left:1em"> <ruby style="-webkit-position: inter-character">新<rt>しん</rt>幹<rt>かん</rt>線<rt>せん</rt></ruby> </div>