[19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）

今回から数回に渡って、HTMLの テキストのための要素 を紹介します。

まず今回は、日本人には馴染み深い「ルビ（よみがな）」を表す <ruby>要素とその関連の要素を使いましょう。
<ruby>要素は XHTML1.1から使えるようになった、比較的新しい要素です。

使用する要素	<ruby> 〜 </ruby> <rt> 〜 </rt>（終了タグは省略可能） <rp> 〜 </rp>（終了タグは省略可能） <rb> 〜 </rb>（終了タグは省略可能） <rtc> 〜 </rtc>（終了タグは省略可能）

<ruby>要素は、ルビをつけたい文字とルビを丸ごとセットにして囲みます。
<rt>要素は「ruby text（ルビテキスト）」 ルビそのものを表します。
<rp>要素は「ruby parentheses（ルビ括弧）」 rubyに未対応のブラウザでは（ ）などの中にルビが表示されるように仕込みます。対応ブラウザでは無視されます。

このあとの2つは W3Cだけの仕様です（WHATWGの仕様には含まれず、対応しているブラウザが少ないのが現状です）
<rb>要素は「ruby base（ルビベース）」 ルビをつけるテキスト（漢字とか）をブロック分けしたいときに使います。
<rtc>要素は「ruby text container（ルビテキスト コンテナ）」 ルビテキストをグループ分けできるので、ルビを2種類（かな＋英字とか）付けたいときに使います。

WHATWGの仕様（<rb>, <rtc>要素が無い）でも、ルビをつけるテキストを分けたり、 2種類のルビを付けることができます。
（これは記事後半の「WHATWGの仕様のほうが単純でイイかな」に記載しています）

W3C (World Wide Web Consortium) とは
WWW (World Wide Web) で利用される技術の標準化を促進する団体。企業・学術団体・個人が集まって1994年に発足。
それ以前は各ブラウザのメーカーがそれぞれ独自に「仕様」を決めていたので「あのブラウザでは見れるのに、このブラウザじゃ見れない...」といったユーザの不利益があったため設立されました。
各ブラウザは W3Cの仕様に従っている（一応）ので 、書く方も W3C推奨の書き方をします。

WHATWG (Web Hypertext Application Technology Working Group) とは
同じくWeb上の技術の仕様を作る団体で、実際にブラウザを作る側（Apple、Mozilla、Opera）の有志が集まって2004年に発足。W3Cの仕様が現場に合ってないという憂慮のためとか。
もともと HTML5 は WHATWG が2004年から検討してきたもので、W3Cがこれを採用し、双方の共同作業で標準化したんだそうです。
というわけで、べつに敵対してるわけじゃないけど、W3C と WHATWG のダブルスタンダードになっているのが現状。今回の <ruby>は両者で異なる仕様になっています。

本日のINDEX

1. <ruby>で全体を囲み <rt>でルビを囲む
2. <rp>でルビに未対応のブラウザに括弧などをつける
3. 子要素の終了タグは省略可能
4. <rb>でルビをつけたい文字を分割できる
5. <rtc>でルビをグループ化して、2種類のルビをつける
6. WHATWGの仕様のほうが単純でイイかな
   1. 1文字ずつへのルビは<ruby>要素を複数使います
   2. 2種類のルビは<ruby>要素を入れ子にします
7. 結論：基本の3つでベーシックに使おう（笑）

参考：
W3C→ HTML 5.1 - 2nd Edition W3C Recommendation 3 October 2017
WHATWG→ HTML Living Standard — Last Updated 31 October 2017

● 2017年11月：前回更新時（2015年12月）には Firefox が <ruby>要素のネストに未対応でしたが、その後対応したので、その件も含めて全体的に記事を整理編集しました。

● 2015年12月：この記事の初回投稿時（2011年）の HTML5ドラフトでは、<rb>要素・<rtc>要素は仕様にありませんでしたが、W3C の HTML5.0勧告で採用されていましたので、追加しました。
ただし、<rb>要素・<rtc>要素は WHATWG の仕様では採用されていません。

<ruby> で全体を囲み <rt> でルビを囲む

ルビの基本の構造はこのようになっています。

<ruby> 漢字 <rt>かんじ</rt> </ruby>

ルビをつけたいテキストとそのルビを <ruby> 〜 </ruby> で囲みます。
その中の「ルビ」だけを <rt> で囲み ます。
「rt」は「ruby text（ルビテキスト）」の略です。

サンプルです。

漢字かんじ

HTMLはこちら。

<ruby>漢字<rt>かんじ</rt></ruby>

<rp>でルビに未対応のブラウザに括弧などをつける

<ruby>要素に未対応の古いブラウザで見ている人には「漢字かんじ」という見え方になります。
これを「漢字（かんじ）」と、括弧でルビを表示するための要素が<rp>要素です。
「rp」は「ruby parentheses（プレンテシス みたいな発音）」または「ruby paren（パーレン）」の略で「ルビ括弧」。

ルビ未対応のブラウザでは、ルビ関連の要素はすべて無視されるので（）もそのままテキストとして表示され、対応ブラウザなら <rp>要素の内容は非表示になります。

<ruby> 漢字 <rp> (</rp> <rt>かんじ</rt> <rp>)</rp> </ruby>

サンプルです。
ルビに未対応のブラウザでは「漢字（かんじ）」と表示されます。

漢字（かんじ）

HTMLはこちら。

<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>

子要素の終了タグは省略可能

上のサンプルのHTMLを↓このように書くことができます。

<ruby> 漢字 <rp> ( <rt>かんじ <rp>) </ruby>

<ruby> の中の 子要素の終了タグを省略 しています。

<ruby> の子要素である <rt> <rp> <rb> <rtc> の4兄弟は、終了タグを省略できます。
条件は、
・直後に4兄弟の要素どれかが続く
・自分が親の1番最後の子
ルビを付ける時はたいていこの条件だから、あまり気にせずに省略できますね。
省略できるモノは省略してソースをスッキリさせよう。

ここまで↑は、W3C・WHATWG の共通の仕様です。

ここから↓は W3C だけの仕様。
<rb> と <rtc> は、WHATWG では定義されていません。

<rb>でルビをつけたい文字を分割できる

<rb>要素は、ルビを付ける元のテキストの範囲を指定できます。
「rb」は「ruby base（ベース）」の略です。

いちばん最初の基本構造をもう１度見てみましょう。

<ruby> 漢字 <rt>かんじ</rt> </ruby>

ここで ルビをつけるテキスト（漢字など）は <rb>要素で暗黙的に囲まれていることになってます。こんなかんじです↓

<ruby> <rb>漢字</rb> <rt>かんじ</rt> </ruby>

ブラウザが <rt>要素内のテキスト以外を「ルビベース（rb）のテキスト」だと解釈しているわけです。

ですので、<rb>要素を複数使って、ルビベースを分割することもできます。
この場合 <rt>要素も複数必要ですね。分割したテキストにルビを付けるので。
例えば、漢字1文字ずつにルビを付けたい場合は、このようにします。

<ruby>漢<rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>

最初のルビベース（漢というテキスト）に注目。
これには <rb>要素が付いていませんね。
もともと暗黙的に<rb>要素で囲まれているので、分割したいところから<rb>を付ければOKなんだって。（最初っから付けてもいいけど）

サンプルです。

漢字かんじ

HTMLはこちら。

<ruby>漢<rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>

★注意★
Firefoxは対応していて、1文字ずつにルビを振り分けることができます（下記は画像）

Chrome, Opera は<rb>要素は未対応で無視します。
複数の <rt>要素にも未対応なので、ルビは付くけど最初の <rt>要素のみ漢字の上に乗り、2番目の <rt>要素の中身は横に外れる表示になります。（2017年11月記）
Chrome, Opera でも漢字1文字ずつにルビを付けるには <ruby>要素を複数使います。

子要素の終了タグを省略すれば、このように↓ソースを簡略化することができます。

<ruby>漢<rb>字<rt>かん<rt>じ</ruby>

<rtc>でルビをグループ化して、2種類のルビをつける

<rt>要素（ルビテキスト）は暗黙的に<rtc>で囲まれていることになってます。
ルビは、 ルビテキスト コンテナの中に入っているんですね。
「rtc」は「ruby text container」の略です。

<ruby> <rb>漢字</rb> <rtc> <rt>かんじ</rt> </rtc> </ruby>

この原理を利用して、ルビを2種類付けることもできます。
もともと暗黙的に<rtc>があるので、もう1種類のルビを付けたいところから<rtc>を付ければOK。

<ruby>漢字 <rt>かんじ</rt> <rtc><rt>kanji</rt> </rtc> </ruby>

もちろん<rtc>要素も終了タグを省略できるので、このように↓書けます。

<ruby>漢字 <rt>かんじ<rtc><rt>kanji</ruby>

サンプルです。

漢字(かんじkanji)

HTMLはこちら。<rtc>要素には「lang属性」もつけられます。

<ruby>漢<rb>字<rp>(<rt>かん<rt>じ<rtc lang=en><rt>kan<rt>ji<rp>)</ruby>

★注意★
Firefoxでは下記のようにルビが2段になって表示されます（下記は画像）

<rtc>に未対応の Chrome, Operaは、 <rtc>要素以降のテキストを普通のテキストとして表示してしまいます。（2017年11月記）
Chrome, Opera でも2種類のルビを付けるには、<ruby>要素を入れ子にします。

WHATWGの仕様のほうが単純でイイかな

WHATWGの仕様は、<rb>要素・<rtc>要素 がありません。

ですが、無くても大丈夫。<ruby>要素を組み合わせることによって 、<rb>要素・<rtc>要素 でやれることができちゃいます。
基本の3つの要素（ <ruby>, <rt>, <rp> ）だけなので、覚える要素が少なくてイイかな。

以下に紹介する書き方は、Chrome や Opera、Firefox でも同じ表示になります。
ただし IE は <ruby>要素のネストに未対応なので「2種類のルビ」は表示できません。

1文字ずつへのルビは<ruby>要素を複数使います

WHATWGの仕様では <rb>要素はありません。
が、複数の<ruby>要素で「ルビをつけるテキストと ルビ」のセットを分けることで、1文字ずつに対してルビを付けられます。
これなら、どんなブラウザでも <ruby>要素に対応していれば表示できますね。

漢かん字じ

HTMLはこちら。

<ruby>漢<rt>かん</ruby><ruby>字<rt>じ</ruby>

2種類のルビは<ruby>要素を入れ子にします

WHATWGの仕様では <rtc>要素はありません。
が、<ruby>要素をネスト（入れ子に）して、2種類のルビをつけることができます。

Firefoxは <ruby>のネストに未対応でしたが、新しめのバージョン（55〜）は対応しています。
IE は <ruby> のネストに未対応です（2017年11月記）

漢かん字じKanji

HTMLはこちら。

<ruby><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby><rt lang=en>Kanji</rt></ruby>

この場合、<rt>要素の終了タグは省略できませんね。ルビベースと混ざっちゃうから。
また、<rt>要素に「lang属性」を使っています。

漢字の1文字ずつに2種類のルビを付けるならこのようになります。 <ruby>要素のネストのセットを繰り返すわけで。ソースはちょっと複雑です。

漢かんKan字じji

HTMLはこちら。

<ruby><ruby>漢<rt>かん</ruby><rt>Kan</ruby><ruby><ruby>字<rt>じ</ruby><rt>ji</ruby>

上のソースは、省略した終了タグも書くとこんな構造です。

<ruby>
  <ruby>漢<rt>かん</rt></ruby>
  <rt>Kan</rt>
</ruby>
<ruby>
  <ruby>字<rt>じ</rt></ruby>
  <rt>ji</rt>
</ruby>

結論：基本の3つでベーシックに使おう（笑）

W3C と WHATWG の仕様が異なる ruby関連の要素。
<rb>要素・<rtc>要素は、対応ブラウザが少ないので使えないですよね。

ルビはもともと、日本語、中国語、韓国語などの2バイト文字に、英字や発音記号やカナなどを付けて、読み方を伝えるもの。
日本人には馴染み深いけど、諸外国には需要が非常に少ないそうです。
（日本語、中国語、韓国語などの勉強をしている人向けのサイトなら使ってそうですね）

ですので、仕様が統一されるのも、いつになることやら。

2種類のルビとか変に複雑なコトをしないで、基本の3つ（<ruby>, <rt>, <rp>）で素直に書くのが良さそうです。
この3つなら XHTML の頃からあるので、ほぼ全てのブラウザが対応しています。

次回予告

さて次回は「小さい文字」つながり（？）で、上付き文字と下付き文字をやりましょう。

上付き文字は「 100m² 」の「 ² 」のように、小さく上につく文字のこと。
下付き文字は「 CO₂ 」の「 ₂ 」のように、小さく下につく文字のことです。
これらも知っておくと非常に便利です。