ruby-position

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

ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。

under

ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。

inter-character

ルビをそれぞれの文字の間に配置することを示すキーワードです。

形式文法

over | under | inter-character

例

この HTML は、 ruby-position のそれぞれの値でレンダリングします。

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

テキストの上に配置したルビ

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

ruby {
    ruby-position:over;
}

結果は以下のとおりです。

テキストの下に配置したルビ

<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

ruby {
    ruby-position:under;
}

結果は以下のとおりです。

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• HTML のルビ関連要素: <ruby>, <rt>, <rp>, <rtc>
• CSS のルビ関連プロパティ: ruby-align, ruby-merge