CSS3 Pre-Reference



ruby-overhang

溢れたルビの扱い

試す

サンプル

指定された方法でルビが表示されていれば正解です。

左のテキスト新幹線ruby-overhang:auto;ruby-overhang:auto;右のテキスト

左のテキスト新幹線ruby-overhang:start;ruby-overhang:start;右のテキスト

左のテキスト新幹線ruby-overhang:end;ruby-overhang:end;右のテキスト

左のテキスト新幹線ruby-overhang:none;ruby-overhang:none;右のテキスト

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
5~

パラメータ

auto | start | end | none
初期値 none
適用 ”display: ruby-text”な要素を持つ親要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS3 Ruby Module#4.3 Ruby overhanging: the 'ruby-overhang' property

解説

ルビテキストがベースよりも狭い場合の、両隣のテキストとの関係を指定します。

InternetExplorerでも実装されていますが、実装形体が大きく異なります。

auto
両サイドのテキストをルビテキストの下に回り込ませます。
start
開始位置の側のテキストのみルビテキストの下に回り込ませます。終了位置の側のテキストは、ルビテキストが切れたところから開始されます。
end
終了位置の側のテキストのみルビテキストの下に回り込ませます。開始位置の側のテキストは、ルビテキストの外側になります。
none
テキストを回り込ませません。

トラックバック

投稿されたコメント