CSS - ruby-position - とほほのWWW入門

属性名	ruby-position
値	before \| after \| inter-character \| inline
初期値	before
適用可能要素	ルビ
継承	継承する
メディア	Visual / Ruby
サポート	C3 / e5

説明

ruby要素で記述するルビにおいて、ルビテキストを配置する場所を指定します。

値	説明
before	横書きの場合は上側に、縦書きの場合は左側に表示します。(C3)
after	横書きの場合は下側に、縦書きの場合は下側に表示します。(C3)
inter-character	1文字ずつ、文字の右側に表示します。(C3)
inline	ルビが無効な場合と同様、テキストの右側に表示します。(C3/e5?)

使用例

HTML

<h5>before</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-position:before">漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>after</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-position:after">漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>inter-character</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-position:inter-character">漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>inline</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-position:inline">漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

表示

before

□□□漢字漢字ルビテキスト□□□

after

□□□漢字漢字ルビテキスト□□□

inter-character

□□□漢字漢字ルビテキスト□□□

inline

□□□漢字漢字ルビテキスト□□□

CSS - ruby-position

概要

説明

使用例

before

after

inter-character

inline