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

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 の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 完全対応 12Firefox 完全対応 38IE 未対応 なし
補足
未対応 なし
補足
補足 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).
Opera ? Safari 未対応 なし
補足
未対応 なし
補足
補足 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).
WebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 38Opera Android 未対応 なしSafari iOS 未対応 なし
補足
未対応 なし
補足
補足 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).
Samsung Internet Android 未対応 なし
inter-character
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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