Optical Zooming: How to Correct Legacy Document Modes Problems with Fonts
Modern browsers like Internet Explorer 10 and 9 introduced sub-pixel font positioning as part of its hardware-accelerated rendering of HTML5 content. That was an important step into the future as it enabled zoom-independent text metrics—an important characteristic when touch gestures like pinch-zoom are part of the browsing experience on Windows 8 touch-enabled devices. This article shows how easy it is to help your fonts look better across many browsers by declaring Standards Mode.
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%
Move to Standards Today
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:
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.
Be Ready for IE10
Fonts aren’t the only reason to move towards Standards. There are also other factors like 30% better performance. We hope these changes help you moved your site from 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 definitely thank you.
Ted Johnson is a Program Manager Lead in the Internet Explorer team focusing on Web Graphics
This article was reprinted with permission from Microsoft Corporation. This site does business with Microsoft Corporation.
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
Which topic are you interested in?
What is your company size?
What is your job title?
What is your job function?
Searching our resource database to find your matches...