rubyタグ・ルビ表示を巡る問題を解消する。

縦書きJavaScript・h2v.js をルビ表示対応にしたときにいろいろ(はま)ったので、Webページで「ルビ」を使用する時の問題点・注意点などをメモメモ。

現状(げんじょう)、どのように HTML を書けば主要なブラウザで()(れい)にルビを表示できるのか探っていきましょう。今回は縦書きレイアウト関係なし。純粋にふつうの横書き時の話題です。

もう長ったらしい蘊蓄(うんちく)はいいから、Firefox でルビを表示する方法を早よ! という急勝(せっかち)な人は、こちら ruby_enabler.js をお試しください。

現時点で、RUBYタグ周りの問題としては、
  • Firefox / Opera では(現在のところ)機能しない。
  • HTML4(XHTML1.1)での書式と、HTML5での書式が異なる。HTML5 では rbタグ、rbcタグ、rtcタグ が廃止される予定です。
  • バグっぽい処理をするブラウザ(Safari 5)が存在する。
という点が挙げられるわけですな。

各ブラウザで実際にどんな表示になるかというのは、こちらのページの表の左列をご覧になってください。これを眺めてみると、とりあえず "素" の状態では、
  • Firefox / Opera ではルビっぽく表示されない。
  • IE 9 と Webkit系ブラウザでは、HTML4(XHTML1.1)での書式で、rbc / rtcタグを使用した場合にルビっぽくない。
  • Safari 5 から HTML4(XHTML1.1)書式・rbc / rtcタグ使用のルビを閲覧すると不体裁が起こる。
という具合。

さて、何とかしてみましょう。

「Firefoxにプラグインを入れてもらう」とか「ユーザスタイルシートを設定してもらう」とか、閲覧者側の手を煩わせる方法は無し、の方向で。

まずはスタイルシートで頑張ってみる。

…これはちょっとムリっぽい。すぐに限界が来てしまいます。

404 Blog Not Foundの記事や、その元ネタである徒書の記事で紹介されている方法 … 簡単に言うと
ruby 要素に display : inline-table; を指定して、さらに ruby 内要素をインラインテープル内要素として組み立てる。そして ruby 要素に指定した vertical-align で縦方向の表示位置を合わせる。
という方法はあまり上手くいきません。

これらの記事がちょっと古めのものだという事もあって、このスタイルシートは HTML5 での書式(rb,rbc,rtcなし)のルビには上手く効かない場合があります。

また、元々きちんとルビが表示されるブラウザに対してもスタイルが適用されてしまうので、予期しない表示乱れが生じる恐れもあります。

さらに、vertical-align による上下位置の調整。ruby の前後の文字列と、ruby要素との表示位置が上下にズレないようにしたいわけなのだけれど、これがブラウザの種類によって、どのくらいの値を指定すれば良いかが変わってきてしまうのだな。

つまり静的に、唯ひとつのスタイルシートで全てのブラウザ、全ての条件に対応するのはムリ。まあ CSS Hack を使ってごちゃごちゃすれば何とかなるのかもしれませんが、おそらくかなり難しい。

ということで、とりあえず「文章を読んでいる人に、HTML4書式であれ、HTML5書式であれ、最低限、ルビが本文とは異なる要素である、と認識してもらう」という事だけを考えてスタイルシートを考案するのであれば、こんな感じ。さきほどのサンプルページの左列、番号が赤丸で囲んである表示を何とかしよう、というわけです。

rbc+rtc~rt , rbc+rp+rtc~rt , 
rbc+rp , rtc~rt+rp , rtc+rp{
	font-size:100%;
	display:inline;
}

  • ruby要素(とその一味)を正しく解釈してくれる場合は、そのままルビ表示がされる。
  • ruby表示をしてくれない Firefox / Opera では、そのまま ルビ対象文字列(ルビの文字列) という具合に表示される。
  • WebKit系ブラウザで rbc, rtc を用いた形式のルビ(そのままでは不体裁な表示になる)を表示する場合には Firefox / Opera と同様なかたちで表示される。
  • Safari 5 の不具合(rtc要素の中にrt要素を置いてもそう認識されず、rtc要素とrt要素が並列しているように処理される)を解消して Firefox / Opera と同様なかたちで表示する。
IE 9 に関しては、rpタグを可視にすることがどうやっても無理っぽいので、あの表示のままで我慢我慢。

ということで、ここまでのまとめ
  • Firefox / Opera 以外のブラウザでは、HTML5形式(rb,rbc,rtcタグなし)で記述しておけば、特に何もしなくても良い感じでルビが表示される。
  • HTML4形式で記述されたものでも、上記のスタイルを定義しておけば「しないよりマシ」な程度に表示を改善できる。

積み残している改善希望点は、
  • Firefox / Opera でも綺麗にルビを表示したい。
  • HTML4 / HTML5 の記述の違いに関わらず、きちんとルビを表示したい。

うん、ならば安直に、ここから先は JavaScript に頼ってしまいましょう。長くなったので、続きは次の記事で。
2014.12.17 追記
この記事は、情報が若干古くなっている箇所があります。以下の記事
 → HTML5の最終勧告でrubyタグ周りはどうなった? - freefielder.jp
を併せてお読みいただければ、と。

カテゴリ: