Optical Zooming in Legacy Document Modes


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

Comments (33)

  1. Anonymous says:

    I think your choice of text to display this example should be re-thought.

  2. Anonymous says:

    Hey, good job making a technical article a political one! (sarcasm)

  3. Anonymous says:

    IE10 for Windows 7? Should we wait for it or switch to Chrome/Firefox/Opera?

  4. Anonymous says:

    *yawn* Let me know when I can try it in Windows 7.

  5. Anonymous says:

    You should probably wait until IE10 is actually out

  6. Anonymous says:

    IE10 is out. The final build was released with Windows 8 to MSDN and TechNet on August 15th. I've already installed it on 16 machines. However, at multiple user requests, I have reverted all but three of them to Windows 7. IE 10 is great, but Windows 8 on a desktop is a very disappointing experience.

  7. Anonymous says:

    When is Internet Explroer 10 turned Windows 7 released?

    He is interested rather than Windows 8.

  8. Anonymous says:

    Hey guys … you need to talk Windows 7 support. Seriously.

  9. Anonymous says:

    It should have been obvious I meant the official release date.  Microsoft told us there wouldn't be a Windows 7 release until after the RTM came out, it probably means they are working on the conversion process right now and will either release a windows 7 RTM as soon as possible, or just wait for the release date since its too late for us to submit bug reports anyway.

  10. Anonymous says:

    @"@Max"

    That would be rather sad, if I may say so. It would mean IE10 was never designed for any existing operating system, and now it needs a backport. By comparison, Firefox 14 can do everything IE10 can (to reasonable boundaries) and also runs on Vista and XP.

    Microsoft has no technical reason for IE10 to work only on Windows 8, even for now.

  11. Anonymous says:

    If a W7 version of IE10 will appear then it will be just using the new rendering engine that is in IE10 for W8.

    No time to introduce any significant changes to the UI.

  12. Anonymous says:

    Modernizr, the JS library that creates (or at least used to create) w WebGL context on every site?

    Anyways, could you give us numbers on the popularity of the document modes?

  13. Anonymous says:

    Another thing, is there a way to force all sites to render with natural font rendering, just like one can force all sites to be in Standards mode?

    Also, what about desktop applications that use the IE control?

  14. Anonymous says:

    Why did you choose to disable ClearType in IE10 and use grayscale instead?

  15. Anonymous says:

    "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."

    Is that an announcement? 🙂

  16. Anonymous says:

    Who cares, really? Text rendering? Come on! IE is like the Sleeping Beauty: unfortunately the prince will never come, because he's having great time with othe princesses who are – apparently -not sleeping. Like Chrome, Firefox and even the little ugly, Opera.

  17. Anonymous says:

    @Ben, Opera? Ugly? Chrome is more ugly than Opera. Your talking just if the IE-team is doing nothing. But actually, they are doing a great job with IE9+.

  18. Anonymous says:

    Doesn't support WebGL so I recommend everybody to use a different browser.

  19. Disabling ClearType regardless of user choice is stupid. Combing vertical hinting and vertical subpixel positioning in optical zooming is double stupid. You may choose between clarity and shape accuracy but never ruin both at the same time. Typical Microsoft incompetence in typography.

  20. Anonymous says:

    @Martijn: Maybe they have a technical reason which is called Windows Runtime. I think this all has to do with IE10 and Chakra being the underlying rendering and scripting engine for HTML5/JS Metro-style apps (a.k.a. Windows Store apps). Now they have to strip out all the Windows 8 dependencies. I even suspect that we'll not get all of the features and low-level improvements of IE10 of Windows 8 on Windows 7.

  21. Anonymous says:

    @WebGLStats

    The IE team said cleary that they're very supportive of web standards. So you can be sure that IE10 will support HTML5 WebGL.

  22. Anonymous says:

    What is the difference if any between the pinch zoom, the ctrl scrollwheel zoom, and the zoom on the internet options menu?

  23. Anonymous says:

    Unofrtunately IE10 has a regression with SVG zooming. To be precise with loading page with SVG while being zoomed.

    connect.microsoft.com/…/754310

  24. ieblog says:

    @Steve: Good question. The answer is that IE10 has two ways to zoom: layout zoom and optical zoom. Layout zoom scales the size of everything except the viewport width and re-lays out the page content with their new, larger sizes. Optical zoom scales the original 100% layout; it does not re-lay out the page. These two types of zoom are used as follows:

    Zoom menu — layout zoom

    Pinch zoom — optical zoom

    Keyboard/mouse shortcuts (including Ctrl-wheel) — layout zoom in desktop IE10, optical zoom in the Metro style experience

  25. Anonymous says:

    Wow it took until now for IE to disable ClearType by default?!

    Well better late than never! ClearType or FuzzyType as Advanced users know it was always hokey at best or horrible at distorting the pure colours of black and white with the dreaded rainbow effect.

    So is the performance of optical zoom going to suck like the layout zoom does right now? Or will that be fixed by the time the windows 7 version is released?

    Currently zooming in IE causes horrific performance when scrolling, dragging, and detecting hover events.

  26. Anonymous says:

    @Gilbert

    You should try out IE10 in Windows 8. You'll be shocked, when you see how bad the fonts look.

  27. Anonymous says:

    Fonts look great in Windows 8. It's the rest of the OS that's garbage.

  28. Anonymous says:

    Fonts DO look awesome on Windows 8, JUST LIKE THE REST OF THE OS!!! If you don't like it, don't use it. Windows 7 will be supported till 2020 you know.

  29. Anonymous says:

    What's wrong with the example text?

  30. Anonymous says:

    Developers of the HP company did tests for period of operation of notebooks from accumulators and noted interesting feature that the operation resource from the accumulator is more on that than notebooks where Internet Explorer 9 on the average worked for 15 % in comparison with other browsers. — http://www.law-us.blogspot.com

  31. Anonymous says:

    A quick way to switch to white text on black background using an IE button for the current page would help.   This is for acessiblity as well as device battery life.   This is on a per page/per document and per application basis.  Setting it at the OS/user level settings will break with the many documents and applications that fail to handle black text on black background or a black line drawing png with transparent background on a black background (a common site on the web).

  32. Anonymous says:

    >2012

    >Still waiting for non-existant IE10 for Win7

    I SURE HOPE YOU GUYS DON'T DO THAT

  33. Anonymous says:

    i hope if i switch to 10 it wil work better and faster