freefielder.jp

さて、HTML5最終勧告で定義されたルビの書式を先取りしてやろう…と、ぼちぼちJavaScriptを書いているのです。

これがなかなか作業が捗らない。

捗らない理由は自分のモチベーションの所為なのですが、モチベーションが上がらない原因は、相変わらず「またIEか…」という話。HTMLの処理が正しいとか間違っているとかいう話ではなく、他のブラウザと同じ挙動をしてほしい、ただそれだけなのだけれど、上手く行かんなぁ。

まずは『両面ルビ』の話。

以下のようなHTMLソースに対して、

次のようなスタイルを適用すると、

FirefoxやChromeなどでは「お、両面ルビじゃん」というようなレンダリングがなされます。IEだと何だかおかしな事に。

金字塔きんじとうピラミッド

ChromeやFirefoxでの表示 →
IEでの表示　　　　　　　　→

どうやら、Internet Explorer は rtcタグをご存じないらしく（それはそれで別に良いのですが）、他のブラウザと違って知らないタグに関しては nth-of-type() で上手く数をカウントしてくれないという仕様のようなのですね。

IEがご存じないタグに対してもスタイルを効かせたりDOM操作をしたりは可能なので、何とかならないことはないのだけれど、IEの為だけに何かする、というのは本当にモチベーションが上がらないのです。

もうひとつ。

HTML5では、ruby周りのタグ（rb,rt,rtc）について、それが明らかである場合には終了タグを省略できるという仕様が定められました（→参照：HTML5 日本語訳）。例えば、以下のような記述が可能なわけです。

これ、ChromeやFirefoxでは意図したとおりに終了タグを補完してくれて（JavaScriptを使って innerHTML を表示させてみたりすると確認できます）、内部的には

…というHTMLだと判断してくれます。一方、IEでは、

…と解釈されてしまうのです。これだと当然、レイアウトがズレるよね。これを補正するのはちょっと難儀。やれば出来るのだけれどやる気が起きない。

以上、愚痴でした。ぼちぼち頑張る。