トップページ  > CSS3  > ruby-position

★CSS3リファレンス

ruby-position …… ルビの配置位置を指定する
広告

ruby-positionプロパティは、ルビの配置位置を指定する際に使用します。

指定できる値は、before、after、rightのいずれかです。

ruby-position:before(初期値)の場合

ruby-position:beforeを指定すると、ルビテキストはベースの前に表示されます。 これは日本語など、東アジアの表意文字の記述方法では最も一般的な設定です。 以下は、横書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。

ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の右側に表示されて本体と同じ縦書きレイアウトモードで描画されます。 以下は、縦書きレイアウトの日本語テキストに適用されたbeforeの場合のルビの表示例です。

台湾・香港・マカオなどで使用される繁体字中国語にルビをふる場合には、特殊なケースとなるので注意が必要です。 この場合のルビはボポモフォ(注音符号)になりますが、ルビを縦書きレイアウトにして本体の右側に表示させると分かりやすくなるでしょう。 ルビは縦書きですが、ルビをふる本体のレイアウトは横書きなので、本体自体は水平行で表示されます。 以下の例では、ルビ部分を分かりやすくするために青くしています。

上のような表示にするには、それぞれ個別のルビに ruby.bopomofo {writing-mode:tb-rl} といった指定をして、縦書き表意レイアウトにする必要があります。

ruby-position:afterの場合

ruby-position:afterを指定すると、ルビテキストは本体の後に表示されます。 これは日本語など、東アジアの表意文字の記述方法では比較的稀な設定ですが、教育用テキストなどで使用されることがあります。 以下は、水平レイアウトの日本語テキストに適用されたafterの場合のルビの表示例です。

ルビをふられる本体が縦書きレイアウトモードで表示された場合、ルビは本体の左側に表示されて本体と同じ縦書きレイアウトモードで描画されます。 以下は、縦書きレイアウトの日本語テキストに適用されたafterの場合のルビの表示例です。

ruby-position:rightの場合

ruby-position:rightを指定すると、ルビテキストはベースの右側に表示されます。rightの場合には beforeやafterの場合とは異なり、テキストの記述方向には関連しません。

■値

before
本体の前にルビテキストを表示(横書きの場合は本体の上、縦書きの場合は本体の右)(初期値)
after
本体の後にルビテキストを表示(横書きの場合は本体の下、縦書きの場合は本体の左)
right
本体の右側にルビテキストを表示(横書き、縦書きを問わない)

■初期値・適用対象・値の継承

初期値
before
適用対象
display:ruby-text となっている要素の親
値の継承
する

■使用例

CSSソースは外部ファイル(sample.css)に記述

ruby.sample1 {ruby-position:before;}
ruby.sample2 {ruby-position:after;}
ruby.sample3 {ruby-position:right;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p><ruby class="sample1">新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby class="sample2">新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby class="sample3">新幹線<rt>しんかんせん</rt></ruby></p>
</body>
</html>
↓↓↓

ブラウザ上の表示

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ