2011/12/14

sim2ruby.cssの適用メモ 【諸々

[ ]
自分の備忘、兼、サイト持ちの方への役に立つか立たないか分からない記事です。

先日このブログで、「一角獣と乙女」にIE以外のブラウザで本文の上に振り仮名(ルビ)をつけるスタイルシート、「ほぼ全ての現行ブラウザで振り仮名(ルビ)を表示するsim2ruby.css」というものを導入すると書いたんですが、導入の際にクロスブラウザチェックをサボってました。(読みにくかった方、本当にごめんなさい。)

その後(ツイッターではぶつぶつ呟いてましたが)普段使わない自分のPCに入ってるIEを立ち上げてふと見たところ、ルビをつけた本文がページ右端で改行されず横スクロールが出ていました。ぎゃーっ!
仕方なくいったんsim2ruby.cssへのリンクを外したんですが、やっぱり今回の話は「一角獣(リコルヌ)」ではなく「一角獣リコルヌ」(対応するブラウザではいまルビがついているはず)にしたい!と思って、色々あたってみました。

結局IEで改行がきかないのはsim2ruby.cssの中にある「white-space: nowrap」が原因じゃないかと思われるものの、cssをいじるよりもIEは(もともとルビがつけられるので)sim2ruby.cssの適用から外すのが一番簡単だと分かりました。

最終的にヘッダ部分で
<link href="text.css" rel="stylesheet" type="text/css" />
<![if !IE ]>
<link href="sim2ruby.css" rel="stylesheet" type="text/css" />
<![endif]>
と指定することで、まず普段のスタイルシート(ここではtext.css)を読み込み、その後IE以外のブラウザではsim2ruby.cssを読み込むという形をとり、IEでは本文中の<ruby>タグを読み込んでルビを振り、IE以外のブラウザはsim2ruby.cssの指定に従ってルビを振るという方法が実現できたようです。

が、これもまだクロスブラウザチェックは終わってません(笑)とりいそぎメモだけアップし、後でまた結果を追記します。

(なんでこんな中途半端な記事をアップするかというと、このブログにsim2ruby.cssがちゃんと適用されるか確かめたかったからでした。)