1. トップページ
  2. 松下響の天輪返し

松下響の天輪返し

ほぼ全ての現行ブラウザで振り仮名(ルビ)を表示するsim2ruby.css

徹夜でしょうか早起きでしょうか、兎に角おはようございます、松下です。
Internet Explorer 9の日本語版が公開されましたので、これに合わせまして本日は2回目のweb制作系の話題です。今回は標題にあります通り、ほぼ全ての現行ユーザー環境ブラウザで振り仮名(ルビ)を表示するsim2ruby.cssについて触れてみたいと思います。
これは私、松下が作ったわけではなく、うちの作者が3年ほど前に作ったものですが、本日Internet Explorer 9での動作確認が取れましたので、折角だから改めて紹介してみようという運びになりました。

ブラウザのルビ対応状況、問題とその解決原理

ルビタグの対応ブラウザを確認しますと、まずInternet Explorer 5以降、Google Chrome 4以降、Safari 5以降では、本文の上にルビを振る「単純ルビ」の表示に対応しています。
また、FirefoxでXHTMLルビサポートというアドオンを入れると、単純ルビのみならず、本文の上下にルビを付ける「複雑ルビ」まで表示することができるようになります。このアドオンはFirefox 0.8~Firefox 3.7に対応しており、Firefox 4用のものは現時点では発表されていません。

複雑ルビについては、現在のところ対応環境が狭いのと、そもそも使い道があまりないという理由から、無理して対応しなくてもそれほど問題は無いと言えます。
つまり現状での問題は、極端に古い、もしくは小数派のブラウザを除けば「XHTMLルビサポートが入っていないFirefox(特に4)」と「Opera」を使用してるユーザーにルビ組み状態で見せられないことです。

ではどうするか、ということで、ルビタグをCSSのinline-tableを使ってルビ状に成型し、幾つかのCSS hackも併せてどのブラウザでも同じように表示させるのがsim2ruby.css(シム・トゥ・ルビー・シーエスエス) = a cascading style sheet to simulate simple rubyというわけです。

ユーザビリティ向上のための補助機能

そもそもルビというのは本文の上に小さな文字で表示されますので、そのままでは読みづらいという本質的問題を抱えています。
そこで、マウスカーソルでポイントするとルビを拡大、更にルビ適用範囲を点線で囲んで表示するという補助機能を付与してみました。これでいくらか読みやすくなったのではないでしょうか。
実例表示(サンプル)

使用方法

  1. sim2ruby.cssをダウンロードして保存します。
  2. 設置するページで最後のCSSとして読み込ませます。
  3. ページ中に普通の書式でルビタグを記述します。
    <ruby><rb>本文</rb><rp>(</rp><rt>フリガナ</rt><rp>)</rp></ruby>
    ※HTML5ではrbタグが無かったことになっておりますが、これが無いとCSSで成型できませんので、従来通りrbタグを入れる必要があります。逆に言うと、既に上記の従来書式で内容を記述してある場合、ページの内容は全くいじらなくて済みます。

以上です。
普段から文中で振り仮名(ルビ)を多用するような方は、この際導入してみてはいかがでしょうか。

CSSが分かる人は、転送容量削減のために説明文を削ったり、或いは他のCSSファイルに必要な部分だけコピペして使ったり、拡大時の点線の色を変えたりして使いやすいようにカスタマイズすればよいと思います。

動作確認済みブラウザ

Windows
△Internet Explorer 6 (※ユーザビリティ向上機能無効)
○Internet Explorer 7
○Internet Explorer 8
○Internet Explorer 9
○Firefox 2.0
○Firefox 3.5
○Firefox 3.6
○Firefox 4.0
○Safari 3.2
○Safari 5.0
○Google Chrome 1.0
×Google Chrome 4.0 (※このver.でのみ文字が消えます)
○Google Chrome 10.0
○Opera 9.6
○Opera 11.1
Mac
○Firefox 2.0
○Firefox 3.6
○Firefox 4.0
○Safari 1.3
○Safari 5.0
Wii
○Opera 9.30

表示誤差

出来る限り表示誤差を吸収していますが、それでもブラウザによって上下1~2px程度の表示位置誤差があることが確認されています。

メイリオフォント非対応

サイトのCSSで基本フォントにメイリオを使用するように指定していると、ブラウザによってルビつきテキスト部分が上方向に0.2em~0.8em程度ずれて表示されることがあります。
sim2ruby側でこのずれを補正しようとすると、今度はメイリオがインストールされていないユーザ環境でMS Pゴシックなどの代理表示になった場合に逆に下方向にずれてしまうため、現在のところメイリオフォントを使用してなおかつルビ表示を全環境でそろえる方法はありません。
メイリオ以外のフォントを指定している場合は、気にする必要はありません。

紹介記事

現在以下のページでご紹介いただいております。

初回発表時の記事は以下のものです。

余談

以上の話題とほぼ全く関係ないのですが、MicrosoftのIE9配布ページのブラウザ比較表、ひどくないですか? Firefoxって、ベース機能はシンプルにして必要なアドオンだけ入れて使えるのが売りなのに、ベース機能だけ比較して機能が足りないダメブラウザ扱いですよ。あまつさえ、そのベース機能でも本来あるはずの機能にチェックが入ってないという体たらく。ちょっとせこくないですかMicrosoftさん。

カテゴリー: web制作 | タグ: , | 1件のコメント

ほぼ全ての現行ブラウザで振り仮名(ルビ)を表示するsim2ruby.css への1件のフィードバック

コメントを残す

最近の投稿

松下 on twitter

サイト更新履歴

情報を取得するにはjavascriptを有効にしてください。