トップページ > スタイルシートリファレンス > ruby-overhang

★スタイルシートリファレンス

ruby-overhang・・・ルビの表示領域を指定する(IEがCSS3の草案を先行採用)
広告

ruby-overhangプロパティは、W3Cで審議中のものをInternet Explorerが独自に採用したもので、 ルビがルビをふられる本体テキストよりも長い場合に、 どの範囲までルビをはみ出して表示するかを指定する際に使用します。

ruby-overhangプロパティは、Microsoft社のサイトでは、 Internet Explorer5.0以降で対応とされていますが、 値を変えて表示テストを行っても変化がないようです。

ruby-overhangプロパティは、CSS3で標準採用されるかもしれません

■値

auto
ruby要素の外側の他のテキストの上まではみ出してルビを表示(初期値)
whitespace
ruby要素に隣接する空白スペースの上にだけはみ出してルビを表示
none
ruby要素に隣接するテキストの上にだけはみ出してルビを表示

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

ruby {ruby-position:above;}
ruby.sample1 {ruby-overhang:auto;}
ruby.sample2 {ruby-overhang:whitespace;}
ruby.sample3 {ruby-overhang:none;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p>
あそこに<ruby class="sample1"><rb>翡翠</rb><rp>(</rp><rt>ひすいじゃなくてかわせみ</rt><rp>)</rp></ruby>が飛んでいる。(ruby-overhang:auto;を指定)
</p>
<p>
あそこに<ruby class="sample2"><rb>翡翠</rb><rp>(</rp><rt>ひすいじゃなくてかわせみ</rt><rp>)</rp></ruby>が飛んでいる。(ruby-overhang:whitespace;を指定)
</p>
<p>
あそこに<ruby class="sample3"><rb>翡翠</rb><rp>(</rp><rt>ひすいじゃなくてかわせみ</rt><rp>)</rp></ruby>が飛んでいる。(ruby-overhang:none;を指定)
</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

あそこに翡翠ひすいじゃなくてかわせみが飛んでいる。(ruby-overhang:auto;を指定)

あそこに翡翠ひすいじゃなくてかわせみが飛んでいる。(ruby-overhang:whitespace;を指定)

あそこに翡翠ひすいじゃなくてかわせみが飛んでいる。(ruby-overhang:none;を指定)

■関連項目

ruby-align …… ルビの行揃え位置を指定する(IEが独自に採用)
ruby-overhang …… ルビの表示領域を指定する(IEが独自に採用)
ruby-position …… ルビの表示位置を指定する(IEが独自に採用)
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ