項 目 | 説 明 |
---|---|
記述形式 | {ruby-overhang: 値 } |
値 の形式 | auto,start,end,none |
初 期 値 | none |
対応ブラウザー | C3+ / e5+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
適用可能な要素 | <ruby> を含む要素の親要素 |
継 承 | する |
ruby-overhangプロパティ は,本体に隣接するテキストへのルビのかかり方を指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
auto | ルビのテキストは両端とも直前と直後のテキストにかぶさる。 |
start | ルビのテキスト先頭は直前のテキストにかぶさる。 |
end | ルビのテキスト末尾は直後のテキストにかぶさる。 |
none | ルビのテキストは両端とも直前や直後のテキストにはかぶさらない。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css"> <!-- ruby.sample1 { ruby-overhang: auto; } ruby.sample2 { ruby-overhang: start; } ruby.sample3 { ruby-overhang: end; } ruby.sample4 { ruby-overhang: none; } ruby { background-color: pink; } rt { background-color: yellow; } --> </style> |
HTML <body> ~ </body> |
<p><ruby class="sample1">オーストリア<rt>墺太利</rt></ruby>のウィーン <ruby class="sample1">楽友協会<rt>ムジークフェライン(Musikverein)</rt></ruby> 大ホールでの<ruby class="sample1">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby> が楽しみだ。 (ruby-overhang: auto;)</p> <p><ruby class="sample2">オーストリア<rt>墺太利</rt></ruby>のウィーン <ruby class="sample2">楽友協会<rt>ムジークフェライン(Musikverein)</rt></ruby> 大ホールでの<ruby class="sample2">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby> が楽しみだ。 (ruby-overhang: start;)</p> <p><ruby class="sample3">オーストリア<rt>墺太利</rt></ruby>のウィーン <ruby class="sample3">楽友協会<rt>ムジークフェライン(Musikverein)</rt></ruby> 大ホールでの<ruby class="sample3">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby> が楽しみだ。 (ruby-overhang: end;)</p> <p><ruby class="sample4">オーストリア<rt>墺太利</rt></ruby>のウィーン <ruby class="sample4">楽友協会<rt>ムジークフェライン(Musikverein)</rt></ruby> 大ホールでの<ruby class="sample4">ニューイヤー・コンサート<rt>新年演奏会</rt></ruby> が楽しみだ。 (ruby-overhang: none;)</p> |
ブラウザー 表示例 (未対応のブラウザーでは正しく表示されません) |
---|
オーストリアのウィーン 楽友協会 大ホールでのニューイヤー・コンサート が楽しみだ。 (ruby-overhang: auto;) オーストリアのウィーン 楽友協会 大ホールでのニューイヤー・コンサート が楽しみだ。 (ruby-overhang: start;) オーストリアのウィーン 楽友協会 大ホールでのニューイヤー・コンサート が楽しみだ。 (ruby-overhang: end;) オーストリアのウィーン 楽友協会 大ホールでのニューイヤー・コンサート が楽しみだ。 (ruby-overhang: none;) |