HTML

2017/04/09

RUBY（ルビ）要素を使ってふり仮名を振ってみましょう。

話は簡単なのですが、ネットで調べたり、ブラウザ実装を見てみたりすると迷宮に陥ってしまいそうな気がする（私だけ？）のがRUBY要素ですね。

混乱の第1歩はブラウザの実装状況かと思います。かのIEが独自実装したのが始まりです。W3CのHTML4.01に規定されていなかったので長らくWEB標準ではなかったので、ご利用は計画的になものだったですね。

HTML5の登場でIEの独自実装がWeb標準になりましたので大っぴらに使っていきましょうとなりました。

そこで規定されているのが

• RUBY要素ふり仮名を振られる文字列とそのふりがな全体を括っておきます
• RB要素ふり仮名を振られる文字ですね。ルビーのボディーです。先ほどの例で言いますとRUBYの文字ですね
• RT要素ふりがなの部分ですね。ルビのテキストです。先ほどの分ですとカタカナのルビですね。
• RTC要素もう一つのふりがなですね。ルビのコンテナです。
  
  

  <ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby>
  

  W3Cのサイトに上のような例が挙げられています。ちなみにRB要素もRT要素もRTC要素も終了タグを省略することが可能です。
• RP要素ブラウザ（ユーザーエージェント）がRUBY要素に対応していない場合にRUBYルビと続けて表示されますのでふりがな部分にかっこなりなんなりつけてわかりやすくしましょうということです。ルビのパーレン（カッコ）のことです。

  <ruby>RUBY<rp>（</rp><rt>ルビ</rt><rp>）</rp></ruby>
  

  RUBY要素非対応ブラウザでは
  RUBY要素（ルビ）
  のように表示されるよとのことです。

ルビに関して要素が4つあるのが大変なのですが、迷宮はこれからです。上の例ではRB要素が書かれていませんね。さらにその上の例ではRTC要素は画像を使ってます。RB要素は省略可という解釈でいいでしょうが、RTC要素は対応ブラウザが少ないようです。Firefoxは対応しているようですがchrome、Edgeは対応していません。

Firefox以外のブラウザも早く対応してねですかね。しかしながらどうも対応する気がないようです。

ブラウザベンダーさんが集まってHTMLの実装と規格化しているWHATWGというところがHTML Living Standardというものを策定しておりまして日々更新されているようです。ブラウザベンダーさんが集まって策定しているので実装に一番近いもののようです。そのHTML Living StandardではRB要素とRTC要素は規定されていないようです。なので待っていても実装されないでしょうね。

ですから再掲しますが、

<ruby>RUBY<rp>（</rp><rt>ルビ</rt><rp>）</rp></ruby>

夜露死苦（ヨロシクゥ!）