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 |
|
|
| 10 |
|
|
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