これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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
over の例ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。
under
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 の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし1238 なし1 ? なし2
inter-character なし ? なし なし ? なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung 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).

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,