【ruby-overhang】ルビの表示領域を指定

ruby-overhangプロパティでは、ルビをふられる文字(本体部分)よりもルビが長い場合に、隣り合うテキストとのスペースをどのようにするのかを指定する事ができます。

例えば隣り合うテキストの上まではみ出してルビを表示するのか、それともスペースを空けて隣り合うテキストの上には表示しないようにするのか、などが可能です。

なおruby-overhangプロパティは、Internet Explorerが独自に追加した機能となります。

書式

  • ruby-overhang : ……… ルビの表示領域を指定

★:auto、whitespace、none

auto
ルビがふられる文字(ruby要素)に隣接しているテキストの上にもルビを表示する(空白を含む)
whitespace
ルビがふられる文字(ruby要素)に隣接しているテキストの上は避けルビを表示する。
none
ルビがふられる文字(ruby要素)に隣接しているテキストの上にもルビを表示する(空白を含まない)

使用した時の例

.sample1 {ruby-overhang: auto;}
.sample2 {ruby-overhang: whitespace;}
.sample3 {ruby-overhang: none;}
<h4>auto</h4>
〇〇〇〇<ruby class="sample1">漢字部分<rt>ルビテキストルビテキストルビテキスト</rt></ruby>&emsp;〇〇〇〇
<h4>whitespace</h4>
〇〇〇〇<ruby class="sample2">漢字部分<rt>ルビテキストルビテキストルビテキスト</rt></ruby>〇〇〇〇
<h4>none</h4>
〇〇〇〇<ruby class="sample3">漢字部分<rt>ルビテキストルビテキストルビテキスト</rt></ruby>〇〇〇〇

ブラウザ上の表示例

auto

〇〇〇〇漢字部分ルビテキストルビテキストルビテキスト 〇〇〇〇

whitespace

〇〇〇〇漢字部分ルビテキストルビテキストルビテキスト〇〇〇〇

none

〇〇〇〇漢字部分ルビテキストルビテキストルビテキスト〇〇〇〇

※IEの場合有効となります。また、autoの部分のテキストに空白を入れてあります

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 ruby
メディア visual
対応ブラウザ Internet Explorer5~

関連情報