css - ルビの理想と現実

まずは業務連絡ぎょうむれんらくから。みなさん、CSSでrubyルビをやる方法ほうほうの元もとはこちらです。私わたくしではありませんのでご注意ちゅういください。

akatsukinishisuさん、改あらためてお礼れい申もうし上あげます。

ルビ表示はユーザスタイルシートで! - 徒書

それにしてもその紹介記事のブックマーク数が200以上ってすごいな。やはりウェブでは作った人よりも紹介した人の方が注目される、ということなのでしょうか。それはいいとしても、トラックバックで「プログラマーの小飼弾氏のアイデアと技術には……」と書かれているのを見てしまうと釈然としないものを感じてもいいでしょうか。

ルビ表示はユーザスタイルシートで! - 徒書

Mozillaでルビ表示3の記事でも触れていましたが、ルビ用のスタイル定義は、ルビ表示を持たないブラウザにユーザスタイルシートとして適用することをお勧めします。

というのが技術的な正解ですが、他方、当blogの読者は数万のオーダ。読者のみなさまにそれを強いるより、blogの方で出来る事があればやってしまう方が正解なのでは?と今では思うようになりました。

最後に、改めて書き直してみたルビ用のユーザスタイルシートを載せておきます。Operaで見てもルビが消えないよう調整してみました。Firefox 1.5.0.3とOpera 8.54で表示を確認。

ありがとうございます。これを元に、当方のCSSも以下のように変えてみました。

/*
 * based upon
 *  http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3
 * updated with
 *  http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.html
 */

ruby {
  display:inline-table !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-indent:0 !important;
  margin:0 !important;
  vertical-align:-21% !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;
}

font-sizeなどはカスタマイズしましたが、大元のアイディアは akatsukinishisu さんのものだということを、読者のみなさんはご留意を。私はいろいろなものをHackしてますが、CSS Hackerではないので。

Dan the CSS Novice

Comments

　トラックバックさせていただいた者です。初めまして。（ちょっとドキドキしてます）

　我が家のfirefox1.5.0.3とIE6.0.2900.2180〜ではどちらもルビフリが再現されません……（TxT）な、何故……。

Posted by 有我悟 at 2006年06月02日 20:15

プログラマーの小飼弾氏のアイデアと技術には
とトラックバックを張ったものです。
申し訳ありません。
直ちに訂正いたします。

Posted by よしくん at 2006年06月03日 02:32

ご参考まで。
有我悟さんご報告の、IE6.0.2900..... の事例（小生環境）です。
http://www008.upp.so-net.ne.jp/kimball/css_ng.gif
----
なにか、「ネタ」かなと思っていました。＼(^o^)／
へへ、「スプー」のネタもなかなか意味がわからなかった
トロイおやじです。＼(^o^)／

Posted by Kimball at 2006年06月03日 12:46

ご対応いただき、ありがとうございます。
ところで、Opera 9.00Beta だと、別の形で表示が崩れてしまいます。
そのキャプチャイメージを、アップローダをお借りして置かせていただきました。
http://res9.7777.net/bbs/oresikiup/20060603171016.1.jpg

もちろんBetaですから、ご対応をお願いするつもりはまったくございませんが、Opera 9遠からず正式リリースでしょうから、ご参考にしていただければ幸いです。

公式Beta入手先
http://opera.com/download/index.dml?custom=yes
開発版 Weekly Build入手先
http://my.opera.com/desktopteam/blog/

Posted by no-name at 2006年06月03日 17:24

すみません、一つ前に貼ったOpera9 Betaの画像のリンクが表示できないようです。

http://res9.7777.net/bbs/oresikiup/

上の掲示板の、
6/3(土) 17:11:15 No.oresikiup-20060603170715
をご覧ください。

Posted by no-name at 2006年06月06日 13:07