このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
ruby-position
Baseline 2024 *Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
ruby-position は CSS のプロパティで、ベース要素に対するルビ要素の位置を定義します。要素の上方 (over)、下方 (under)、文字の間の右側 (inter-character) に配置できます。
試してみましょう
ruby-position: over;ruby-position: under;<section> <ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby></section>#example-element { font-size: 2em;}構文
css
/* キーワード値 */ruby-position: over;ruby-position: under;ruby-position: alternate;ruby-position: alternate over;ruby-position: alternate under;ruby-position: inter-character;/* グローバル値 */ruby-position: inherit;ruby-position: initial;ruby-position: revert;ruby-position: revert-layer;ruby-position: unset;値
over
ルビを主テキストの上（横書きの場合）または右（縦書きの場合）に配置することを示すキーワードです。under
ルビを主テキストの下（横書きの場合）または左（縦書きの場合）に配置することを示すキーワードです。alternate複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。
inter-character指定された場合、縦書きモードでは
overとして動作します。それ以外の場合、ルビを異なる文字の間に配置するため、横書きテキストの場合はベーステキストの右側に現れ、ルビ表記コンテナーの子は強制的に書字方向がvertical-rlになります。
公式定義
| 初期値 | alternate |
|---|---|
| 適用対象 | ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
ruby-position =
[alternate||[over|under]]|
inter-character
例
テキストの上に配置したルビ
HTML
html
<ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp></ruby>CSS
css
ruby { ruby-position: over;}結果
テキストの下に配置したルビ
HTML
html
<ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp></ruby>CSS
css
ruby { ruby-position: under;}結果
交互のルビ
HTML
html
<ruby> <rb>A</rb><rb>B</rb><rb>C</rb> <rtc>Above</rtc> <rtc>Below</rtc></ruby>CSS
css
ruby { ruby-position: alternate; /* 初期値でもある */}結果
仕様書
| Specification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # rubypos |
ブラウザーの互換性
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> ruby-align