IE9、サブピクセル配置技術でテキストのズレを解消

Sub-pixel Fonts in IE9 - IEBlogにおいて、IE9で導入されるサブピクセルフォントレンダリングがもたらす効果が紹介されている。IE9ではIE9スタンダードモードでサブピクセルポジショニングが活用され、従来よりも正確にフォントサイズをレンダリングするようになる。この結果、IE8およびそれ以前のIE向けに制作したWebページのテキストは、IE9では別のサイズでレンダリングされることになる。IEBBlogにどういった変更があるのかが簡単にまとめられており参考になる。

MicrosoftはWindowsにおけるテキストレンダリングにサブピクセルポジショニングと呼ばれる技術を導入した。液晶ディスプレイは1ピクセルあたり3つのサブピクセルで構成されている。サブピクセルポジショニングはフォントのレンダリングをピクセル単位ではなくサブピクセルあたりで実施するというもので、従来よりも細かいサイズ調整やポジション調整が可能という特徴がある。

IE9ではIE9スタンダードモードでこの技術を活用したテキストレンダリングを実施するという。ほかのモードではIE8以前と同じピクセル単位でテキストのレンダリングが実施される。結果として、IE8では次の表のように指定したフォントサイズと実際のレンダリングサイズに多少のズレが発生していたわけだが、IE9からはほとんど指定したどおりのサイズでレンダリングされるようになるという。

Sub-pixel Fonts in IE9に実際にIE9とIE8でレンダリングした場合の結果の違いが掲載されている。IE8とそれ以外のブラウザでは似たようなテキストレンダリングを実施するが、IE9では違うレンダリングになっていることを確認できる。

コンテンツのズームインとズームアウトを実施した場合、IE8以前のブラウザでは実際に指定したサイズとレンダリングに使われるフォントのサイズが違うため、テキストの表示位置がずれるといった挙動を示していた。IE9ではサブピクセルレンダリングを実施することで、要求するフォントサイズとレンダリングされるフォントサイズが近い。このため、ズームした場合にもフォントのレンダリング位置がずれないという特徴があるという。

ブラウザベンダはフォント機能の向上やフォントレンダリングの改善に取り組んでいる。高度なフォントの利用が価値に結びつくようなアプリケーションをWebアプリケーションで実現するとなると、こうした機能が欠かせない。IE9におけるサブピクセルポジショニング技術の採用はそうした取り組みのひとつとして注目される。