CSSでルビを振る

私のペンネームは「かのう神路(しんぢ)」であって、けっして「かのう神路(かみじ)」ではありません。 ……我ながら紛らわしい当て字だこと。 こんな読みづらい名前なので、ルビ振らないと誰も読めないんですが、IE 以外のブラウザはほとんど <ruby> タグに対応してません。 Firefox のアドオンで対応する手もありますが、ユーザーにいちいち「拡張機能入れてたも」と言うわけにもいきません。まあ、対応してなければ単に「かのう神路(しんぢ)」と表示されるだけなんですが、やはり見栄えがよろしくない。 ってなわけで、実は二年ほど前からIE以外でもルビを表示できるよう、CSS にちょっと仕掛けをしてあります。 XHTML 1.0 では使えませんが、1.1 なら <ruby> タグが定義されてますので、HNがよく誤読される人などは参考にしてみてください。 仕掛けといっても、やってることは単純です。以下の