ブラウザのヒンティングテスト
letter-spacing: 0.1em を指定した時のブラウザでのフォントヒンティング品質テスト。
適切にヒンティングが行われているなら、上から下へ綺麗に文字間が等間隔で少しずつ拡大していくはず。
ＭＳ Ｐゴシックやメイリオがない環境では sans-serif です。
以下は実際にそれぞれの環境で表示させてみたスクリーンショット。
理想的な出力が行えていると思えるものに関しては先頭に * を付けてある。
Windows7 Home Premium 64bit:
*IE9(ブラウザーモード: IE9)
IE9(ブラウザーモード: IE8)
IE9(ブラウザーモード: IE7)
*IETester IE9
IETester IE8
IETester IE7
IETester IE6
Firefox 4.0 ハードウェアアクセラレーションあり(gfx.font_rendering.directwrite.enabled = false)
Firefox 4.0 ハードウェアアクセラレーションなし(gfx.font_rendering.directwrite.enabled = false)
Firefox 4.0 ハードウェアアクセラレーションあり(gfx.font_rendering.directwrite.enabled = true)
Firefox 4.0 ハードウェアアクセラレーションなし(gfx.font_rendering.directwrite.enabled = true)
Google Chrome 12.0.715.0 canary build
Opera 11.01
Safari 5.0.4 - CRT に最適
Safari 5.0.4 - 弱
Safari 5.0.4 - 中 - フラットパネルに最適
Safari 5.0.4 - 強
Safari 5.0.4 - Windows 標準
WindowsXP 32bit(from star-tako):
IE8(ブラウザーモード: IE8)
IE8(ブラウザーモード: IE8 互換表示)
IETester IE8
IETester IE7
IETester IE6
Firefox 4.0 ハードウェアアクセラレーションOFF
Firefox 4.0 ハードウェアアクセラレーションON
Google Chrome 9.0.597.107
Safari 5.0.4
今のところ Windows 上で想定通りのレンダリングをしてくれているブラウザは IE9 のみ。
Chrome は設定で最小フォントサイズが10pxに制限されているので小さいものが想定と違うサイズで出ているが、フォントサイズが合ったところでヒンティングの処理結果が変わったりはしない。
DirectWrite を使っているはずの Firefox4 の出力結果がイマイチなのが気になる。
2011.04.01 追記 ----
Agate さんに指摘していただくまで気づかなかったのだが、手元のマシン環境では Firefox4 は about:config で明示的に DirectWrite を有効にしないとそもそも使われていなかったようだ（あとで調べてみたところグラフィックドライバが古かったことが原因だった模様。更新すると about:config を元に戻しても about:support で有効の表示になった）。
確かに設定を変えるとメイリオに関してはかなり IE9 と Firefox4 で近い表示にすることができた。
一方ＭＳ Ｐゴシックはビットマップデータから文字幅を取ってしまっているのか、IE9 とかなり異なった結果になっていて、かつ DirectWrite 無効時の Firefox4 の出力結果に近い文字間隔になっているように思える。惜しい。非常に惜しい。
Mac OS X 10.6.7:
Safari 5.0.4
Safari 4.0.5
Safari 3.1.2
Safari 3.0.4
*Firefox 4.0
*Firefox 3.6.13
Google Chrome 10.0.648.204
Opera 11.01
Mac OS X 上には「ＭＳ Ｐゴシック」も「メイリオ」も入れていないので代替フォントで表示されている。
Firefox の出力だけが理想的な形になっている模様。
Ubuntu 10.10:
Firefox 4.0
Firefox 3.6.16
Google Chrome 10.0.648.204
Opera 11.01
Ubuntu 10.10 でも試してみたが、こちらは全滅。
まとめ:
美しく表示されない環境は、1px 以下の描写開始位置のずれを無視していることに起因しているのではないかと思う。Windows7 上での IE9 と Firefox4（DirectWrite 無効） の出力を拡大して比較してみる。
IE9 のスクリーンショットでサブピクセルレンダリングされてないとか、縦方向のアンチエイリアシングをしてないとかその辺はさておき、IE9 では i のひとつひとつが違った形で出力されているが、Firefox4 では同じレンダリング結果をコピーしたような出力になっている。
文字位置を正確に求めるにはピクセル単位の精度では不十分なのはわかりきっているものの、この辺を適当に処理してもそれほど致命的な問題はなく、開発コストや処理速度の問題もあるので各ブラウザベンダーはある程度適当に処理しているのかな、という印象。
2011.04.01 追記 ----
Firefox4 でも DirectWrite を有効にする方法がわかったので有効にしてみたのだが、有効にした瞬間に IE9 の DirectWrite の描写とは印象が違うことに気付いた。試しに並べてみたらやっぱり若干異なっていた。
Firefox4 が IE9 に比べると若干薄く見える。個人的には IE9 の方が読みやすい気がするけどこれは個人差がありそうな気がするから最終的には Safari みたいに設定から好みの濃さにできるといいのかも知れない。
WebGL とか Web フォントとか目新しい新機能もいいけど、Web の基礎とも言える文字表示の美しさにもっとこだわって欲しいな、と思う。
ブラウザのフォントレンダリングがもっと美しくなればテキストが書いてあるだけの無駄な画像が減って、Web の高速化にも多少は繋がったりしないかなあ、とか。
適切にヒンティングが行われているなら、上から下へ綺麗に文字間が等間隔で少しずつ拡大していくはず。
ＭＳ Ｐゴシックやメイリオがない環境では sans-serif です。
ＭＳ Ｐゴシック 8px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
ＭＳ Ｐゴシック 9px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
ＭＳ Ｐゴシック 10px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
ＭＳ Ｐゴシック 11px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
ＭＳ Ｐゴシック 12px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
メイリオ 8px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
メイリオ 9px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
メイリオ 10px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
メイリオ 11px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
メイリオ 12px
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
以下は実際にそれぞれの環境で表示させてみたスクリーンショット。
理想的な出力が行えていると思えるものに関しては先頭に * を付けてある。
Windows7 Home Premium 64bit:
*IE9(ブラウザーモード: IE9)
IE9(ブラウザーモード: IE8)
IE9(ブラウザーモード: IE7)
*IETester IE9
IETester IE8
IETester IE7
IETester IE6
Firefox 4.0 ハードウェアアクセラレーションあり(gfx.font_rendering.directwrite.enabled = false)
Firefox 4.0 ハードウェアアクセラレーションなし(gfx.font_rendering.directwrite.enabled = false)
Firefox 4.0 ハードウェアアクセラレーションあり(gfx.font_rendering.directwrite.enabled = true)
Firefox 4.0 ハードウェアアクセラレーションなし(gfx.font_rendering.directwrite.enabled = true)
Google Chrome 12.0.715.0 canary build
Opera 11.01
Safari 5.0.4 - CRT に最適
Safari 5.0.4 - 弱
Safari 5.0.4 - 中 - フラットパネルに最適
Safari 5.0.4 - 強
Safari 5.0.4 - Windows 標準
WindowsXP 32bit(from star-tako):
IE8(ブラウザーモード: IE8)
IE8(ブラウザーモード: IE8 互換表示)
IETester IE8
IETester IE7
IETester IE6
Firefox 4.0 ハードウェアアクセラレーションOFF
Firefox 4.0 ハードウェアアクセラレーションON
Google Chrome 9.0.597.107
Safari 5.0.4
今のところ Windows 上で想定通りのレンダリングをしてくれているブラウザは IE9 のみ。
Chrome は設定で最小フォントサイズが10pxに制限されているので小さいものが想定と違うサイズで出ているが、フォントサイズが合ったところでヒンティングの処理結果が変わったりはしない。
DirectWrite を使っているはずの Firefox4 の出力結果がイマイチなのが気になる。
2011.04.01 追記 ----
Agate さんに指摘していただくまで気づかなかったのだが、手元のマシン環境では Firefox4 は about:config で明示的に DirectWrite を有効にしないとそもそも使われていなかったようだ（あとで調べてみたところグラフィックドライバが古かったことが原因だった模様。更新すると about:config を元に戻しても about:support で有効の表示になった）。
確かに設定を変えるとメイリオに関してはかなり IE9 と Firefox4 で近い表示にすることができた。
一方ＭＳ Ｐゴシックはビットマップデータから文字幅を取ってしまっているのか、IE9 とかなり異なった結果になっていて、かつ DirectWrite 無効時の Firefox4 の出力結果に近い文字間隔になっているように思える。惜しい。非常に惜しい。
Mac OS X 10.6.7:
Safari 5.0.4
Safari 4.0.5
Safari 3.1.2
Safari 3.0.4
*Firefox 4.0
*Firefox 3.6.13
Google Chrome 10.0.648.204
Opera 11.01
Mac OS X 上には「ＭＳ Ｐゴシック」も「メイリオ」も入れていないので代替フォントで表示されている。
Firefox の出力だけが理想的な形になっている模様。
Ubuntu 10.10:
Firefox 4.0
Firefox 3.6.16
Google Chrome 10.0.648.204
Opera 11.01
Ubuntu 10.10 でも試してみたが、こちらは全滅。
まとめ:
美しく表示されない環境は、1px 以下の描写開始位置のずれを無視していることに起因しているのではないかと思う。Windows7 上での IE9 と Firefox4（DirectWrite 無効） の出力を拡大して比較してみる。
IE9 のスクリーンショットでサブピクセルレンダリングされてないとか、縦方向のアンチエイリアシングをしてないとかその辺はさておき、IE9 では i のひとつひとつが違った形で出力されているが、Firefox4 では同じレンダリング結果をコピーしたような出力になっている。文字位置を正確に求めるにはピクセル単位の精度では不十分なのはわかりきっているものの、この辺を適当に処理してもそれほど致命的な問題はなく、開発コストや処理速度の問題もあるので各ブラウザベンダーはある程度適当に処理しているのかな、という印象。
2011.04.01 追記 ----
Firefox4 でも DirectWrite を有効にする方法がわかったので有効にしてみたのだが、有効にした瞬間に IE9 の DirectWrite の描写とは印象が違うことに気付いた。試しに並べてみたらやっぱり若干異なっていた。
Firefox4 が IE9 に比べると若干薄く見える。個人的には IE9 の方が読みやすい気がするけどこれは個人差がありそうな気がするから最終的には Safari みたいに設定から好みの濃さにできるといいのかも知れない。
WebGL とか Web フォントとか目新しい新機能もいいけど、Web の基礎とも言える文字表示の美しさにもっとこだわって欲しいな、と思う。
ブラウザのフォントレンダリングがもっと美しくなればテキストが書いてあるだけの無駄な画像が減って、Web の高速化にも多少は繋がったりしないかなあ、とか。