旧ドキュメント モードでの光学式ズーム
IEBlog の記事 (英語) で説明されているとおり、Internet Explorer 9 では、ハードウェア アクセラレーションを使った HTML5 コンテンツのレンダリングの一部としてサブピクセル フォント配置が導入されました。これは、ズームとは無関係のテキスト メトリック (Windows 8 タッチ対応デバイスの IE10 で利用可能なピンチ ズームがブラウジング エクスペリエンスの一部となっている場合に重要な特性) を可能にしたため、将来への重要なステップでした。
18 か月前のこの記事で説明されているとおり、IE9 の旧互換モードではピクセル全体のテキスト メトリックが使用されています。互換性を重視したこの決定は IE10 に引き継がれており、IE5 互換モード、IE7 標準モード、IE8 標準モード (すべてピクセル全体のフォント メトリックで実行されます) と互換性があります。IE10 のドキュメント モード (標準、互換) と IE9 標準モードではすべて、サブピクセル テキスト メトリックが使用されます。
このため、ピンチ ズーム、ダブルタップ ズームを使ってページをズームした場合や、Windows 8 のスナップ ビューとフィル ビューで表示するためにページが自動ズームされている場合、旧ドキュメント モード 5、7、8 で実行されているサイトのテキストはスムーズにスケーリングされません。
ズームの例: 旧モードと標準モード
以下に、人気ニュース サイトのテキストを 8 ドキュメント モードおよび 10 ドキュメント モード (それぞれ 100% と 150%) で表示した画面を比較した図を示します。特に、8 モード 150% の例 (右上) で、一部の文字の間隔が不適切である点に注目してください。
既定のサイズ (100%) | 光学式ズーム 150% | |
---|---|---|
8 | ||
10 |
今すぐ標準モードに移行する
この動作を修正するには、ページを IE9 または IE10 の標準モードに移行するのがベストです。IE10 Compat Inspector は、IE9 モードまたは IE10 モードへの移行に役立つツールです。Compat Inspector では、考えられる問題が特定され、その問題を解決する方法が示されます。ブラウザー検出が機能検出に置き換えられ、ベンダー固有の CSS プレフィックスが更新されて -ms- バージョンまたはプレフィックスのないバージョンが追加されると、他のブラウザーで使用している HTML、CSS、JavaScript マークアップおよびコードは通常 IE10 で適切に動作します。Modernizr (英語) は、このような問題が発生したときに役立つ JavaScript ライブラリです。
旧モードでサブピクセル メトリックを指定する
サイトで今のところ標準ベースのマークアップへの移行を実施できない場合、HTTP ヘッダーまたは <meta>
タグを使って旧ドキュメント モードでサブピクセル テキスト メトリックを有効にすることができます。私たちのテストによると、ほとんどのサイトは通常のテキスト メトリックで適切に動作します。
HTTP ヘッダーの形式は次のとおりです。
X-UA-TextLayoutMetrics: Natural
<meta>
タグの構文は次のとおりです。
<meta http-equiv="X-UA-TextLayoutMetrics" content="natural" />
この HTTP ヘッダーと <meta>
タグのサポートは、Windows 8 の IE10 の最終リリース バージョンで新たに導入されます。
タッチ対応デバイスにおける Windows 8 のすぐに使えるエクスペリエンスを向上するため、 IE10 互換性表示一覧 (英語) に <NaturalTextMetrics>
セクションを追加し、現在旧ドキュメント モードで実行されている約 570 の人気サイトで通常のメトリックを使えるようにしました。皆さんのサイトが一覧に掲載されていて、掲載を希望されない場合は、iepo@microsoft.com まで電子メールをお送りください。削除を希望するドメインに加えて、お名前、会社名、役職、連絡先情報を記載してください。
IE10 に向けて準備する
旧ドキュメント モードのサイトを今すぐ IE9 の既定の標準モードに移行し、今後の IE10 に向けて準備しましょう。Windows 8 で IE10 を使ってサイトにアクセスするユーザーから喜んでもらえるでしょう。
- Web グラフィック担当プログラム管理者リード Ted Johnson