<< 前へ Delusion Storage へ戻る 次へ >>

2003/12/26(金)

栗田勇午、2ヶ月連続登場!! それにしても「じゃあ彼氏に会わせて」「からかってるの?」「じゃあ、セックスして見せて」って……うぅむ。まあ、こういうシチュエーションというか、アイディアというか……割と誰でも思いつくよな、とか言ってみる。いや、あの、私もけっこうコメントに困ったんですけど。

「看護婦と犬」……(ぼそ)

自分のほうが先行したっぽいので、実はニヤリとしている ZooM-A(小説・妄想担当)。

ルビ表示のその後。

ええと、まず前回挙げた暁に死すというサイトでは、他にもMozilla でルビ表示3というページがあって、そちらではまた違った手法(と言ってもスタイルシートを使うことは同じだが)でルビ表示を行うというのをやっていた(あるのは知ってたけど、ちゃんと読んでませんでした。とほほ……)。「3」のほうではどこが違っているかというと、ルビ表示のために display:inline-table; を使うということのようだ。

わたしは display:inline-table; という指定は使ったことがなかったのだが、ものは試しと思ってやってみたところ、けっこうちゃんとルビ表示されている。んでは、ということで <ruby> を <span class="ruby"> などに変え、Opera でも表示できるように……うむぅ、イマイチ。

Internet Explorer の場合、inline-table には未対応なようで、そもそもルビ表示出来ていない。これがまず致命的だ。さらに Opera の場合、びみょーに変な問題があることが発覚した。ルビの表示位置(高さ)がおかしい。

前回の実験では気づかなかったのだが、Opera の場合、line-height の値によってルビが表示される高さが変わってしまうようだ。たとえば下の例のように blockquote で line-height:250%; などと指定すると、表示位置がずれまくる。(注:下の例では、実際には <span class="xruby"> というクラス名になっている。rb や rt なども同様に xrb、xrt としてある。俺様流と区別するため)

<ruby> を <span class="ruby"> で置き換えると、こんな感じなんかイマイチになる。(この blockquote が line-height:250%; に設定されている場合)

この現象は display:inline-table; などの指定とは無関係のようで、実際、前回のように position を使った場合でも、line-height を変更するとずれるようだ。ようはレンダリングするボックス(という言い方で良いんだっけ?)の位置が、他のブラウザとは違う方式で計算されているんじゃないかと思うのだが。よーわからんけど、Mozilla や I.E. が vertical-align:bottom; で計算しているところを、Opera は vertical-align:text-bottom; かなんかで計算しているような……いや、height の計算の仕方自体、違っているかもしれん。よく分からん(^_^;。

まあいずれにせよ、Internet Explorer で表示できないのでは話にならないから、とりあえずは position を使う方向で行くことにしよう。その場合でもルビの高さの問題は発生するが、それはそれで個別解決することにする。で、position を使うとルビ文字のセンタリングとかが困るが……ええい、毒を食らわば皿までじゃ!! んもう全部、俺様流でやってやるぅ!!

いまは犬原見というなむに、むかしむすめありけり。年の頃とて貧しかりけるが、いずれにかえにしあらんとて、父母ちちははとともにりたり。

ソース見れば分かるが、ルビ文字のところで「<span class="rt" style="width:2.4em">むすめ</span>」などとやっている。その場、その場で、幅指定しているわけだ。でもってその幅の内部でセンタリング。泥縄もいいところで美しさのカケラも無いが、どうせ <span> 使いまくりでソースなんか見れたもんじゃ無いから、気にしてはいけない。

さて、上の例では <blockquote > の行高は line-height:175%; だったが、もしこれが 250% などになったら、どうなるか。

いまは犬原見というなむに、むかしむすめありけり。年の頃とて貧しかりけるが、いずれにかえにしあらんとて、父母ちちははとともにりたり。

Mozilla と I.E. の場合は、単に行間が広くなるだけで、それ以外の違いは無い。しかし Opera(バージョン 7.20 を使用)の場合、ルビ文字が浮き上がってしまう。これはちょっと見苦しいので、何とかしたいところだ。というか、250% だから浮き上がって見えるけれど、逆に 125% とか狭くなると、ルビ文字がめり込んでくるという……解決必須。

いまは犬原見というなむに、むかしむすめありけり。年の頃とて貧しかりけるが、いずれにかえにしあらんとて、父母ちちははとともにりたり。

<span class="ruby"> のほうで padding-top を指定すると、なぜか Mozilla と I.E. ではルビ文字が浮き上がってくる(Opera 7.20 では変化無し)。これを利用して Opera と同じくらいまでルビ文字を引き上げ、その上で top を指定してやることで表示位置を調整する。泥縄もここまで行ってしまうと、もう好きにしろと言いたくなる。

いずれにせよ、I.E./Mozilla/Opera の3種で同じようにルビを表示させようとすると、今の私ではこういう、泥縄で、ソースが汚くて、見るのも書くのも勘弁してくれと言いたくなるような方法しか思いつかない。つーか、こんな書き方してたら、メンテなんか出来ないじゃないか。

せめてソースをもう少し見やすくしたいところだが、そうなると <span> ではなく他のタグを使うとか、あるいは <sup> か何かを使い回すということになりそうだ。うーん、span.ruby > sup { } ……とか?

12月24日の例として使った「調教し つける」は、「調教しつける」が正しいのではないかというツッコミを頂いた。自分の脳内から。

名詞として使う場合を考慮すると、たしかに後者のほうが良い。実際に使うとき(そんな時なんて来るのか?)には、“しつけ”でルビを振ることにしよう。


<< 前へ Delusion Storage へ戻る 次へ >>