きっかけは次のWikipediaの記事をFirefoxで見たときのことで、私の環境だと画像の赤線部ような感じになると。
この記事のタイトルからお察しの通り、当該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だとフォントが変化しているように見える(そして、IEやChromeだと見た目でおかしなことは起こらない)。
なぜなのか。FirefoxのUAスタイルシート(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 で異なる