CSS - ruby-overhang

概要

属性名	ruby-overhang
値	auto \| start \| end \| none
初期値	none
適用可能要素	ルビ
継承	継承する
メディア	Visual / Ruby
サポート	https://caniuse.com/mdn-css_properties_ruby-overhang

説明

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

値	説明
auto	自動配置。前後の文字に覆いかぶさります。(C3)
start	開始部分のみ、前方のテキストに覆いかぶさります。(C3)
end	終了部分のみ、後方のテキストに覆いかぶさります。(C3)
none	前後のテキストには覆いかぶさりません。(C3)

使用例

HTML

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

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

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

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

表示

auto

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

start

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

end

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

none

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

初版：1997年7月27日、最終更新：2012年5月4日

https://www.tohoho-web.com/css/prop/ruby-overhang.htm