ルビ表示改善 JavaScript : ruby_enabler.js

Internet Explorer 8,9 / Firefox / Chrome / Safari / Opera などの主要(しゅよう)なブラウザで、まずまず適切(てきせつ)なルビ表示(ひょうじ)を実現(じつげん)する JavaScript + CSS です。

さてさて、<ruby> タグ、<rb> タグ 、<rt> タグ、<rbc> タグ 、<rtc> タグ、 <rp> タグを使用して、ウェブページ上でルビを表示することが可能 … とされていますが、実際には、これらのタグには、

• Firefox / Opera では（現在のところ）機能しない。
• HTML4(XHTML1.1)での書式と、HTML5での書式が異なる。HTML5 では rbタグ、rbcタグ、rtcタグ が廃止される予定です。
• バグっぽい処理をするブラウザ（Safari 5）が存在する。

…という問題があります。（各ブラウザでの表示のされ方はこちらのページで確認できます。また、RUBYタグたちの抱えている問題について、詳しくはこちらのブログ記事を参照してみてください）

とりあえず Firefox / Opera 以外のブラウザでは、HTML5 の書式（rb, rbc, rtc タグを使用しない書き方）でルビを記述すれば何とか思った通りのルビ表示が可能ですが、これらのタグを使用して記述された過去の文書が大量に存在したりすると直すのは大変。

また、Firefox ユーザに「ルビを綺麗に表示させたかったらプラグインをインストールするか、ユーザスタイルシートを設定してね」などとお願いするのもどうなのさ。閲覧者側に手間をかけてもらうのではなく、ページ作成者側でルビに対処できるのならば、絶対にそのほうが良いでしょ？

ということで、ruby_enabler 。

• Firefox / Opera でルビ(るび)表示(ひょうじ)を実現する。
• もちろん、その他(た)のブラウザでも綺麗にルビを表示する。
• JavaScript がオフの状態での閲覧えつらんに対してはスタイルシートのみを利用して、最低限「ルビが本文とは異なる要素である」ということが読み手に理解できるような表示をし、

…という働きをします。詳しくはこちらのブログ記事を参照してください。

• ruby_enabler 導入前後で、ルビの表示がどのように変わるかを確認したい時は比較サンプルページをご覧ください。
• あなたが今お使いのブラウザでルビがどのように表示されるかをチェックしたい時は ruby_enablerなし / ruby_enablerあり の各ページを開いてみてください。

・ダウンロードページをご覧ください。

• Opera での表示の際、ページに指定されているフォントの種類・フォントサイズ・lang属性などによって、ルビ対象の文字(列)が1〜2ピクセルほど上下にズレる場合があります。これはちょっとどうしようもないのでご容赦ください。


• ruby_enabler.js と 縦書き変換JavaScript h2v.js は併用できません。
  
• ver 2.3以降の h2v.js には、ruby_enabler と同等の機能が含まれています。ただし、
  • ruby_enabler はページ全体の ruby タグを適切に処理する。
  • h2v.js は、縦書きに指定したエリア内の ruby タグのみを処理する。
という動作の違いがあります。
ご了承ください。