この記事は 2006 年に書かれました。内容は古くなっています。
たとえばこんなルビ表示
最初にお断りしておきますが、インターネットエクスプローラ6ではうまく機能しませんでした。 ウィンドウズ2000+モジラ ファイアフォックス1.5及びオペラ8で正常動作を確認してます。 仮に使うとしても、ユーザースタイルシートでの使用をお勧めします。
豆文字いやーん
以下のエントリを読んで思ったこと
- 檜山正幸のキマイラ飼育記 – ルビ(ふりがな)タグの話
- ルビ表示はユーザスタイルシートで! – 徒書
- 404 Blog Not Found:css – ルビもCSSで
- 404 Blog Not Found:css – ルビの理想と現実
ファイアフォックス1.5などの、後ろに括弧で付記するタイプのルビ処理って、そんなにダメですかね? 紙媒体と同様に上部に被せるタイプのルビのふりかただと、必然的に豆文字になってかえって読みづらいです。 ウェブのテキストを無理に紙のルールに合わせなくてもいいんじゃないかな~、と。
つっても、後ろ括弧処理がウザいっつーかダサいのもわかる。 で、ふと思いついたことを試してみました。
文章で説明するよりキャプチャを並べた方がわかりやすいと思った
通常時
ポイント時
アニメーションGIF
サンプル文章は『
↑ファイアフォックス1.5やオペラ8なら、上の行の赤い※印の付いている『貉』『小泉八雲』にカーソルを合わせることで、 ルビが表示されます。(IE6以前だと、無意味に※印が付いてて、申し訳ないです)
スタイルシート
ruby { padding-left : 8px; background-image : url("./image/icon/rubymark.png"); background-repeat : no-repeat; background-position: top left; } ruby:hover { padding-left : 0px; background-image : none; } rp{ display : none; } rt{ display : none; } ruby:hover rp{ display : inline;} ruby:hover rt{ display : inline;}
通常時は〝display : none;〟でルビを消して、ポイント時(:hover)のみルビを表示してます。
〝そこにルビがある印〟として、※印(画像)を使いましたが、アンダーラインとか、背景色を変えるとかでもいいと思います。 ただ、アンダーラインだとリンクやページ内リンクと紛らわしいと思ったんで。