周知のとほり＜ruby＞〜＜/ruby ＞で表現するルビは XHTML1.1 以降から使用可能で、HTML 4.01 で使用するのはフライイングになる。（ただし、＜ruby＞要素をばしばし使つてゐる私が言つてもまつたく説得力がないのが實情だ。）
となると、汎用的なインライン要素である＜span＞にスタイルシートを適用して實現することになる。試行錯誤の結果、次の書式に落ち着いてゐる。
span.ruby { position:relative; line-height:2.2em; }
span.ruby span.rt { position:absolute; left:0; top:-1.1em; font:normal 50%/1 "MS PGothic",sans-serif; text-decoration:none; text-indent:0; }
span.ruby span.rp { display:none; }
＜span class=ruby＞
圓
＜span class=rp＞(＜/span＞
＜span class=rt＞ヱン＜/span＞
＜span class=rp＞)＜/span＞
＜/span＞
これは、以下のサイトを參考にした。
http://www.akatsukinishisu.net/itazuragaki/2001_08.html#ruby_for_mozilla
さて、上記の書式の簡單な説明をする。まづ、各書式は次のやうにルビタグと對應してゐる。
- span.ruby → ruby
- span.rt → rt
- span.rp → rp
span.rp については言ふまでもなく、スタイルシートで非表示にしてゐる。また、親要素である span.rubyに相對位置屬性をつけ、その子要素である span.rt には絶對位置屬性をつけてゐる。span.rubyの相對位置屬性自體は、これ單體で何かをするわけではないが、子要素と組み合はせることで意味を持つ。span.rt は親要素からの絶對位置を指定して、親テキストと關連づけられる。
まづ、span.ruby は {line-height:2.2em;} で、文字の高さから 2.2倍の縱幅を確保する。これにより、中心線から上下にそれぞれ、1.1em の縱幅が確保できる。子要素である span.rtは、この縱幅の最上位置を {top:-1.1em;}で、左端を {left:0;} で指定する。
このままだと文字が大きすぎて本文と振り假名が重なるので、span.rt の文字の大きさを {font:50%;}で半分にする。また、振り假名の上下餘白がはみ出して惡さをしないやうに、{font:50%/1}で高さを文字と同じにしておく。その他、文字の餘分な裝飾はいらないので、{font:normal;}や {text-decoration:none;}を指定しておく。これで、HTML 4.01 Strict準據なルビが實裝できる。
試してみたところ、Explorer 6.0や Netscape 7.0 で、そこそこの表示が可能になつた。ただし、スタイルシートの位置あはせの實裝がまづいブラウザでは、表示が崩れることもある。
