【HTMLルビ】両面ルビ表示を実現するJavaScript、出来ました。

ウェブページでどうしてもルビを使いたい / 両面ルビを表示させたい / 最新のHTML5勧告に基づく書式でルビをコーディングしたい…というコンテンツ制作者さんたち、こちらのスクリプトを試してみてください。

例えば、こんな感じでルビを表示できます。

ruby20150207.png

更なる動作サンプルをご覧になりたいときや動作環境などを確認したい場合は、上記ページを参照してください。

さて。

ほんとうは1月中にやっつけてやろう、と思っていて、まあまあ順調に作業も進んでいたのです。作業の大詰めで、ちょっと古めのバージョンのブラウザで動作チェックをしてみたらこれが全然うまく動かない。どうやら以前の記事で書いたような、

  • HTML5で勧告された「文脈上、明らかな場合には終了タグを省略できる」という規則に基づいてコーディングすると、ブラウザによっては、それが適切なHTMLと解釈されない。

…という現象が、FirefoxやChromeの最新版以外の多くのブラウザで発現するのです。

で、これを直すのに時間を費やしたのがひとつ。

更に、

  • ルビを振った文字列が、行に対して上下にズレて表示されてしまう。

…という問題の解消に手こずった、というのがひとつ。

ruby_enabler2.js では、rubyタグを inline-table として、ruby内部の rb, rt, rtcタグ等を適切に組み立て表示する…という作業をしています。

それならば、ruby要素に適切な vertical-align スタイルを設定してやれば済む話じゃん…と思うかもしれませんが、事はそう単純ではなくて、素直に vertical-align を設定してやろうとしても、

  • フォントサイズ
  • フォントの種類
  • 行の高さ（line-height）の値
  • ブラウザの種類

…という様々な要素が絡んできて一筋縄では行かないのです。パラメータが多すぎて、場合分けで対処するのも難しい。

そんなわけで ruby_enabler2.js では、JavaScript を使って超強引に、しかも絶対にズレないように vertical-align の値を計算する、という方法を採用しました（具体的な方法は、こちら）。この方法を思いつくのに数日を費やしたのですな。

そう言えば何処かで「作業が8〜9割終わったと感じたら、そこがやっと半分だ」みたいな格言的なものをみた気がするのだけれど、正にそのとおりだったのだな。

さて、「絶対にズレない」とか大口を叩いてはみたものの、多分こちらで気づいていない不具合が残っていると思います。ご報告、お待ちしておりますので。

カテゴリ:

タグ: