IE Can Zoom Pages Like Opera

A bit of CSS enables text and graphics to be enlarged, including pixel fonts!

25th July 2004 · Last updated: 5th October 2016
 

Comments


If you thought Opera was the only browser capable of zooming layouts, read on. Browsers like Firefox can enlarge text on a web page, but not the graphics as well. Hence they can spoil the existing layout as text expands, requiring more space on screen. Opera has always had a brilliant zoom feature which enlarges everything at once, graphics as well as text, so the layout is preserved. But what about the majority browser, IE?

IE can also enlarge text, but not graphics, using its built-in menu. However the range isn't great, and it doesn't resize text set in pixels. Since that method is used by an awful lot of sites, that's bad news for the user.

But now for some good news. In an attempt to cure a long list of IE bugs, Claire Campbell recently posted online a CSS trick to make IE behave. She wrote:

simply putting * {zoom: 1.0;} at the start of your stylesheet would cover a lot of these bugs..

I'd heard of the zoom filter before, but always thought it only applied to images. There is a description of zoom in the MSDN Library, which also gives a demo. I've seen this demo before, but never picked up on one very important fact on display: Zoom also affects text! What's more, it affects almost every HTML element as well, meaning this offers a way to make IE zoom a whole page, just like Opera.

The accessibility benefits should be obvious. Not only that, but using zoom allows fonts set in pixels to be resized! Finally a solution to that bugbear. What's more - get this - zoom also resizes the scrollbars! (You can get some very weird results at enormous zoom sizes, where the scrollbars cover the screen, or disappear completely.)

Zoom would be a superb solution to enlarging layouts, were it not for a few important points to note. Firstly, zoom does not work in IE5.0. Though IE5.5 and IE6 are happy with it. However, for some reason IE6 chooses to remove list bullets and numbers if zoom is used. Not only that but IE chooses to resize HTML elements at different sizes. So you can't use zoom as it stands to get a consistent size increase across your layout, as text appears larger inside certain elements and even larger in others!

To counteract this I've made a demo using most HTML elements except those deprecated (with the exception of <font> as this is still found on many pages). Increase the value of the zoom style in the code and see what happens. I will try and make a further demo that styles groups of elements separately, applying a different zoom value as required to make the page look consistently like one zoom size was used. This could then be added to a live web page for IE users to resize the layout. (I'm not sure it will work perfectly as nested elements need to be considered, and not everything gets zoomed correctly. (Drop-down menus merely get widened, for instance.) Despite this, I believe this could be a major step forward for IE users.)

I just wish Microsoft had fine-tuned this feature and brought out a proper zoom menu in IE. But all is not lost, as Tony Schreiner has made a post showing how to add such a menu. He also mentions a "super-secret registry tweak to make IE do extra scaling in high DPI" that was published in the MSDN Library. I haven't tried this but it could be another approach. Who knew IE was capable of all this? A pity work on the browser was allegedly halted for such a long time, or a fully resizable zoom feature could have been in IE6 today. They were nearly there...

Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Chris Hester:
    D'oh! It was all so simple in the end. To get a consistent zoom across nearly all elements, just style the body tag! No need to separately style different elements! This also restores list bullets.

    Posted on 26 July 2004 at 10:27 am.
  2. Jean-Fabrice RABAUTE:
    Hi,

    You can also use the DebugBar toolbar (http://www.debugbar.com) which adds the zoom feature to IE and automatically handles the zoom, including frameset pages.

    Best Regards.

    Posted on 27 October 2004 at 8:30 am