Hebikuzure's Tech Memo

2010年10月2日

Internet Explorer Cookbook (7)

Filed under: IE9 Cookbook — hebikuzure @ 7:27 PM

今日も「Internet Explorer 9 Cookbook」の試訳を公開する。

翻訳については Microsoft Corporation およびマイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


Internet Explorer 9 Cookbook > Features Changed in Internet Explorer 9

テキスト レイアウトではナチュラル メトリックスが使用されます

[このドキュメントは速報を目的としており、変更される可能性があります]

影響を受ける Internet Explorer のドキュメント モード

  • IE9 標準

機能への影響

  • 深刻度: 種々(Web ページでの機能の利用方法に依存)
  • 発生確率:

詳細

IE9 標準モードでのテキスト レイアウトにおいて、Windows Internet Explorer 9 は他の Microsoft Windows ブラウザーが使用しているグラフィック デバイス インターフェイス (GDI) メトリックスではなく、ナチュラル メトリックスを使用します。GDI メトリックスではテキストをピクセルの境界に整列させますが、ナチュラル メトリックスではピクセル間の空間も利用し、より正確なレンダリングと読みやすいテキストを生成します。

Windows Internet Explorer のそれ以外のドキュメント モードでは、引き続き GDI メトリックスを使用します。

影響のある領域

以前のドキュメント モードに合わせて書かれたページ レイアウトは Internet Explorer 9 で正確に表示されません。最も一般的な問題は予期しないテキストの折り返しです。それにより折り返されたテキストのすぐ下にある要素が覆われてしまいます。この問題は、テキスト ボックスに余裕のある高さが無い場合や、テキスト ボックスのサイズが例えばグラフィックスのような、ページ内の他の要素に結合されている場合によく発生します。

ガイドライン

ユーザーは (例えば 125% にするなど) より大きなフォント表示にすることもできるので、特定のフォントの表示サイズが異なるブラウザー間で、あるいは同じブラウザー同市であっても、常に一定であると想定しないでください。

推奨事項

Web ページのテキスト レイアウトの表示が一定であるようにするため、以下のデザイン ガイドラインを利用してください:

  • テキスト ボックスのサイズをピクセル数で指定する
  • テキスト ボックスの余裕分のスペースを持たせ、きっちり詰めないようにする
  • 非静的なテキスト ボックスのサイズ指定を利用する
  • 他のページ内の要素に依存する境界領域には余裕分のスペースを含める
  • ユーザーにページのフォント サイズの変更を許可するのであれば、ページをテキストの折り返しに対応させる
  • すべての一般的なブラウザーで Web ページをテストする。もしテキストの折り返しで問題が起きるなら、ページがテキストを適切に表示するよう調節する。
  • Web ページを以前のモード向けにデザインしており、それをナチュラル メトリックスに対応するよう更新したくない場合は、ユーザーが Internet Explorer 9 で表示する際にそのモードでページが表示されるように設定する

避けるべき事

テキストのレイアウトで以下のデザインは避ける:

  • 異なるブラウザー間で同じように表示させるためにフォントのサイズに依存する
  • 静的なサイズのテキスト ボックスを使用する

関連情報

公開日: 2010年9月14日

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com で無料サイトやブログを作成.

%d人のブロガーが「いいね」をつけました。