2008年07月15日 17:15 [Edit]

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

この記事へのトラックバックURL

この記事へのトラックバック
日本の振り仮名文化の始まりと終わり。そしてWEBでの振り仮名の振り方
ルビを振れ! 書評「振仮名の歴史」【散歩師漫画居士柴岡秀一のくだらなクラブ(R)日記】at 2009年08月22日 02:40
ブログから検索 俺の厳選!Firefox3 おすすめアドオンまとめ 【第一弾】Firefox3に対応した俺が使っているお勧めのアドオンをまとめて見ました。 簡単に紹介して行こうかなと思います。 今数えて見たら33個もありましたw多いのかどうなのか・・・ 全部必要だし特に重...
Firefox3のこと【人気ワードの口コミ情報】at 2008年08月06日 10:32
檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日にルビ(ふりがな)タグの話をエントリしているのはルビタグにはIEでは想定通りの表示もFirefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、&lt;ruby&gt;&nbsp;&nbsp;&lt;rb&gt;夥&lt;/rb&gt;&nbsp;&nbs
CSSによるルビ(振り仮名)表示方法【ホームページ作成浜松Tips】at 2008年08月04日 08:00
意外と文字の上下に異なるルビを振る(横書きの場合)のはDTPソフトでも結構面倒くさい。まぁ考えられるのは最初に普通に上のルビを付けて、ルビを付けたい言葉の後の文字にもルビを振ってオフセット値を操作して無理矢理位置を合わせる、というところか。で、あの小飼...
意外とDTPソフトでは難しいことをさらりとやっちゃう人たち【たまには書くぞ】at 2008年07月19日 13:13
rubyってもruby-langではなく、振り仮名の方のrubyです。 ネタ元→...
CSSでRuby【FloralCompany.log】at 2008年07月15日 18:26
この記事へのコメント
http://www.w3.org/International/articles/ruby/#Slide0180
ruby-position: inline;
で後ろに書くのは、いかがでしょうか。

Posted by しろとら at 2008年07月15日 20:13
わたしの環境(Firefox3/Windows)では、意図したように表示されてますが…何の違いなんでしょうね。フォントは複数試してみましたので関係ないかと。
Posted by Yugo at 2008年07月15日 20:12
Firefox 3でルビを振ったテキストが思いっきり下にずれているんですが、Windowsだけですかねぇ。
Posted by FT at 2008年07月15日 19:27
僕の環境だと、ルビを振ったところは全部下にずれてしまっていますね・・・
Posted by ton at 2008年07月15日 18:40