ruby-position CSS プロパティ

試してみましょう

ruby-position: over;

ruby-position: under;

<section id="default-example">
  <ruby id="example-element"> 明日 <rp>(</rp><rt>あした</rt><rp>)</rp> </ruby>
</section>

#example-element {
  font-size: 2em;
}

構文

/* キーワード値 */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;

/* グローバル値 */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

値

over

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

under

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

alternate

複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。

inter-character

指定された場合、縦書きモードでは over として動作します。それ以外の場合、ルビを異なる文字の間に配置するため、横書きテキストの場合はベーステキストの右側に現れ、ルビ表記コンテナーの子は強制的に書字方向が vertical-rl になります。

公式定義

形式文法

ruby-position = 
  [ alternate || [ over | under ] ]  |
  inter-character                    

例

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

HTML

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

CSS

ruby {
  ruby-position: over;
}

結果

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

HTML

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

CSS

ruby {
  ruby-position: under;
}

結果

交互のルビ

HTML

<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

CSS

ruby {
  ruby-position: alternate; /* 初期値でもある */
}

結果

仕様書

ブラウザーの互換性

関連情報

• HTML のルビ関連要素: <ruby>, <rt>, <rp>, <rtc>
• ruby-align
• CSS ルビレイアウトモジュール