2006年06月01日 17:20 [Edit]

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


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

この記事へのトラックバック
檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日にルビ(ふりがな)タグの話をエントリしているのはルビタグにはIEでは想定通りの表示もFirefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、<ruby>  <rb>夥</rb> &nbs
CSSによるルビ(振り仮名)表示方法【ホームページ作成浜松Tips】at 2008年08月04日 08:00
『404 Blog Not Found:css - ルビの理想と現実』 CSSが無効な環境だと、ルビの部分が「芥」でしかないのですけれども。印刷も「出來ない」し。(「業務連絡ぎょうむれんらくから。みなさん、CSS??
平成18年06月04日【普請紀】at 2006年06月04日 01:54
[404 Blog Not Found:css - ルビの理想と現実]より。【引用: 【引用: [Mozillaでルビ表示3]の記事でも触れていましたが、ルビ用のスタイル定義は、ルビ表示を持たないブラウザにユーザスタイルシートとして適用することをお勧めします。】というのが技術的な正解ですが、他方...
ルビ用CSSについての現実的な理由【徒書】at 2006年06月03日 15:29
http://sanjose.sakura.ne.jp/blog/archives/10 でルビのふり方を小飼弾さんが開発したかのように書きましたが誤りでした。 akatsukinishisuさんです。 深くお詫びします。 ...
おわび 勘違いしてました【よしくん2.0】at 2006年06月03日 02:32
この記事へのコメント
すみません、一つ前に貼った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
ご対応いただき、ありがとうございます。
ところで、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
ご参考まで。
有我悟さんご報告の、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
プログラマーの小飼弾氏のアイデアと技術には
とトラックバックを張ったものです。
申し訳ありません。
直ちに訂正いたします。
Posted by よしくん at 2006年06月03日 02:32
 トラックバックさせていただいた者です。初めまして。(ちょっとドキドキしてます)

 我が家のfirefox1.5.0.3とIE6.0.2900.2180〜ではどちらもルビフリが再現されません……(TxT)な、何故……。
Posted by 有我悟 at 2006年06月02日 20:15