CSS3: ruby-overhang プロパティ - 本体に隣接するテキストへのルビのかかり方

■ 概要

項  目説  明
記述形式 {ruby-overhang: }
値 の形式 autostartendnone
初 期 値 none
対応ブラウザー C3+ / e5+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 <ruby> を含む要素の親要素
継  承 する

■ 解説

ruby-overhangプロパティ は,本体に隣接するテキストへのルビのかかり方を指定します。

指定できる値の形式は,以下のとおりです。

説  明
auto ルビのテキストは両端とも直前と直後のテキストにかぶさる。
start ルビのテキスト先頭は直前のテキストにかぶさる。
end ルビのテキスト末尾は直後のテキストにかぶさる。
none ルビのテキストは両端とも直前や直後のテキストにはかぶさらない。

■ 使用例( ruby-align プロパティの利用)

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>

ブラウザー 表示例 (未対応のブラウザーでは正しく表示されません)

オーストリア墺太利のウィーン 楽友協会ムジークフェライン(Musikverein) 大ホールでのニューイヤー・コンサート新年演奏会 が楽しみだ。 (ruby-overhang: auto;)

オーストリア墺太利のウィーン 楽友協会ムジークフェライン(Musikverein) 大ホールでのニューイヤー・コンサート新年演奏会 が楽しみだ。 (ruby-overhang: start;)

オーストリア墺太利のウィーン 楽友協会ムジークフェライン(Musikverein) 大ホールでのニューイヤー・コンサート新年演奏会 が楽しみだ。 (ruby-overhang: end;)

オーストリア墺太利のウィーン 楽友協会ムジークフェライン(Musikverein) 大ホールでのニューイヤー・コンサート新年演奏会 が楽しみだ。 (ruby-overhang: none;)

■ 備考

【参考ページ】