freefielder.jp

【2015.02.07 追記】
　この記事は大変古くなっています。
　新しい情報を → こちら・ruby_enabler2.js でチェックできます。

[2015.01.25 追記]
Firefoxにルビの表示をさせたい! という人は、以下の記事
　→ Firefoxでルビ表示を実現するJavaScriptブックマークレット。
…をご覧ください。

前回の記事で積み残された改善希望点、 を、JavaScript を使って解決してみます。

順序が逆になるけれど、まずふたつめの問題。

表示サンプルページを見ていただければ判るように、Firefox / Opera 以外のブラウザでは、HTML5形式の記述（rb,rbc,rtc要素なし）であれば、思ったようなルビ表示が実現できますね。

ということで、
という処理でよかろう。

次にひとつめの問題。こちらは
という感じで上手くいくのではなかろうか。

適用するスタイル、というのは前の記事でも引用させていただいた、
という方法をアレンジしてみます。（前の記事で「この方法は上手くない」と書きましたが、スタイル適用対象を Firefox / Opera に限定して、ソースが必ずHTML4形式で記述されているとするならば、現在でもかなり有用です）

できたのが、これ → ルビ表示改善 JavaScript : ruby_enabler.js

どんな動作をするかというと、 ページにアクセスして来た人が「JavaScript 無効」の場合はスタイルシートのみによって「何も対策しないよりマシ」な表示をし、「JavaScript 有効」の場合には、使用しているブラウザごとに、ほぼマトモなルビ表示を実現します。

Firefox に適用するスタイルは、

ruby{
  display:inline-table;
  text-align:center !important;
  text-indent:0 !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:bottom;
}

ruby>rb,ruby>rbc{
  display:table-row-group !important;
}

ruby>rt,ruby>rtc{
  display:table-header-group !important;
  font-size:8px;
  line-height:1em !important;
  letter-spacing:0 !important;
  font-weight:normal !important;
  font-style:normal !important;
}

rbc>rb{
  display:table-cell !important;
}

と、こんな感じ。これで、表示フォントの種類やサイズ、line-height の値や lang属性の値に関わらず、ルビとその前後の文字との上下位置がピッタリ合います。ただし「Firefox からの閲覧で、ruby の書式が HTML4 / XHTML1.1 形式（rb,rbc,rtcタグあり）」の場合のみ。これをこのままスタイルシートに書いてしまうと、他のブラウザで予期しない不体裁が起こることがあります。


で、これだけだと、line-height の値によっては、ルビ対象文字列とルビとが無茶苦茶離れて表示されてしまうので、ruby_enabler.js では、個々の rt / rtc タグ に対して、

-moz-transform:translate(0,y); 
   /* yは個々の rt / rtc について計算される */

というスタイルを適用して、ルビ対象文字列との距離を調整しています。

わはは。強引。

さらに、上のスタイルだと Opera で見た時にルビの上下位置が周りの文字と全く合わないので、Opera からの閲覧時には以下のスタイルを追加。

ruby{vertical-align:0.9em;}
ruby,ruby>rb,ruby>rbc,rbc>rb{line-height:1em !important;}

こちらはフォントの種類やサイズ、それに表示する時の値の丸め誤差などなどによって、若干ズレてしまう場合がありますが、まぁよかろう。

そんなわけで、Firefox たちが ruby に対応するまでの暫定措置として、ruby_enabler.js をお試しいただければと。

→ ルビ表示改善 JavaScript : ruby_enabler.js