WebKit Open Source Projectは、SafariやChromeなどでレンダリングエンジンとして利用されているWebKitにおける「ruby」タグの実装状況について解説している。"ruby"とはスクリプト言語のRubyではなく、注釈などに使われる小フォントのことだ。HTML5準拠のrubyタグを利用することで、例えば日本語や中国語における振り仮名表記、注釈表記が容易になる。

解説によれば、"ruby"とは英国の印刷用語における5.5ポイントフォントを指す。通常の文字が10ポイント前後なため、rubyは約半分のフォントサイズとなる。このサイズの文字を通常のテキストと組み合わせることで、注釈やルビのような表記が可能になる。rubyタグの定義についてはHTML5の仕様が詳しい。注釈をつけたい文字列をrubyタグで挟むことで、メインのテキストと注釈として扱いたいテキストを定義できる。実例を見てみよう。

例1
<ruby>日本語<rt>にほんご</rt></ruby>

例えば上記のようにすることで、「日本語」という文字の上に「にほんご」という小さなフォントで注釈が表記される。<ruby>タグの範囲をひとかたまりとして認識し、<rt>で挟まれた領域を注釈として扱う。

例2
<ruby>日本語<rt>にほんご</rt></ruby>のルビーの<ruby>例<rt>れい</rt></ruby>です。

このように表記すれば、それぞれ2つの漢字の上にひらがなの注釈がつくことになる。ただし、<ruby>や<rt>を認識できないWebブラウザではすべてのテキストがひとかたまりとして認識され、次のように表示されてしまう。

例3
日本語にほんごのルビーの例れいです。

そこで<rp>というタグを使い、<ruby>タグを認識できるブラウザでは特定の文字列を無視するよう指定しておくと、注釈なしでもきれいな表記が可能となる。

例4
<ruby>日本語<rp> (</rp><rt>にほんご</rt><rp>) </rp></ruby>のルビーの<ruby>例<rp> (</rp><rt>れい</rt><rp>) </rp></ruby>です。

<ruby>タグを認識でるブラウザであればで囲まれた括弧を無視して<rt>内の文字が注釈として扱われ、もし<ruby>タグを認識できなかったとしても次のような形で通常のテキスト内で注釈的に扱うことができる。

例5
日本語 (にほんご) のルビーの例 (れい) です。

<ruby>タグの表記は下記の形式になる。このほか、読み仮名以外にも、注釈部分に英文字や解説を含ませたりなどさまざまな応用例が考えられる。

<ruby> ベーステキスト <rp> ( </rp><rt> 注釈 </rt><rp> ) </rp></ruby>
タグ 説明
<ruby> 注釈化される部分のテキスト全体
<rt> 小さなフォントの注釈として現れる部分のテキスト
<rp> もしWebブラウザ(ユーザーエージェント)が<ruby>タグを認識できない場合に括弧を付与するためのタグ

また今回の例は横文字表記を扱っているが、日本語や中国語のように縦書きが一般に利用される言語もある。例えば中国語の読み仮名にあたるZhuyin Fuhao(Bopomofo)では、発音記号を漢字とともに縦方向に並べて表記することが多い。これについても<ruby>タグと<rt>タグを組み合わせることで対応できる。

なお、これらによる注釈表記を有効にするため、CSS3でレンダリングを可能にするためのいくつか追加表記が必要となる。詳細については下記項目を参照のこと。また表示サンプルを含め、WebKitのrubyサポートについては「Ruby Rendering in WebKit」を参照してほしい。