CSS ruby-position

スタイルシート属性 ruby-position はルビ（振り仮名）を振る位置を指定します。主に　<ruby> タグに対して指定するスタイルです。

書式

ruby-position : position

position には、次に示す列挙子のうちいずれかを指定する。

alternate
注釈コンテナがそのルビーセグメントの最初の注釈レベルである場合、または前のレベルがすべて文字間である場合、alternate はそれ自体または over との組み合わせで over と同じ動作をし、alternate と under との組み合わせでは under と同じ動作をする。 それ以外の場合、直前の文字間注釈のレベルが over であれば、alternate は under と同じように振る舞う。
over
横書きの場合は上に、縦書きの場合は右にルビを振る。
ruby-position: over
ブラウザ 対応
Chrome ✓
Chrome Android ✓
Edge ✓
Firefox ✓
Internet Explorer ✗
Safari ✓
Safari on iOS ✓

横書きの場合、ruby-position プロパティに over を指定すると、親文字の上にルビが振られる。

<p>
  メロスは激怒した。必ず、かの<ruby style="ruby-position: over">邪知暴虐<rt>じやちぼうぎやく</ruby>
  の王を除かなければならぬと決意した。
</p>

メロスは激怒した。必ず、かの邪知暴虐じやちぼうぎやくの王を除かなければならぬと決意した。

縦書きの場合、ruby-position プロパティに over を指定すると、親文字の右にルビが振られる。

<p style="writing-mode: vertical-rl">
  メロスは激怒した。必ず、かの<ruby style="ruby-position: over">邪知暴虐<rt>じやちぼうぎやく</ruby>
  の王を除かなければならぬと決意した。
</p>

メロスは激怒した。必ず、かの邪知暴虐じやちぼうぎやくの王を除かなければならぬと決意した。

under
横書きの場合は下に、縦書きの場合は左ルビを振る。
ruby-position: under
ブラウザ 対応
Chrome ✓
Chrome Android ✓
Edge ✓
Firefox ✓
Internet Explorer ✗
Safari ✓
Safari on iOS ✓

横書きの場合、ruby-position プロパティに under を指定すると、親文字の下にルビが振られる。

<p>
  メロスは激怒した。必ず、かの<ruby style="ruby-position: under">邪知暴虐<rt>じやちぼうぎやく</ruby>
  の王を除かなければならぬと決意した。
</p>

メロスは激怒した。必ず、かの邪知暴虐じやちぼうぎやくの王を除かなければならぬと決意した。

縦書きの場合、ruby-position プロパティに under を指定すると、親文字の左にルビが振られる。

<p style="writing-mode: vertical-rl">
  メロスは激怒した。必ず、かの<ruby style="ruby-position: under">邪知暴虐<rt>じやちぼうぎやく</ruby>
  の王を除かなければならぬと決意した。
</p>

メロスは激怒した。必ず、かの邪知暴虐じやちぼうぎやくの王を除かなければならぬと決意した。

inter-character
文字間にボポモフォ（注音符号）を振る。台湾華語で使われる。
inter-character
ブラウザ 対応
Chrome ✗
Chrome Android ✗
Edge ✗
Firefox ✗
Internet Explorer ✗
Safari ✗
Safari on iOS ✗ 
<ruby style="ruby-position: inter-character">飛<rt>ㄈㄟ</rt>機<rt>ㄐㄧ</rt></ruby>

飛ㄈㄟ機ㄐㄧ

初期値

ruby-position プロパティの初期値は alternate である。

継承

親要素に ruby-position プロパティを指定した場合、子要素にも継承される。

適用対象

ruby-position プロパティはルビ注釈コンテナに対して適用される。

関連記事

参考文献

World Wide Web Consortium (2022) CSS Ruby Annotation Layout Module Level 1