2006年05月31日 00:55 [Edit]

css - ルビもCSSで

これ、実はCSSでなんとかなります。

檜山正幸のキマイラ飼育記 - ルビ(ふりがな)タグの話
IE6では期待通りの表示(ふりがなの「おびただ」が「夥」の上に乗る)が得られます。FireFoxはダメでした、

以下をご覧ください。

おびただ しい数のWebページ

どうです?


当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を書き換えられる環境にあるかたは、是非お試しを。

Dan the Rubyfurist


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

この記事へのトラックバック
404 Blog Not Found:css - ルビもCSSで
404 Blog Not Found:css - ルビもCSSで【】at 2012年01月14日 18:25
檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日にルビ(ふりがな)タグの話をエントリしているのはルビタグにはIEでは想定通りの表示もFirefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、<ruby>  <rb>夥</rb> &nbs
CSSによるルビ(振り仮名)表示方法【ホームページ作成浜松Tips】at 2008年08月04日 08:00
以前、 404 Blog Not Found:css - ルビもCSSで という記事を書いたのだが、Firefox 3でどうもきちんと表示されない。これは困った。どうしてもルビを使いたい記事があるのだ。 というわけで、今度は大本の記事をそのままコピペするのではなく、CSSをきちんと理解した....
CSS - ルビ再び【404 Blog Not Found】at 2008年07月15日 17:26
なんだか最近になって[Mozillaでルビ表示3]の記事([個別ページ])が[ブックマークされている]なと思っていたのですが、[404 Blog Not Found:css - ルビもCSSで]で紹介されていたからのようでした。それにしても ...
ルビ表示はユーザスタイルシートで!【徒書】at 2006年06月01日 16:31
404 Blog Not Found:css - ルビもCSSで ...
links for 2006-05-31【オラオラ】at 2006年06月01日 08:04
ネットに限らず、コンピューターの世界でルビを振るというのは結構大変である。 そこをうまくやる方法があるとのこと。 プログラマーの小飼弾氏のアイデアと技術にはいつも敬服する...
ルビのふり方【よしくん2.0】at 2006年06月01日 02:57
昨日のエントリーに対して、Rubyfuristの弾さんが、CSSによるルビの実現(インライン・テーブルを使用)を紹介してくださってます。ありがとうございます。 さっそくにこれをコピーして、はてなのスタイルシートに張り付けてみたのですが、どうもうまくレンダリングされませ
[雑記/備忘]ルビ(ふりがな)タグの話 その2【檜山正幸のキマイラ飼育記】at 2006年05月31日 09:57
404 Blog Not Found:css - ルビもCSSで  いつも小説のルビで困っていた小説書きさんには朗報です! 小飼さん有難う。いつもアンテナで拝見させていただいてます。  時間が取れ次第、すぐにでも対応しよう。
[Web]か、か、か、感動した!!!!【真理の砂漠〜いちぎょうばかにっき】at 2006年05月31日 01:16
この記事へのコメント
<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 >decoracin terrazas</a>
Posted by Sandra-cj at 2007年08月14日 21:22
メモ
Posted by ba-m-bi at 2007年05月05日 10:03
残念ながら、Opera 8.54だと表示が崩れます。
ルビが大きく表示されすぎて、行間の隙間に隠れてしまうのです。
Operaはもともと貴blogの文字が他のブラウザの2倍程度の大きさに表示されるので、それが原因かも知れません。
Posted by no-name at 2006年05月31日 12:28
y-Akiさん、
上記のXULも元になっているのは
http://www.akatsukinishisu.net/itazuragaki/2001_10.html#ruby_for_Mozilla_3
のようです。
Dan the Rubyfurist
Posted by at 2006年05月31日 11:57
Firefoxには、ルビ対応の拡張がありますね。
http://piro.sakura.ne.jp/xul/_rubysupport.html

内部的にはCSSで実現しているのの拡張かな。
Posted by y-Aki at 2006年05月31日 07:28