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

属性名	ruby-overhang
値	auto \| start \| end \| none \| whitespace
初期値	none
適用可能要素	ルビ
継承	継承する
メディア	Visual / Ruby
サポート	C3 / e5

ruby要素で記述するルビにおいて、ルビテキストがルビ対照の文字の前後の文字に覆いかぶさるか否かを指定します。

値	説明
auto	自動配置。前後の文字に覆いかぶさります。(C3)
start	開始部分のみ、前方のテキストに覆いかぶさります。(C3)
end	終了部分のみ、後方のテキストに覆いかぶさります。(C3)
none	前後のテキストには覆いかぶさりません。(C3)
whitespace	前後のテキストが空白の部分だけ覆いかぶさります。Microsoft の Webサイトに記載されていますが、実際には動作しないようです。

HTML

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

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

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

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

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

表示

auto

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

start

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

end

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

none

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

whitespace

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

CSS - ruby-overhang

概要

説明

使用例

auto

start

end

none

whitespace