傍注用のスタイル・シート

概要

この文書では、傍注用のスタイル・シートについて説明します。

これは何?

HTML 文書中の略語 (abbr) や注釈を傍注として表示するためのスタイル・シートです。

実際の処理としては、 XBL 内の JavaScript のコードによって指定された要素の title 属性の値をダミーの要素節に複製しています。 このダミーの要素節を CSS のスタイル指定により傍注として表示します。

対応利用者エージェント

このスタイル・シートは、 XBL および CSS 水準2、それに -moz-binding 特性を使用しています。

これらに対応したブラウザとしては、 Mozilla Firefox など Gecko 系が挙げられます。

関連ファイル

sidenote.xbl

XBL による実装本体です。

sidenote-style-left.css

傍注を本文の左に表示する CSS スタイル・シートの例です。

sidenote-style-right.css

傍注を本文の右に表示する CSS スタイル・シートの例です。

使用方法

前述の CSS スタイル・シートへの参照か、 それと同様の内容を、適用する文書 (のスタイル・シート) に記述してください。

前2例のスタイル・シートでは、 XHTML 1 の abbr 要素型・acronym 要素型, XHTML 2 の abbr 要素型の要素およびその他 class が with-title-annotation である任意の要素型の要素で、 title 属性が存在する場合に、傍注として表示します。

既知の問題点

• Gecko の描画が怪しいです。 少なくても Firefox では、 やや複雑な :hover 指定がうまく反映されなかったり、 範囲選択による色反転がおかしくなったりすることがあるようです。 (今のところ、本文の描画が乱れるたり、 ブラウザが落ちたりのような致命的な問題は見つかっていません。)
• 近くの傍注同士が重なることがあります。CSS だけで解決する方法はなさそうです。
• 傍注を表示するための余白が必要です。
• 現時点で Gecko 以外では使えません。 (WinIE でも HTC を使えば実現できますが、 CSS の実装が酷過ぎるので楽しくありません。 他の UA では script 要素を使用する必要があるでしょう。)
• 要素の内容の部分 (略語など) は木としてではなく、文字列として複写します。 このため、必要なマーク (sup など) まで落としてしまうかもしれません。
• 本文がリンクの中にあると、傍注全体もリンクになってしまいます。 その他、本文側のスタイル指定からの継承があるので、 適宜打ち消しのスタイル指定が必要です。
• 本文が overflow: scroll などで隠れる区間にあると、 隠れていなければ表示されるであろう場所に対応して傍注が表示されます。 (Gecko の問題ですが、 バグとは言えないと思われます。)