Internet Explorer 8 and Adaptive Zoom

[NewsBot]

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.

http://ieblog.members.winisp.net/images/IE7Zoom.png

Here is the same page zoomed to 150% in IE8 Beta 1:

Text is now being wrapped and no horizontal scrollbar is needed.

http://ieblog.members.winisp.net/images/IE8Zoom.png

 

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

http://blogs.msdn.com/aggbug.aspx?PostID=8334758

 

More...

 

 

View All Our Microsoft Related Feeds