ルビタグ

今日も、溜まっている日記を書くことにしました。
8/28 の日記にも書きましたが、表具関連の事を書くと、専門用語や難しい漢字が多くなり、用語集と図解の必要性を強く感じています。その対策の一環として、専門用語にはルビを付け、マウスカーソルを合わせると、簡単な説明が出るようにしてみました。(8/16 の日記からです)
ルビ関連のタグは、XHTML1.1 から採用されたもので、この掲示板で使うのはちょっと文法違反なのですが、この際、大目に見てもらいましょう。(誰に？)　但し、正しく実装されているブラウザがまだ無いので、仕様決定前にフライングで実装した IE の独自仕様に従う事にしました。(仕様通りに書くと、IE も表示できません。(笑) )
書式は、以下の通りです。

<ruby><rb>漢字</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>

かなり面倒なのですが、対応していないブラウザではタグがすべて無視されるから、IE 以外では以下のようなそっけない表示になります。(T_T)

漢字(ふりがな)

説明のポップアップには title属性を使います。<ruby title="説明文"> というように、<ruby> タグに書いても良いのですが、IE5 以上でなければ <ruby> タグ自体が無視されるので、ルビのタグセットを汎用タグの <span> タグで囲み、title属性を付けました。説明文の文字数も、ブラウザによっては制限があるので、詳しい解説は出来ませんが、少しは解り易くなると思います。
で、実際に書いてみると、テキストエディタで書いて、投稿フォームにコピー＆ペーストしなければ、書き難いし、むちゃくちゃ時間がかかります。これで、読んでくれる人がいなかったら虚しい……。(笑)

追記

はてなに転記する際に、HTML 4.01 Transitional の文法に違反しないように、汎用タグ <span> を使い、ルビ関連の要素はクラス属性で指定するよう、以下のように書き換えました。

<span class="ruby"><span class="rb">漢字</span><span class="rp">(</span><span class="rt">ふりがな</span><span class="rp">)</span></span>

これによりルビタグに対応している IE でも、他の UA と同じように、以下のように表示されます。

漢字(ふりがな)

表示スタイルにつきましては今後、CSS で調整しますので、暫くお待ちください。