Internet Explorer 8 and Adaptive Zoom

Hi! I am Saloni Mira Rai, a program manager on the Layout team, and I’d like to walk you through the changes in Zoom for Internet Explorer 8.

Zoom lets you enlarge or reduce the view of a web page to improve readability. The feature is particularly useful on really large and really small displays, allowing for scaling of content while maintaining the intended layout of the page. The second iteration of the zoom feature (first shipped in Internet Explorer 7) focuses on improving the existing experience by providing a higher quality, more predictable, and persistent zooming experience.

What You Can Expect

As you zoom, IE8 will size the text and images and reflow the page to make it easier to read. You will not see a horizontal scrollbar for most mainstream scenarios. It’s easier to show than explain, so here’s an example:

Zooming the IE Blog to 150% in IE7 looked like this:
Notice that text moves off the screen and a horizontal scrollbar appears at the bottom of the screen.

Here is the same page zoomed to 150% in IE8 Beta 1:
Text is now being wrapped and no horizontal scrollbar is needed.

Digging In A Little Deeper

NOTE: This section is for readers who want to understand the internal workings of Adaptive Zoom, and how it might affect site design.

Internet Explorer 8 Adaptive Zoom is founded on the concept of scaling elements pre-layout. This is significantly different from Internet Explorer 7 Zoom behavior, which was analogous to “magnifying” the webpage – elements were scaled post layout and then re-drawn on screen.

Due to this important change, horizontal scrollbars are introduced only when the fixed width of the scaled content is greater than the width of the viewport. This is exactly like resizing regular layout on an un-zoomed webpage.

Also, text wrapping is affected by this change. In IE7 Zoom, line lengths and line breaks were not recalculated as the zoom factor increased / decreased. This led to situations where text lines were either too small (resulting in lots of white space) or too large (resulting in text runs that would go off the screen, requiring horizontal scrollbars). In IE8, line lengths are recalculated based on available space before the text is rendered on screen. Then, line breaks are inserted all the while taking the new lengths into account.

In addition, it is important to understand how common page elements and properties respond to zoom.

• Fonts and text : The glyph itself is not scaled. Rather, the font size is scaled and then the appropriate glyph is used. The important thing to note is that fonts do not scale linearly by design. For example, if text at 12pt is scaled to 110%, the resulting font size is calculated as 13.2pts. However this font size does not exist, therefore it is rounded to the nearest available size – 13pt.

• Fixed, auto and relative sizing : Dimension scaling is one of the most important improvements in IE8’s Adaptive Zoom. Dimensions specified using absolute units (e.g.: in, cm, mm, etc) or device and font dependent units (e.g.: px, ex, em, etc) are scaled as per the zoom level. Therefore, at 200%, 100px becomes 200px and 20pt becomes 40pt.
  Content-dependent dimensions, i.e. percent and auto, are not scaled as they are computed during layout. Therefore, at 200%, a width of 50% of the viewport does not become 100% of the same. This is a marked change from Zoom in IE7.

• Positioning : Positioned elements grow and shrink like in-flow elements. However their new position is determined by the properties set, and the offsets used.
  An absolutely positioned element, if offset to the left by 100px, will shift towards the right when zoomed in. It is possible for it to go off screen.

Similarly, floats will be positioned with respect to their container as per the normal rules of CSS. If the width of the container changes with zoom, then the position of the float will change. Zooming of adjacent floats is exactly like resizing the window – if the width of the viewport is not large enough to accommodate the floats, the last one in markup will drop to the next line.

• DHTML properties :   In IE7 zoom, some properties were treated as physical (e.g.: mouse coordinates) while others were logical (offset). This implementation essentially required web developers to be aware of or manually calculate the zoom state based on the property being used. In IE8 zoom, all DHTML properties are now assumed to be logical. This enables some key scenarios such as fly-out menus and “drag-and-drop”. There are a few known issues, such as the incorrect scaling with screen.width and screen.height, that were not addressed in Beta 1. These will be fixed in a future release.

For more details and information on the scenarios mentioned above, and additional scenarios, such as those involving overflow, tables, etc., please see the Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview.

Getting Your Site Ready For Internet Explorer 8 Zoom

Web developers should not expect to write any special code for adaptive zoom. Since all properties are logical, and scaling is purely internal, developers do not even have to be aware of zoom.

If you are interested in improving your site user experience with zoom, I recommend you test your site with different zoom factors, resolutions and window dimensions. Here are some initial things to think about as you do this:

• At what point do horizontal scrollbars appear? Does the user need to scroll to read a single line of text?
• Does content quickly go off screen because of fixed sizing and positioning?
• Does the overflow:hidden value on any elements make content inaccessible?
• Do fly-out menus adapt to available screen real estate, or do options go off screen making them inaccessible to the user?

Thanks for reading and I look forward to your feedback!

Saloni Mira Rai
Program Manager

Comments

• Anonymous
  March 25, 2008
  Sometime a magnifying zoom is the best such as when I want to zoom in on the RADAR weather page image. Other times the adaptive zoom sound great so that I can read the page by scolling down with not side scroll. Would it be possible to have easy access to both styles?

• Anonymous
  March 25, 2008
  @Doug - No, IE8 Beta-1 is capable of only using adaptive zoom.

• Anonymous
  March 25, 2008
  Very nice conceptually, but it fails horribly in many cases. take DIGG. http://www.digg.com/ a very popular social site... zoom in one level (125%), and the site is ENTIRELY UNUSABLE! The main headers alone take up about one vertical browser page... I hope that the first Beta (IE8 Beta 1) is just that... a BETA... not representing the final release at all.

• Anonymous
  March 25, 2008
  Improved Zoom is one of the things I like the most in IE8b1, especially the part that it doesn't re-draw the whole page and wrap to the top in some cases. (I think IE7 did that with Wikipedia, but I'm absolutely not sure, it was only an annoyance I never payed attention to) The thing I dislike with zooming, with its current implementation, is the magnification of images. It looks as if a simple point-order magnification is done, without any (or without any decent) image filtering. This looks very bad; it would be good if we had an option to change the zoom algorythm to use bilinear or bicubic (or exact unfiltered, for pixel art) resampling for improved quality on image zoom. This is the most visible on animated GIF files, which look absolutely horrible in the current implementation. Beyond the normal quality issues, the animation also breaks up and frames blend incorrectly. You can chalk this one up to the horrible anigif handling of IE, I guess, you guys really need to rewrite the image rendering code (png and jpeg are not perfect either - missing png gamma, and progressive rendering). The other problem with zooming to images is speed. Try zooming into a wallpaper sized image, and ie7 (and ie8b1) slows down to a crawl. Other image editors (even MSPaint!!) can do smooth magnification without hardware acceleration: why can't IE do this? Furthermore, why doesn't it use hardware acceleration to begin with? It's one of the things Vista is good for, and it should be built upon, in my opinion (you can just leave it out from XP, making it default to GDI, or it could default to GDI rendering if you launch IE in no-addon mode). Good job on the improvements you made so far, I really hope you can make more: IE is a dinosaur and you are doing great work at modernizing it. Theres just so many more parts that need revamping. Cheers.

• Anonymous
  March 25, 2008
  This scaling also totally ruins many layouts. If there is a fixed say 50px x 50px block, with a background image (50x50) set, when the page scales the background image does weird things. Compare the shopping cart icon on this page: http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash In IE 8, vs. Firefox 2, Firefox 3, or IE7 And change the zooom factor... in IE8, you end up with multiple shopping carts, but it works fine in all other browsers. If you are going to scale fixed pixel objects you need to enable some method to the developer to say "NO", this item is 50px, now, always, regardless of zoom. I agree the text wrapping is much better than before, but this is 1 step forward, 2 steps back in terms of progress from IE7.

• Anonymous
  March 25, 2008
  Hello, @nice but and @omg - Thanks for the feedback! These look like bugs in layout for IE8 Standards Mode. Try switching to 'Emulate IE7' mode and then zoom again. You will notice that these issues are no longer visible. Thanks!

• Anonymous
  March 25, 2008
  I think there is a big difference between zooming and scaling, and this seems to confuse the two. If designers wish for their pages elements to be scalable, they will specify in em's. In Firefox, Wikipedia's sidebar expands along with the text because its width is specified in a scalable unit (em). Other elements specified in pixels shouldn't be scaled, because they were given a fixed size. In Firefox, Wikipedia's logo doesn't zoom, it stays at the same pixel size. Inches and other absolute measurements also can only be zoomed. You can't scale an inch, or it's not an inch anymore. However, you could zoom in on it. What IE is doing here is really a combination of zooming and scaling. IE7 only did zooming, and Firefox only does scaling. I realize a combination of the two may be needed to offer users real legibility on the "current" web, but if designers wish to have a legible site then they can specify it - IE needs to put more of the responsibility on the designer in this instance.

• Anonymous
  March 25, 2008
  And another point - are you saying the "Emulate IE7" behavior of zooming differs from that of the actual IE7? If the Emulate IE7 engine is not identical to actual IE7, then we as designers are we going to have to now test IE6, IE7, IE8, and IE8-as-IE7.

• Anonymous
  March 25, 2008
  Does anyone know if this means that IE8 is using the same approach in their zoom logic as Opera and FF3? From what I know, Opera and FF3 uses the same technique, but that this is different from what IE7 uses. If this is the case, this would be a great improvement for IE8!

• Anonymous
  March 25, 2008
  @steven: Compare what you've said against Doug's first comment - sometimes, zooming into an image is exactly what the user wants to do.  (Also, remember it's the user that's in charge, not the web desginer.) Besides, as DPI gets up, pixel counts will get less and less useful.  Designers should consider straight not using them.

• Anonymous
  March 25, 2008
  les escribo por que trato de conectarme a una pagina de internet y no la abre. Hace 5 minutos pude abrirla y ahora no. La conexion esta perfecta y la pagina supongo que tambien por que hace 5 minutos la abri. espero una respuesta

• Anonymous
  March 25, 2008
  IE8 Adaptive Zoom: This doesn't seem like it will have a major impact on existing websites, but may be handy to be aware of ahead of time. Microsoft Internet Explorer 7 offered a "zoom" feature which scaled up the existing page... you'd usually have to

• Anonymous
  March 25, 2008
  A minor issue here when using the adaptive zooming: The IE RSS Reader makes the right pane non-scrolling (i.e. fixed), this behaviour is lost, however when zooming and the pane behaves as if it would have an absolute position. I suspect this may be the case with other pages as well that use position: fixed, though I can't remember one that uses it currently.

• Anonymous
  March 25, 2008
  The comment has been removed

• Anonymous
  March 25, 2008
  Steven: The Emulate IE7 button only affects the rendering engine. I'm using IE8b1 in IE7 mode and it scales pages instead of zooming. Not really a problem for me, since it works much better. What Saloni Mira Rai [MSFT] meant is that the layout is rendered differently in IE8 Standards mode, which causes different rules to apply in zooming, breaking the page if you zoom into it in IE8 mode. I've just tried, and indeed IE8 standards mode has serious layout issues if you zoom in the pages, while Emulate IE7 mode zooms perfectly fine.

• Anonymous
  March 25, 2008
  So basically it behaves just like Opera does since its earliest versions, before it got really adaptive zoom (Medium Screen Rendering) :)

• Anonymous
  March 25, 2008
  The comment has been removed

• Anonymous
  March 25, 2008
  I use a 120 dpi screen. All images are "zoomed" badly in IE8 by default, so I usually click the zoom dropdown and select "Custom..." then "80%", this then seems to cancel out the 125% "zoom" that IE8 is doing. Unfortunately there appears to be no way to save this setting. Can you please add a default Zoom setting somewhere, even if it is just a registry key. It seems to me that this Zooming behaviour should be consistent across the OS and all other applications.

• Anonymous
  March 25, 2008
  IE8 is messing up too many webpages. I need to uninstall it and reinstall IE7. IE7 kept locking up in Vista and Vista SP1. Someone said it was because of some addons. Well, there are too many addons to figure out the offender. At least IE7 worked and did not mess up webpages like IE8. How do I uninstall IE8? I tried the usual method Add/Remove Programs but IE8 is not listed. Thank in advance. My email is jahind@gmail.com

• Anonymous
  March 25, 2008
  Excellent post! very well explained- thanks for fixing this ! This is a significant improvement over IE7.

• Anonymous
  March 25, 2008
  @Steven Yes off course. In IE7 you also don't have slices, etc. IE7 emulation ONLY emulates IE7 Trident.

• Anonymous
  March 25, 2008
  This is a nice improvement from IE7 (when using IE8 in IE7 emulation mode). Looking forward to IE7 B2

• Anonymous
  March 25, 2008
  Personally not a big fan of the new zoom.  I much prefered the old IE7 zoom. At the very least, I would like to have the option between the 2 zoom modes.

• Anonymous
  March 25, 2008
  The comment has been removed

• Anonymous
  March 25, 2008
  IE8's new zoom has a serious problem with the link below. The layout breaks a lot, with large gaps between lines of text and elongated banner images: http://www.456bereastreet.com Steven above wrote: "In Firefox, Wikipedia's logo doesn't zoom, it stays at the same pixel size." I think you must be using Firefox 2, which can only zoom text. In Firefox 3 the whole page zooms, including logos.

• Anonymous
  March 25, 2008
  Chris: That page has the same problem as Digg, use ie7 emulation for it...

• Anonymous
  March 26, 2008
  I'm not sure if it already is or not, but I think that adaptive zoom should be an option and that ie7 zoom should still be available. IE 7 zoom is more generic and correct although adaptive zoom is more user friendly in most cases. To take an example.... If I use adaptive zoom on this page the images are cropped because the right-hand menu is overflowing them. This wouldn't happen in ie 7.

• Anonymous
  March 26, 2008
  The comment has been removed

• Anonymous
  March 26, 2008
  Please provide legacy IE7 zoom as an option. Adaptive zoom is completetly unusable and it makes pages look broken. Do a search on ie8.ebay.com and set the zoom to 50%. Item listing header background is broken, because the background is shrinked, yet the header itself retains its original width. If you set the zoom higher than 100% the text will overlap the images. I understand the concept of adaptive zoom (it's great IMO) but it's just plain not doable.

• Anonymous
  March 26, 2008
  It's only beta1 and has lots of bugs. I like Opera-style zoom, so I like IE8's zoom :D If I just want bigger text, I use the Text Size menu. If I want to scrutinize every pixel on a page, I press Win+U and magnify it. IE8's image zoom is good, Firefox's image resampling need a bit more work.

• Anonymous
  March 26, 2008
  The comment has been removed

• Anonymous
  March 26, 2008
  IE8B1 - Third best at this feature though it's only the first beta. There are some moderate bugs with this feature effecting my site (at my site at the top right click "Site Options") where as some zooms will reorganize the percentage width based icons on the prompt in IE8B1 (Chat Room, Console, Contact, Options~Themes etc). Minefield (Firefox 3 Nightly Builds) - There are absolutely no bugs that I have noticed though I'm not saying this to be rude, it's just further along in it's current development cycle (of about three years I think for Gecko 1.9?) Opera 9.5 Beta - Second best at this feature though there is some element tearing in regards to the labels/input text elements on my site's side bar when zooming though overall it looks fair (though a bit rough). Safari/Webkit - The text gets larger but layout elements remain the same size so dynamic sites like mine look all screwy on even the first zoom! It's just the first beta and I like the direction you folks choose to pursue with this feature which is very intuitive. There are some bugs so I'm hoping that IE8 final zooms like Minefield is currently as it's the only browser currently doing it correctly on my site. Good work so far with this feature. :)

• Anonymous
  March 26, 2008
  Not too bad for a first draft, but the zoom needs lots of work still. Its a good effort so far, hopefully most of the fixes will make it into Beta 2. regards

• Anonymous
  March 26, 2008
  How can I download and install internet Explorer 8 and Adaptive Zoom?

• Anonymous
  March 26, 2008
  @Luis: You can install IE8 Beta, which includes Adaptive Zoom, at http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx

• Anonymous
  March 26, 2008
  @Luis Figuerado You can download IE8 Beta 1 from http://www.microsoft.com/ie/ie8. For more details on installation please see http://blogs.msdn.com/ie/archive/2008/03/13/installing-ie8.aspx You can use adaptive zoom via one of these ways -

1. UI Control in the bottom right corner of the status bar
2. Hotkeys - CTRL + SHIFT + = for zooming in by 10%; CTRL + SHIFT + - for zooming out by 10%.
3. Hold down CTRL and then use your mousewheel to zoom in/out
4. Access the zoom menu via the page command, or the view menu on the menu bar. Thanks!

• Anonymous
  March 26, 2008
  xlIBx5 hi super site thanks http://peace.com

• Anonymous
  March 27, 2008
  J H: As the Internet Explorer 8 Installer told you, you can find IE 8 under "Installed Updates" to uninstall.

• Anonymous
  March 27, 2008
  The comment has been removed

• Anonymous
  March 27, 2008
  The comment has been removed

• Anonymous
  March 28, 2008
  Why does IE only support CSS-import in 4 levels?

• Anonymous
  March 30, 2008
  If I zoom in IE7, the webpage scrolls back to the top of the page. I hope this is fixed in IE8.

• Anonymous
  March 30, 2008
  The thing I dislike with zooming, with its current implementation, is the magnification of images. It looks as if a simple point-order magnification is done, without any (or without any decent) image filtering. This looks very bad; it would be good if we had an option to change the zoom algorythm to use bilinear or bicubic (or exact unfiltered, for pixel art) resampling for improved quality on image zoom. This is the most visible on animated GIF files, which look absolutely horrible in the current implementation. Beyond the normal quality issues, the animation also breaks up and frames blend incorrectly. You can chalk this one up to the horrible anigif handling of IE, I guess, you guys really need to rewrite the image rendering code (png and jpeg are not perfect either - missing png gamma, and progressive rendering).

• Anonymous
  March 31, 2008
  I just UNINSTALL-ed it. It showed 90% of the web wrongly! Really bad. long live firefox/opera/k-meleon

• Anonymous
  March 31, 2008
  I miss my inline autocomplete.  Sigh... Please bring it back!

• Anonymous
  March 31, 2008
  @Arder/Beni Dhomi - This is why they call it Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview. Note the "fot Developers" and not "for Users" :-)

• Anonymous
  March 31, 2008
  @Arder/Beni Dhomi - This is why they called it Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview. Note the "fot Developers" and not "for Users" :-)

• Anonymous
  April 01, 2008
  Nice to see another great feature being copied.

• Anonymous
  April 03, 2008
  As Jordan Biserkov said earlier, I'm not at all sure that the decision to switch to new behaviour here was the correct one. Firstly, in IE7, the old function View|Text Size was still available, and very usable it was too. The IE7 Zoom did exactly what it said on the tin, and complemented View|TextSize, in that it magnified the layout, so was available in cases where the layout became unusable if larger text size meant that text wrapped awkwardly in small columns or if layout broken in other ways. IE8's new zoom behaviour is likely to deliver unusable layout on a number of sites so it will fail as a reliable accessibility enhancement. The results of such an algorithm are difficult for users to predict, which is bad from a usability point of view. (Functions should behave predictably in the UI.) Lastly, the new Ie8 zoom algorithm seems to me overlap View|TextSize's use cases too closely now. Under what circumstances would users need to use this rather than simply use View|TextSize? Of course it's a good idea to try to avoid horizontal scrolling. But I'm not sure that what you are trying to do is tenable. You need to think carefully about (i) what you lose in terms of reliability and predictability by making this dubious change wrt ie7, and (ii) test on small displays, complex multi-column layout. If this new feature were to be implemented without losing the IE7-Zoom, then I would have no objection to the introduction this new algorithm. If, as I am arguing, there is no right solution, provide both and then let users decide on which function works for them on a case by case basis. From checking out a few well-designed sites, the feature is currently so badly broken that it is clearly not yet near ready to ship, so real testing is not yet possible. MS needs to think very, very carefully about this.

• Anonymous
  April 03, 2008
  Cecil Ward - ditto, I couldn't have worded it better myself.

• Anonymous
  April 05, 2008
  The adaptive zoom seems pretty good overall (especially in IE7-mode), and vastly improved performance is greatly appreciated, but I personally prefer the IE7 style zooming, and thought it was one feature that stood out well from Firefox. If this were stuffed in as another checkbox in the Advanced settings dialog, I think we could all be happy on this one.

• Anonymous
  December 10, 2008
  Hi, my name is JP Gonzalez-Castellan and I’m the Accessibility Program Manager for IE8. The IE team has

• Anonymous
  January 08, 2009
  이 블로그의 좋은 점 중에 하나는 댓글이나 메일에서, 주제에 대한 세부 사항정보와 데이터에 대해 좀 더 깊이 있게 이야기할 수 있는 점입니다. 여러분의 질문이나 의견에 대해 보다 깊이

• Anonymous
  March 24, 2009
  안녕하세요. 레이아웃 팀의 프로그램 매니저 Saloni Mira Rai 입니다. 이 문서에서는 Internet Explorer 8의 줌 기능 변화에 대해 설명합니다. 줌을 사용하면

• Anonymous
  May 18, 2009
  As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom

• Anonymous
  May 18, 2009
  As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom

• Anonymous
  May 20, 2009
  As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom

• Anonymous
  June 08, 2009
  Делая Сеть больше. Часть 1: улучшения в масштабировании По мере того, как совершенствуются технологии