CSS - ruby-overhang
トップ >
CSSリファレンス >
ruby-overhang
概要
属性名 |
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
□□□ 漢字漢字 □□□
Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
http://www.tohoho-web.com/css/prop/ruby-overhang.htm