もずはっく日記(2015年8月)

Bug-org 1194055 Size of <input> elements has changed in Firefox 40 #2
初回投稿日時: 2015年08月25日13時13分22秒
カテゴリ: CSS HTML IME Mozilla Core Mozilla40 Mozilla41 Mozilla42 Mozilla43 バグ修正
SNS: Tweet (list)

Firefox 40をWindows 7やWindows Vistaで利用していると、Firefox 39までに比べて、CSSで幅指定を行っていない<input>要素の幅が倍ぐらいになって、レイアウトが崩れてしまうという例のバグの続報です。

既に先週からmozilla-central (43)、Aurora (Developers Edition, 42)、Beta (41)では修正パッチが投入されていましたが、ようやく、今週リリース予定のFirefox 40.0.3向けにもパッチが投入されました。

ここでは、どのように修正されたのかを解説しておきます。

まずおさらいですが、Firefox 39までは、GetStockObject(DEFAULT_GUI_FONT) APIを利用して、システムのUIフォントを取得していました。日本語版のWindowsでは通常、Windows Vista以降でもレガシーなMS UI Gothicになります。

しかし、欧米では一部、レガシーなフォントのままでは表示がうまくいかないケースがあるので、SystemParametersInfoW(SPI_GETNONCLIENTMETRICS)を利用して、本当のUIフォントを取得するようになりました。その結果、日本語版Windowsでは、バージョンごとに以下のフォントを利用されるようになりました。

このうち、メイリオのみ、フォント情報がMS UI Gothicのものと大きく違っていたため、互換性が著しく低くなってしまっていたのが今回の問題の修正すべきポイントだったわけです。

今回の修正では、Windows 2000で導入された、MS Shell Dlg 2疑似フォントを<input type="text">等と、<select>で利用するように修正されています。この疑似フォントは、国際化されたアプリでダイアログを表示する際等に適切なフォントとして定義されています。また、Windows 2000やXPと互換性を持ったアプリにはこのフォントを利用するように書かれています。

MS Shell Dlg 2疑似フォントは、Tahomaにマッピングされており(レジストリのHKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes)、TahomaはFontLinkによって、日本語の文字のレンダリングには、MS UI Gothicを最初に参照するようになっています(HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLink参照)。

これにより、Firefox 40.0.3以降では、<input>要素ではTahomaを基準にsize属性のレンダリング結果が決まるようになります。つまり、従来と同じMS UI Gothicには戻りません。このため、若干のレンダリング結果の差は今後も発生します。

例:

MS UI Gothic (Firefox 39までのレンダリング結果)

Tahoma (Firefox 40.0.3以降のレンダリング結果)

スクリーンショット:

この結果から分かるように若干、MS UI GothicよりもTahomaは広いです。ただし、その差は約1.05倍です。約2倍になっていたメイリオ等からするとわずかな差異となっています。

余談ですが、日本人にとっては下線位置も気になるところです。Tahoma経由でMS UI Gothicを表示するようになるので、下線の位置は1px、従来よりも文字に近づきます。このため、人によっては若干、IMEで入力中の文字列が見づらいと感じるかもしれません。