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 |
継承 | あり |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
構文
値
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 の定義 |
草案 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- HTML のルビ関連要素:
<ruby>
,<rt>
,<rp>
,<rtc>
- CSS のルビ関連プロパティ:
ruby-align
,ruby-merge