Page Zoom in IE7

IEBlog

Windows Internet Explorer Engineering Team Blog

Page Zoom in IE7

  • Comments 90

Hello again, I hope you have been enjoying the IE7 Beta. Today I want to briefly tell you about one of the cool new features we have developed for IE7: Page Zoom. This feature allows the user to effectively zoom in on a web page to make it easier to see and read. Studies have shown that approximately 1 in 4 people have some sort of vision impairment that makes reading on the web more difficult. I happen to be in that 25% so I am very excited about this feature and how it makes the web easier to read.

The way we zoom in IE7is a little different than other products, so let me briefly explain how it works and our design goals. The primary goal of the page zoom feature is to maintain the intended design of the webpage (the user shouldn’t notice any change in the layout of the webpage) while improving the readability of the page. This means we do not re-layout the page after we zoom. If you change the size of the page, we will re-layout, but then apply the zoom afterwards. So when you zoom in on a page, you may see horizontal scroll bars (even if you try to widen the window). We have gotten feedback that our customers would like a button that causes the zoomed page to “Fit to width” to eliminate the horizontal scrollbar. We are evaluating that possibility now. Another note is that we zoom using the upper left as an anchor point. This does create some issues with center justified web pages that we are still working on.

In addition to making the text on the page larger and more readable we also improved the quality of text in images (as well as overall image quality) when images are scaled up. This is a dramatic improvement from IE6.           

Here is a portion of a button with text rendered in IE6 at 100%

Button at 100%

Here is the button rendered in IE6 scaled up to 400% using nearest neighbor interpolation.

Button at 400% in IE6

And here is the same button rendered in IE7 scaled up to 400% using a bi-cubic interpolation algorithm

Button at 400% in IE7

As you can see, the results are much nicer and more readable. This feature should make the overall reading experience on IE7 much nicer and easier than it was before.

You will find the UI for page zoom in the lower right of the window.

User Zoom UI

Clicking on the zoom button will cycle though 3 common zoom states (100%, 125%, and 150%) and clicking on the arrow will allow you to choose from a wider variety of preset zoom states ranging from 10% to 1000%. There is also mouse wheel access using the Ctrl key as well as keyboard access using the Ctrl key along with the + and – keys to increment and decrement the zoom % by 10%. You can restore the zoom state to default by Ctrl + 0 or Ctrl + * (on the number pad)           

I hope you found this interesting and informative and please let us know if you have any feedback or questions.

Thanks!

 - Peter

  • Loading...