CSS の ruby-position プロパティは、ベース要素に対するルビ要素の位置を定義します。要素の上方 (over)、下方 (under)、文字の間の右側 (inter-character) に配置できます。
/* キーワード値 */ ruby-position: over; ruby-position: under; ruby-position: inter-character; /* グローバル値 */ ruby-position: inherit; ruby-position: initial; ruby-position: unset;
| 初期値 | over |
|---|---|
| 適用対象 | ruby annotations containers |
| 継承 | 継承する |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
値
over
ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。under
ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。inter-character- ルビをそれぞれの文字の間に配置することを示すキーワードです。
形式文法
over | under | inter-character
例
この HTML は、 ruby-position のそれぞれの値でレンダリングします。
<ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby>
テキストの上に配置したルビ
ruby {
ruby-position:over;
}
結果は以下のとおりです。
テキストの下に配置したルビ
ruby {
ruby-position:under;
}
結果は以下のとおりです。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Ruby Layout Module Level 1 ruby-position の定義 |
草案 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | なし | ? | あり | 38 | なし | なし2 | なし |
inter-character | なし | ? | なし | なし | なし | なし | なし |
1. Internet Explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).
2. Safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
関連情報
- HTML のルビ関連要素:
<ruby>,<rt>,<rp>,<rtc> - CSS のルビ関連プロパティ:
ruby-align,ruby-merge