Hatena::Groupsubtech

ういはるかぜの化学

Tuesday, May 10, 2011

IE9ヤバイの話。 12:14 IE9ヤバイの話。 - ういはるかぜの化学 を含むブックマーク はてなブックマーク - IE9ヤバイの話。 - ういはるかぜの化学

IE9ヤバイ。IE9の文字間隔・互換モード・DOCTYPE宣言について

はてなブックマーク - IE9ヤバイ。IE9の文字間隔・互換モード・DOCTYPE宣言について

なんかブックマークコメントを見てたら突っ込んでおくべきなような気がしたので少しごにょごにょと。

もともとMicrosoft寄りなので信者擁護乙みたいになってしまって、うむむ…って思ったのですがあまりに死ねみたいなコメントが延々と多いのでちょっとうーむと。

この元のエントリではわかりにくいですが以下の3つの点について触れています。

以前のバージョンや他のブラウザに比べて文字間隔が狭くなる

というわけで1番目の文字間隔が狭くなるという話についてです

これは文字の描画がGDIからDirectWriteという仕組みに変わり、文字間隔の処理丸められなくなったので本来のフォントサイズ意図に近い間隔になるようになったというのが根本の原因です。(参考: Text layout and natural metrics (Windows))

この点についてはエントリでも補足されています。なので実際にはさらに2つの点に分かれます

まず1つ目の「本来の文字間隔」になったというのはその通り普通に仕様」で、正しい期待通りの挙動なので不具合ではありません。

「おいおい、前と間隔が違うじゃねーのどうしてくれんのさ不具合だろ」という方は「MacWindowsで文字のアンチエイリアスや間隔が違うのを直せ」という担当者と変わりませんのでこのたびはお悔やみ申し上げます

で、2つ目がMS P ゴシッカーにはちょっと困る話で、文字間隔を調節した結果ビットマップフォントだとサブピクセルレンダリングもないので妙に詰まって見えて「読みづらい」という風になったという話です。これは微妙といえば微妙ですね。

ところでこれはDirectWriteのレンダリング結果のせいなので、IE9というよりそもそもWindowsに非があります

例えば同じDirectWriteを採用しているWPFで同じ文字列を表示してみると以下の通り、IE9と同様の結果となります

f:id:mayuki:20110509202827p:image

f:id:mayuki:20110510114915p:image

たぶん、今時欧文フォントビットマップフォントを使わないのでDirectWriteであまり考慮されていなかったのではないかという気がします。これは残念ですね。もういっそビットマップをやめればいいんじゃないかと思ったりしますが。

フォント指定が効いていない

2番目のフォント指定の話は、ブラウザフォント設定でメイリオを設定したのに効いてない!不具合!って話です

sans-serif指定したらちゃんと動かないっぽいと追記されてます

まず、そもそもInternet Explorerフォント設定の画面には「ここで選択するフォントは、フォントが指定されていない Web ページやドキュメントで表示されます」と書いてあります

f:id:mayuki:20110510110310p:image

つまりfont-familyが指定されている(=フォントが指定されている)とそのダイアログでの設定は無視されます。その結果ブラウザデフォルトスタイルシートフォントファミリ sans-serif の定義MS P ゴシックになっていて反映されるというわけです

そもそも san-serif がMS P ゴシックなのもたまたまかもという勢いである(別に何か決まってるわけではない)のでInternet Explorer 9 RC 版用テスト ガイド: 5.フォント・テキスト処理には以下のように書かれています。

フォント指定記述において、日本語フォント名を明記せず、英語フォント名や汎用フォント ファミリー名を用いている場合意図しないフォントが表示に使われる場合があります日本語フォント名を明記して下さい。また、Font-family の中でフォントを複数指定する場合は、表示したフォント名順に列挙して下さい。

CSS 3 Font Moduleの3.1.1 Generic font familiesにはsans-serifはGothic (Japanese)と書かれてるのでsans-serifを指定することでゴシック系の何かが指定された相当だと思えばそういうものな感じでもあります

ちなみにもしユーザーコントロールしたいならユーザースタイルシート@font-face書いたりしておくといいかもしれません。

正しく表示されない・動作しないサイトがある話

3番目は割とどうでもいいというかサイトの問題(ハックやUAで分岐しているがためのミスなど)だったりすることが多いのと互換表示で何とかなるという、まあそうですよねというお話です

例えばUser-AgentみてIEだったらattachEventメソッドを使うみたいなことをしていると動かないみたいなケースですね。

おわりに

Web標準やらW3C仕様云々とかコメント書いてる人こそホビロンだと思ったり。