CSSでruby要素に対応させる場合の、Firefoxと旧Opera用の最低限の記述

追記

• Firefox 38より、ruby要素に対応するかも知れません。
  Firefox 38でルビ機能が有効化へ - Mozilla Flux

概要

三日前、以下の投稿をしました。

HTML - CSSだけでFirefoxや旧Operaでruby要素(タグ)を有効にする - Qiita

この投稿で、私はsim2ruby.cssを紹介し、CSSだけでruby要素に対応する方法の一例を示しました。
しかしこのsim2ruby.css、メイリオフォントに対応していません。

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

sim2ruby.cssでは、表示誤差を修正するため様々なプロパティが指定されています。
その中に、単位付きの数値で微調整を行っているものがあり、その影響でサイトで設定したフォントによってはうまくいかない場合があります。
font-sizeやline-heightも上書きされており、サイト制作者の意図した文字サイズや行間にならない場合も存在します。

私のサイトではメイリオフォントを利用しており、sim2ruby.cssが利用できないため、自前でruby要素に対応するためのCSSを書きました。
CSSだけで対応するのは無理があると判断し、JavaScriptも併用しています。

本投稿では、私がruby要素に対応しながらメイリオフォントを利用するために作ったCSSを書く上で得た、Firefoxと旧Opera用の最低限の記述について記載します。
JavaScriptを合わせて動作させる事を前提としているため、対応ブラウザ用の記述については記載しません。
ruby要素に対応している旧IE用の指定とか邪魔でしかないですし…

注意

HTML5ではrb要素が不要ですが、これが無いとルビに対応できません。
仕様に従いrb要素を使わない場合、以下のCSSセレクタのrbを変更してください。

…ただし、rb要素でないと、FirefoxのHTML Ruby 6.22.3で滅茶苦茶になります。

ruby要素非対応ブラウザのためのCSS

Firefox

ruby,
ruby rb,
ruby rt {
    text-align: center;
}

ruby {
    display: inline-table;
    vertical-align: bottom;
}

    ruby rb {
        display: table-row-group;
    }

    ruby rt {
        display: table-header-group;
        font-size: 50%;
    }

    ruby rp {
        display: none;
    }

これでいいの?
という程に簡単ですが、これでいいのだ。

旧Opera(Opera 15未満)

ruby,
ruby rb,
ruby rt {
    text-align: center;
}

ruby {
    display: inline-table;
    vertical-align: baseline;
    -o-table-baseline: 2;
}

    ruby rb {
        display: table-row-group;
    }

    ruby rt {
        display: table-header-group;
        font-size: 50%;
    }

    ruby rp {
        display: none;
    }

Firefoxと違うのは、ruby要素用の記述だけです。
-o-table-baselineという見慣れないプロパティが存在しますが、私もよく分かりません。
Opera版のHTML Rubyでこのようになっており、試したら上手くいっただけです。

注意点として、ruby要素のvertical-alignプロパティは初期値でなければなりません。
vertical-alignプロパティの値にbaseline以外が指定されている場合、上下方向にずれます。

その他

その他のブラウザでは、場合によってvertical-align: bottomの指定通りに配置されず、上下方向のズレが発生する可能性があります。
(手持ちブラウザでは、Opera以外でこの現象は発生していません。)

その場合、vertical-alignプロパティに数値で値を指定する必要があるため、JavaScriptに頼る事になります。

Firefox & 旧Opera 両対応のCSS(@supports利用)

CSSの@supportsルールを利用することで、Firefoxと旧Operaに両対応したruby要素対応用のCSSが書けます。

ruby,
ruby rb,
ruby rt {
    text-align: center;
}

ruby {
    display: inline-table;
    vertical-align: bottom;
}

    ruby rb {
        display: table-row-group;
    }

    ruby rt {
        display: table-header-group;
        font-size: 50%;
    }

    ruby rp {
        display: none;
    }

@supports ( -o-table-baseline: 2 ) {
    ruby {
        vertical-align: baseline;
        -o-table-baseline: 2;
    }
}

@supportsルールで-o-table-baseline: 2に対応しているか判定し、対応している場合、旧Opera用の記述に上書きしています。

ただし、@supportsルールはOpera 12.1からサポートされているため、それより古いOperaでは利用できません。
ニンテンドーDSブラウザーやニンテンドーDSiブラウザー、Wiiのインターネットチャンネルには対応できません。

この箇所は、JavaScriptで判定するのが一番でしょう。
以下は、JavaScriptで-o-table-baselineプロパティに対応しているか判定し、対応している場合にhtml要素にno-ruby-operaクラスを追加するコードです。

var html = document.documentElement;
if ('OTableBaseline' in html.style) {
    html.className += ' no-ruby-opera';
}

classListが使えるならこれもあり

var html = document.documentElement;
if ('OTableBaseline' in html.style) {
    html.classList.add('no-ruby-opera');
}