2009年12月25日金曜日

ruby in HTML

ruby と言っても言語の方ではありません。HTML の ruby (ルビ)タグです。
そもそも ruby というタグが HTML のセマンティクス的に許されるかどうかというのは十分議論の余地があるとは思いますが、文字列に近接して付記すべき情報があるのも事実。
で、ここ12時間くらいどうすべきか迷ったことをメモ。

ruby タグの使い方

  1. ルビを振りたい部分を <rb> でマークアップ
  2. ルビとして表示したい文字列を上記 <rb> に隣接する <rt> 内に記述
  3. <rb> と <rt> を <ruby> でマークアップ
例えば
田んぼと<ruby><rb>案山子</rb><rt>かかし</rt></ruby>ののどかな風景

と書くと
田んぼと案山子かかしののどかな風景
となります。

ブラウザ互換性の問題

となります、と書きましたが、上記のサンプルは Internet Explorer もしくは Google Chrome 以外のブラウザではきちんと表示されなかったことと思います。というのは主要なブラウザのうち上記の2つ以外には ruby タグが実装されていないためです。そのため互換性を実現するにはそれなりの workaround が必要になります。
(正直なところそういう見苦しい HTML は書きたくないのですが、差し迫って必要なのだから仕方がない。ちなみに CSS 3 には ruby が含まれているようなのでそのうち他のブラウザでも利用できるようになるのでしょう。)

Firefox における ruby

この手の話はあらゆるブラウザに対応することを目指すときりがなくなるので、今回のサイトが研究室内の他のメンバーに見てもらうためのものであることを踏まえて Firefox できちんと表示できればそれでよしとすることにします。
手っ取り早い方法としては、そのためのアドオンを導入する手があります。しかしながら今回のサイトはどちらかというと周囲にお願いして見てもらうものであるので、できるだけ利用のためのハードルを低くしておくためにもユーザ側では作業をさせたくありません。なので CSS で対処したいと思います。
調べたところ、こちらのサイトに書かれている CSS がベストな解となりそうです。
簡単に言うと、ruby を inline-table、rb を table-row、rt を table-header-group とするというものです。
ただ、そのまま上記のタグの属性を変更すると、もともと ruby をきちんと表示できているブラウザにおいて表示が崩れるので、span に class を設定してクラスセレクタで CSS を設定するのがよさそうです。
先ほどの例をこの方法でマークアップすると以下のようになります。
<style>
#ruby{
display: inline-table;
vertical-align: bottom;
}
#rb{
display: table-row;
}
#rt{
display: table-header-group;
}
</style>
田んぼと
<span class="ruby">
<span class="rb">
案山子
</span>
<span class="rt">
かかし
</span>
</span>
ののどかな風景

そしてこれを表示するとこのようになります。
田んぼと案山子かかしののどかな風景

意図した通りになっているのではないでしょうか。
上記の場合、ルビのサイズを地の文よりも小さくするために rt の font-size を50%に、また周囲の語との垂直方向の位置会わせのために ruby の vertical-align を bottom に設定しています。
とりあえずこれだと Firefox 以外に Chrome、Safari でもきちんと表示できるようです。

さらなる問題

さて、ここまででルビを振ることはできた訳ですが、ちょっとした問題に遭遇しました。
<rb> 内に、間に空白を挟んだ複数の <span> を配置すると、空白が反映されません。
SPAN1 SPAN2RUBY

中身だけであれば
SPAN1 SPAN2

と、きちんと間に空白が表示されるので、おそらく table-row の中に直接 span を複数配置しているのが何らかの影響を与えているものと思われます。
これは、上記の複数の span を、さらに一つの span にまとめてやることで回避できます。
SPAN1 SPAN2RUBY
あまり詳しくないので確定的なことは言えないのですが、おそらく table-row の中には table-cell に相当する要素が必要だということなのではないかと推測しています。

以上、とても胸を張れないバッドノウハウでした。

0 件のコメント:

コメントを投稿