この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

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

2015年8月25日

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: (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では、バージョンごとに以下のフォントを利用されるようになりました。

日本語版WindowsのデフォルトUIフォント一覧
WindowsデフォルトUIフォント
Windows XPMS UI Gothic
Windows Vistaメイリオ
Windows 7
Windows 8Meiryo UI
Windows 8.1
Windows 10Yu Gothic UI

このうち、メイリオのみ、フォント情報が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以降のレンダリング結果)

スクリーンショット:
上記例のスクリーンショット(Windows 10)

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

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

関連するかもしれないエントリ

bug-org 1194055を含むエントリ

Bug-org 1194055 Size of <input> elements has changed in Firefox 40