freefielder.jp

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

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


現時点で、RUBYタグ周りの問題としては、 という点が挙げられるわけですな。

各ブラウザで実際にどんな表示になるかというのは、こちらのページの表の左列をご覧になってください。これを眺めてみると、とりあえず "素" の状態では、 という具合。

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

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

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

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

404 Blog Not Foundの記事や、その元ネタである徒書の記事で紹介されている方法 … 簡単に言うと
という方法はあまり上手くいきません。

これらの記事がちょっと古めのものだという事もあって、このスタイルシートは 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タグを可視にすることがどうやっても無理っぽいので、あの表示のままで我慢我慢。

ということで、ここまでのまとめ。

積み残している改善希望点は、

うん、ならば安直に、ここから先は JavaScript に頼ってしまいましょう。長くなったので、続きは次の記事で。

2014.12.17 追記
この記事は、情報が若干古くなっている箇所があります。以下の記事
　→ HTML5の最終勧告でrubyタグ周りはどうなった? - freefielder.jp
を併せてお読みいただければ、と。