2006年05月31日 00:55 [Edit]
css - ルビもCSSで
これ、実はCSSでなんとかなります。
檜山正幸のキマイラ飼育記 - ルビ（ふりがな）タグの話IE6では期待通りの表示（ふりがなの「おびただ」が「夥」の上に乗る）が得られます。FireFoxはダメでした、
以下をご覧ください。
どうです?
当blogでは、現在以下をCSSに加えてrubyを実現しています。IEでもSafariでもFirefoxでもちゃんと見えます。
/* * based upon * http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3 */ ruby { display:inline-table; text-align:center; white-space:nowrap; text-indent:0; text-align:center; margin: 0; vertical-align:-15%; } /* ルビベース */ ruby>rb,ruby>rbc { display:table-row-group; text-align:center; /* line-height:90%; */ } /* 前側ルビテキスト */ ruby>rt,ruby>rbc+rtc { display:table-header-group; font-size:70%; line-height:30%; letter-spacing:0; text-align:center; } /* 後側ルビテキスト */ ruby>rbc+rtc+rtc { display:table-footer-group; font-size:70%; line-height:30%; letter-spacing:0; text-align:center; } /* 複雑ルビテキスト */ rbc>rb,rtc>rt { display:table-cell; letter-spacing:0; text-align:center; } rtc>rt[rbspan] { display:table-caption; text-align:center; } /* ルビ括弧 */ rp { display:none; }
CSSを書き換えられる環境にあるかたは、是非お試しを。
Posted by dankogai at 00:55│Comments(5)│TrackBack(8)
この記事へのトラックバックURL
この記事へのトラックバック
404 Blog Not Found:css - ルビもCSSで いつも小説のルビで困っていた小説書きさんには朗報です！ 小飼さん有難う。いつもアンテナで拝見させていただいてます。 時間が取れ次第、すぐにでも対応しよう。
[Web]か、か、か、感動した！！！！【真理の砂漠〜いちぎょうばかにっき】at 2006年05月31日 01:16
昨日のエントリーに対して、Rubyfuristの弾さんが、CSSによるルビの実現（インライン・テーブルを使用）を紹介してくださってます。ありがとうございます。 さっそくにこれをコピーして、はてなのスタイルシートに張り付けてみたのですが、どうもうまくレンダリングされませ
[雑記／備忘]ルビ（ふりがな）タグの話 その2【檜山正幸のキマイラ飼育記】at 2006年05月31日 09:57
ネットに限らず、コンピューターの世界でルビを振るというのは結構大変である。
そこをうまくやる方法があるとのこと。
プログラマーの小飼弾氏のアイデアと技術にはいつも敬服する...
ルビのふり方【よしくん2.0】at 2006年06月01日 02:57
404 Blog Not Found:css - ルビもCSSで ...
links for 2006-05-31【オラオラ】at 2006年06月01日 08:04
なんだか最近になって[Mozillaでルビ表示3]の記事([個別ページ])が[ブックマークされている]なと思っていたのですが、[404 Blog Not Found:css - ルビもCSSで]で紹介されていたからのようでした。それにしても ...
ルビ表示はユーザスタイルシートで!【徒書】at 2006年06月01日 16:31
以前、
404 Blog Not Found:css - ルビもCSSで
という記事を書いたのだが、Firefox 3でどうもきちんと表示されない。これは困った。どうしてもルビを使いたい記事があるのだ。
というわけで、今度は大本の記事をそのままコピペするのではなく、CSSをきちんと理解した....
CSS - ルビ再び【404 Blog Not Found】at 2008年07月15日 17:26
檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日にルビ（ふりがな）タグの話をエントリしているのはルビタグにはIEでは想定通りの表示もFirefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、<ruby> <rb>夥</rb> &nbs
CSSによるルビ（振り仮名）表示方法【ホームページ作成浜松Tips】at 2008年08月04日 08:00
404 Blog Not Found:css - ルビもCSSで
404 Blog Not Found:css - ルビもCSSで【】at 2012年01月14日 18:25
この記事へのコメント
Firefoxには、ルビ対応の拡張がありますね。
http://piro.sakura.ne.jp/xul/_rubysupport.html
内部的にはCSSで実現しているのの拡張かな。
http://piro.sakura.ne.jp/xul/_rubysupport.html
内部的にはCSSで実現しているのの拡張かな。
Posted by y-Aki at 2006年05月31日 07:28
y-Akiさん、
上記のXULも元になっているのは
http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3
のようです。
Dan the Rubyfurist
上記のXULも元になっているのは
http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3
のようです。
Dan the Rubyfurist
Posted by 弾 at 2006年05月31日 11:57
残念ながら、Opera 8.54だと表示が崩れます。
ルビが大きく表示されすぎて、行間の隙間に隠れてしまうのです。
Operaはもともと貴blogの文字が他のブラウザの2倍程度の大きさに表示されるので、それが原因かも知れません。
ルビが大きく表示されすぎて、行間の隙間に隠れてしまうのです。
Operaはもともと貴blogの文字が他のブラウザの2倍程度の大きさに表示されるので、それが原因かも知れません。
Posted by no-name at 2006年05月31日 12:28
メモ
Posted by ba-m-bi at 2007年05月05日 10:03
<a href= http://housingassistance-gov.xomip.com >housingassistance gov</a> <a href= http://sexy-angels.xomip.com >sexy-angels</a> <a href= http://wet-pussygames-com-null.xomip.com >wet pussygames com null</a> <a href= http://nokio-n72-----.xomip.com >NOKIO N72 �纃�</a> <a href= http://www-kapsels-com.xomip.com >www kapsels com</a> <a href= http://double-d-productions-com.xomip.com >double-d-productions com</a> <a href= http://slv8-wave-crosswordmakers-com.xomip.com >slv8-wave crosswordmakers com</a> <a href= http://sudoku-dailyx.xomip.com >sudoku dailyx</a> <a href= http://interracial-sex-pics-thumba.xomip.com >interracial sex pics thumba</a> <a href= http://decoraci--n-terrazas.xomip.com >decoraci��n terrazas</a>
Posted by Sandra-cj at 2007年08月14日 21:22
