【HTMLルビ】両面ルビ表示を実現する。中間発表。

【2015.02.07 追記】
　ruby_enabler2.js、完成版が出来ました。→ こちらでどうぞ。

以前に書いた記事のコメント欄で『HTML5の両面ルビを実現すべく何かしらやってみる』と書きました。

『両面ルビ』とは、ベース文字列の上と下の両方にルビを付ける形式のことで、例えば… dsruby02.png …こういう感じ。

で、まだ作成途中なのだけれど、Firefoxと、Chrome・Safari・OperaなどのWebKit/Blink系ブラウザでは何となく形になってきたので中間発表です。ご覧あれ。

今のところは「とりあえず動く」という段階で、JavaScriptやCSSのチューニングなど、細かい部分は全く練られていないのでご留意ください。

Internet Explorerは相変わらず色々問題があるので後回し。後回しの理由については後述します。

さて。

先のテストページでは、JavaScriptを用いて…

  1. ページ内にある ruby タグを検出。
  2. 各々のrubyについて、形式が両面ルビであるかどうかを判断。
  3. 両面ルビであれば、それは現行のブラウザでは適切にレンダリングすることができないので、CSSを適用して、あたかも両面ルビであるかのように表示させる。

という処理を行っています。

具体的には、両面ルビであるrubyタグにスタイル・display:inline-table を適用して、中身をインラインテーブルとして再構築するわけですね。

例えば、
<ruby>新<rt>あら</rt>垣<rt>がき</rt>結<rt>ゆ</rt>衣<rt>い<rtc><rt>ガ<rt>ッ<rt>キ<rt>ー</ruby>
…を、スタイルを適用しやすいように
<ruby>
<rbc><rb>新</rb><rb>垣</rb><rb>結</rb><rb>衣</rb></rbc>
<rtc><rt>あら</rt><rt>がき</rt><rt>ゆ</rt><rt>い</rt></rtc>
<rtc><rt>ガ</rt><rt>ッ</rt><rt>キ</rt><rt>ー</rt></rtc>
</ruby>
…のような形に変換して、以下のようなスタイルを適用するわけです。
ruby{ display:inline-table; line-height:1em; }
ruby>rbc{ display:table-row-group }
ruby>rtc:nth-of-type(1){ display:table-header-group; font-size:50%; line-height:1em; }
ruby>rtc:nth-of-type(2){ display:table-footer-group; font-size:50%; line-height:1em; }
ruby>rbc>rb{ display:table-cell; }
ruby>rtc>rt{ display:table-cell; }
実際には vertical-align を調整したり、もう少し複雑なことをしています。

さて時間が無くなってしまった。

問題となっている Internet Explorer の挙動についてはまたいずれ。 → こちらの記事を参照してください。

カテゴリ:

タグ: