Firefoxのルビ用フォントはfont-familyで上書きできない

きっかけは次のWikipediaの記事をFirefoxで見たときのことで、私の環境だと画像の赤線部ような感じになると。

Mozilla Foundation - Wikipedia
https://ja.wikipedia.org/wiki/Mozilla_Foundation


この記事のタイトルからお察しの通り、当該Wikipediaの記事はruby要素を用いて記述されている。HTMLはこんな感じ。

<ruby>
  <rb><span lang="en"><a href="/wiki/Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a></span></rb>
  <rt style="display:inline; font-size:inherit">(モジラ・ファイアーフォックス)</rt>
</ruby>


rt要素をただのインラインボックスにして、フォントサイズも継承させているのがミソ。言い換えると、font-familyについて何も指定していないにも関わらず、なぜかFirefoxだとフォントが変化しているように見える(そして、IEChromeだと見た目でおかしなことは起こらない)。
なぜなのか。FirefoxUAスタイルシートresource://gre-resources/html.css*1の792行目以降にルビに関するスタイルが記述されているが、そこにはこうある。

@supports (display: ruby) {
...
  rt {
    display: ruby-text;
  }
...
  rtc, rt {
    white-space: nowrap;
    font-size: 50%;
    line-height: 1;
    font-variant-east-asian: ruby;
  }
...
}


どうやら、font-variant-east-asianプロパティーに原因があるらしい。見慣れないプロパティーではあるけれども、 これはCSS Font Module Level 3に規定されたもので、日本語訳6.10. 東アジア圏のテキストの描画: font-variant-east-asian プロパティあたりに記載されている。仕様によれば、このプロパティー値はOpenTypeのルビ用のグリフを呼び出すとのこと(なので、どのフォントかを指定するfont-familyプロパティーとはそもそも別領域ということになる)。地の文と同じフォントを選択させるにはfont-variant-east-asian: normal;と明示的にルビテキストに対して指定すればよいけれども、単に親からフォントに関するプロパティーを継承すればよいのだから、

<ruby>
  <rb><span lang="en"><a href="/wiki/Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a></span></rb>
  <rt style="display:inline; font:inherit">(モジラ・ファイアーフォックス)</rt>
</ruby>


とするのが分かりやすいか。個人的には略式(shorthand)プロパティー*2の意外な使いどころという感じがした……という小ネタでした。

*1:Firefox 4 のデフォルト CSS · terkel.jp http://terkel.jp/archives/2011/04/firefox-4-default-css/ に助けられた

*2:余談だけど、fontプロパティーの取る値はCSS 2.1 http://momdo.github.io/css2/fonts.html#font-shorthand とCSS3 http://www.hcn.zaq.ne.jp/___/WEB/css-fonts-ja.html#font-prop で異なる