Optical Zooming in Legacy Document Modes

IEBlog

Internet Explorer Team Blog

Optical Zooming in Legacy Document Modes

  • Comments 33

Internet Explorer 9 introduced sub-pixel font positioning as part of its hardware-accelerated rendering of HTML5 content as described in this IEBlog post. That was an important step into the future as it enabled zoom-independent text metrics—an important characteristic when pinch-zoom is part of the browsing experience as it is in IE10 on Windows 8 touch-enabled devices.

As noted in that post 18 months ago, IE9’s legacy compatibility modes use whole-pixel text metrics. This compatibility-driven decision continues in IE10 with IE5 quirks, IE7 standards, and IE8 standards modes all running with whole-pixel font metrics; IE10 document modes Standards, Quirks, and IE9 Standards all use sub-pixel text metrics.

As a result, the text in sites running in legacy document modes 5, 7, and 8 does not scale smoothly when the page is zoomed by pinch-zoom, double-tap zoom, or when the page is auto-zoomed for display in Windows 8’s snap and fill views.

Zoom Example: Legacy vs. Standards Modes

Below are side-by-side comparisons showing text from a popular news site in 8 and 10 document modes at 100% and 150%. Note the especially poor letter spacing between some letters in the 150% 8 mode example (upper right).

Default size (100%) Optically zoomed to 150%
8 Sample text in IE8 mode at 100% Sample text in IE8 mode using GDI-compatible font metrics at optical zoom 150%
10 Sample text in IE10 mode at 100% Sample text in IE10 mode using sub-pixel font metrics at optical zoom 150%

Move to Standards Today

The best fix for this behavior is to move your pages to IE9 or IE10 Standards mode. IE10 Compat Inspector is a valuable tool to help you migrate to IE9 or IE10 mode. Compat Inspector identifies potential issues and offers steps you can take to resolve them. In general, the HTML, CSS, and JavaScript markup and code you use with other browsers will work great in IE10 once any browser detection is replaced with feature detection and vendor-specific CSS prefixes are updated to include -ms- or unprefixed versions. Modernizr is a JavaScript library that can help with these issues.

Specifying Sub-pixel Metrics in Legacy Modes

If moving to standards-based markup is out-of-scope for your site at this time, you may enable sub-pixel text metrics in legacy document modes using an HTTP header or <meta> tag. Based on our testing, most sites will work fine with natural text metrics.

The format of the HTTP header is:

X-UA-TextLayoutMetrics: Natural

The syntax of the <meta> tag is:

<meta http-equiv="X-UA-TextLayoutMetrics" content="natural" />

Support for this HTTP header and <meta> tag are new in the final release version of IE10 on Windows 8.

To improve the Windows 8 out-of-box experience for touch-enabled devices, we’ve added a <NaturalTextMetrics> section to the IE10 Compatibility View List that enables natural metrics for approximately 570 popular sites that currently run in legacy document modes. If your site is included on the list but you would prefer it not be, email iepo@microsoft.com. Include your name, company, title, and contact information along with the domain you want removed.

Be Ready for IE10

Move your legacy document mode site to IE9’s default standards mode today and be ready for IE10 tomorrow. Visitors to your site using IE10 on Windows 8 will thank you.

—Ted Johnson, Program Manager Lead for Web Graphics

  • Loading...