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


[sim2ruby.css]:http://h2s.roheisen.net/blog/archives/871.html
[@supportsルール]:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

## 追記

* <ins>Firefox 38より、ruby要素に対応するかも知れません。</ins>  
  [Firefox 38でルビ機能が有効化へ - Mozilla Flux](http://rockridge.hatenablog.com/entry/2015/02/22/003049)

## 概要

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

[HTML - CSSだけでFirefoxや旧Operaでruby要素(タグ)を有効にする - Qiita](http://qiita.com/sounisi5011/items/6020279024b72add8403)

この投稿で、私は[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](https://addons.mozilla.org/ja/firefox/addon/html-ruby/)で滅茶苦茶になります。

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

### Firefox

```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;
    }
```

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

### 旧Opera(Opera 15未満)

```css
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](https://addons.opera.com/ja/extensions/details/html-ruby/?display=en)でこのようになっており、試したら上手くいっただけです。

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

### その他

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

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

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

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

```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`クラスを追加するコードです。

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

```js:classListが使えるならこれもあり
var html = document.documentElement;
if ('OTableBaseline' in html.style) {
    html.classList.add('no-ruby-opera');
}
```