HTML5でルビ付き表示を行う方法（FirefoxとChromeのルビの扱い）

ケイクスでのWeb連載『数学ガールの秘密ノート』が始まりました。ところで記事の中で、ルビの扱いがブラウザで微妙に違うことにお気づきでしょうか。まずはこちらをご覧ください。

• 第1回　文字と恒等式（前編）

はじめの方に、女子高生テトラちゃんのセリフ「……先輩は恒等式（こうとうしき）のお話をしてくださいましたよね」が出てきます。この「恒等式」の部分は、以下のようにマークアップしています。

<ruby>
    恒等式                      ←1. 単語
    <rp>（</rp>                 ←2. カッコ開き
    <rt>こうとうしき</rt>       ←3. ルビ
    <rp>）</rp>                 ←4. カッコ閉じ
</ruby>

• ルビに対応していないブラウザ(Firefox)では、上記の1,2,3,4が表示されます。
• ルビに対応しているブラウザ(Chome)では、上記の1,3を使ってルビ付きで表示されます。

その結果、以下のように表示されます。FirefoxとChromeで違いますね。