CSS - ルビ再び

以前、

• 404 Blog Not Found:css - ルビもCSSで

という記事を書いたのだが、Firefox 3でどうもきちんと表示されない。これは困った。どうしてもルビを使いたい記事があるのだ。

というわけで、今度は大本の記事をそのままコピペするのではなく、CSSをきちんと理解した上で書き直してみた。

その結果が、以下である。

ここのblog主は
<ruby>小飼<rp(></rp><rt>こがい</rt><rp>)</rp></ruby>
<ruby>弾<rp>(</rp><rt>だん</rt><rp>)</rp></ruby>
といいます。

ここのblog主は 小飼(こがい) 弾(だん) といいます。

ruby {
  display:inline-table !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-indent:0 !important;
  margin:0 !important;
  vertical-align:text-bottom !important;
  line-height:1 !important;
}

ruby>rb,ruby>rbc {
  display:table-row-group !important;
  line-height:1.0 !important;
}

ruby>rt,ruby>rbc+rtc {
  display:table-header-group !important;
  font-size:71% !important;
  line-height:1.0 !important;
  letter-spacing:0 !important;
}

ruby>rbc+rtc+rtc {
  display:table-footer-group !important;
  font-size:71% !important;
  line-height:1.0 !important;
  letter-spacing:0 !important;
}

rbc>rb,rtc>rt {
  display:table-cell !important;
  letter-spacing:0 !important;
}
rp {
  display:none !important;
}

まず、基本的な考え方。

1. rubyタグ全体を、inline-tableとして扱う
2. rb、rt、rbc、rtcといった要素は、その中のcellとして扱う
3. rtおよびrtcは、小さく表示する。ここでは71%。これは面積比で半分、すなわち1/√2の近似値としている、
4. rpは非表示に
5. これをruby要素の外の文字と底が一致するよう配置する

最も変えたのが、最後の5.である。具体的にはvertical-alignである。-21%としていたが、このおかげでFirefox 3では表示が下にずれてしまった。これをtext-bottomとすることにより、ルビのない文と常に底が揃うようになった。

ただし、一つ弊害もある。rtcを使って複雑ルビを振る時に今度は上にずれてしまうのだ。

ここのblog主は
<ruby><rbc><rb>小飼</rb></rbc><rtc><rt>こがい</rt></rtc><rtc><rt>Kogai</rt></rtc></ruby>
<ruby>弾<rt>だん</rt></ruby>
といいます。

ここのblog主は 小飼こがいKogai 弾だん といいます。

とはいうものの、複雑ルビは滅多に使わないし、使ったときでもこの程度の見苦しさならまあ許してもらえるのではないか。少なくともこれで Firefox 3 でも Safari 3.x でも Opera 9.x でも「ふつうのルビ」が奇麗に表示されるようになったのはめでたい。

ブログ主の小飼弾Dan the Blogmaster Hereof

Comments

僕の環境だと、ルビを振ったところは全部下にずれてしまっていますね・・・

Posted by ton at 2008年07月15日 18:40

Firefox 3でルビを振ったテキストが思いっきり下にずれているんですが、Windowsだけですかねぇ。

Posted by FT at 2008年07月15日 19:27

わたしの環境（Firefox3/Windows）では、意図したように表示されてますが…何の違いなんでしょうね。フォントは複数試してみましたので関係ないかと。

Posted by Yugo at 2008年07月15日 20:12

http://www.w3.org/International/articles/ruby/#Slide0180
ruby-position: inline;
で後ろに書くのは、いかがでしょうか。

Posted by しろとら at 2008年07月15日 20:13