Apr. 18th,2015
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 本文参照 |
| タグの省略 | 不可 |
“ruby”要素は“rt”要素で表したルビを振る範囲を指定するための要素です。
日本語での振り仮名などのテキストの読み方、翻訳、その他の説明や注釈をつけるのに使用することができます。
“ruby”要素に対応していないブラウザで表示するための括弧を“rp”要素で提供することができます。
サンプルコード
モノ・ルビ
<p>
彼女は<ruby>平<rt>へい</rt>安<rt>あん</rt>京<rt>きょう</rt></ruby>で暮らしている。
</p>
彼女は平安京で暮らしている。
グループ・ルビ
<p>
意を決した彼女は<ruby>高機能携帯電話端末<rt>スマートフォン</rt></ruby>を手にとった。
</p>
意を決した彼女は高機能携帯電話端末を手にとった。
“ruby”要素は入れ子にすることができます。
<p>
意を決した彼女は
<ruby>
<ruby>
高<rt>こう</rt>
機<rt>き</rt>
能<rt>のう</rt>
携<rt>けい</rt>
帯<rt>たい</rt>
電<rt>でん</rt>
話<rt>わ</rt>
端<rt>たん</rt>
末<rt>まつ</rt>
</ruby>
<rt>スマートフォン</rt>
</ruby>
を手にとった。
</p>
意を決した彼女は 高 機 能 携 帯 電 話 端 末 を手にとった。
要素の内容
“ruby”要素の内容は以下のうちどちらかを1組以上を配置します。
- 他の“ruby”要素や“ruby”要素を子孫要素に持たないフレージング・コンテンツ
- “ruby”要素を子孫要素に持たない1個の“ruby”要素
さらに以下のうちどちらかを1組以上を配置します。
ルビと行間
多くのブラウザではルビが存在する行とルビが存在しない行が混在していると行間がバラバラになって見た目が悪くなってしまいます。行の高さがルビを振るのに足りない場合に行の高さが変わってしまうために起こります。
<p>
<ruby>清少納言<rt>せいせうなごん</rt></ruby>こそ、したり<ruby>顔<rt>がほ</rt></ruby>にいみじうはべりける人。さばかりさかしだち、<ruby>真名<rt>まな</rt></ruby>書き散らしてはべるほども、よく見れば、まだいと足らぬこと<ruby>多<rt>おほ</rt></ruby>かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、<ruby>行末<rt>ゆくすゑ</rt></ruby>うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
“line-height”プロパティで行の高さをルビを含むことができる高さに調整すると見た目を整えることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルの文書</title>
<style>
.text-withruby {
line-height: 2.4;
}
</style>
</head>
<body>
<p class="text-withruby">
<ruby>清少納言<rt>せいせうなごん</rt></ruby>こそ、したり<ruby>顔<rt>がほ</rt></ruby>にいみじうはべりける人。さばかりさかしだち、<ruby>真名<rt>まな</rt></ruby>書き散らしてはべるほども、よく見れば、まだいと足らぬこと<ruby>多<rt>おほ</rt></ruby>かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、<ruby>行末<rt>ゆくすゑ</rt></ruby>うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>
...
清少納言こそ、したり顔にいみじうはべりける人。さばかりさかしだち、真名書き散らしてはべるほども、よく見れば、まだいと足らぬこと多かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
“font-size”プロパティでルビ自体の大きさを小さくして調整することもできますが、ブラウザによっては表示する文字の最小サイズが制限されています。
仕様書
“ruby”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <ruby> |   |
  |
|
|
|
DOMインターフェース
“ruby”要素は“HTMLElement”インターフェイスを使用します。
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
ruby {
display: ruby;
}
