Summary

By default, Internet Explorer is unable to increase font-sizes specified as pixels. Microsoft's proprietary zoom property can resize text regardless of the units, and also resize images. This article demonstrates the use of the proprietary zoom property to create a zoom bookmarklet to empower IE users.

Author: Gez Lemon

Contents

Zoom Capabilities

Both Opera and Gecko based browsers like Firefox can zoom text, regardless of how the font-size is specified, which is useful for people with visual impairments. Opera goes one step further in also allowing graphical elements to be resized too. As some authors insist on putting important information inside images, this is a really useful feature. Unfortunately, IE is only able to resize text when the text size is specified as a percentage, or an em.

[Back to the contents]

Turning it into a Bookmarklet

I read an interesting blog today about how IE can zoom pages like Opera, using the proprietary zoom property. It's limited in that it only works in IE5.5 and higher (not sure about the Mac). At first glance, I wasn't that impressed as it's a proprietary property and goes against the standards, but it's a useful technique to know. It then struck me that it would make a useful bookmarklet, which could be applied to any page when viewed using IE. Drag and drop the following bookmarklet to IE to test it out.

Zoom Bookmarklet (only run with IE 5.5 or higher).

[Back to the contents]

Slayeroffice - Improved Usability

Shortly after this entry was published, Steve of slayeroffice suggested some features that would make the bookmarklet more usable. Steve suggested the following improvements:

Steve's resulting zoom page bookmarklet makes the initial idea far more user friendly. Armed with the improved bookmarklet, the next time anyone visits a page in IE that has important information in small images, or text size specified in pixels that is too difficult to read - they can invoke the bookmarklet, and use the keyboard to control the text size. If you try the bookmarklet, it's worth noting that the +, -, and * keystrokes are from the numeric keypad on the keyboard, so you'll need Num Lock on. For obvious reasons, it only works with Internet Explorer (with a polite message if you attempt to run it in another browser), and requires version 5.5 or above. Excellent work, Steve.

[Back to the contents]

Category: Accessibility.

Comments

  1. [ie-zoom.php#comment1]

    Nice - but why bother when firefox can do this anyway?

    Posted by Max on

  2. [ie-zoom.php#comment2]

    Nice - but why bother when firefox can do this anyway?

    Wouldn't the world be a great place if everyone used the latest standards compliant browser? *smile* Unfortunately, Firefox can't resize images, but Opera can.

    There are loads of reasons why people would have to stick with Internet Explorer. For example, some people may work for organisations where they can only use a certain browser. In cases like that, the bookmarklet could be useful.

    Posted by Gez on

  3. [ie-zoom.php#comment3]

    Yesterday I was messing around with a bookmarklet to parse through the style sheet objects and the inline styles of a document and increase the font sizes by one or decrement by one in IE - worked great until I invoked it on a site of any substantial size -- then it was just a lumbering beast and completely unusable.

    This morning I remembered IE's zoom style and the dusty light in my head went off - but a quick google search led me here - very nicely done!

    If I may make a suggestion or two - it would be nice if the user could use the plus and minus keys to increment and decrement the zoom (by 0.1), and hit another key, say the asterix, to reset the zoom rather than entering the zoom factor manually. I'd also set a max zoom of 2x and a minimum of 0.2 or so to prevent them from making IE cry.

    steve

    Posted by Steve on

  4. [ie-zoom.php#comment4]

    If I may make a suggestion or two - it would be nice if the user could use the plus and minus keys to increment and decrement the zoom (by 0.1), and hit another key, say the asterix, to reset the zoom rather than entering the zoom factor manually. I'd also set a max zoom of 2x and a minimum of 0.2 or so to prevent them from making IE cry.

    Thanks, Steve. They would be really useful additions. For those that believe in empowering users who are either stuck with, or determined to stick with, IE; a bookmarklet like this could really improve the usability of the browser.

    Posted by Gez on

  5. [ie-zoom.php#comment5]

    Agreed - you're doing A Good Thing with this bookmarklet.

    Posted by Steve on

  6. [ie-zoom.php#comment6]

    I don't intend to develop it further, I just thought it would be a good idea for empowering users. If you, or anyone else, wants to develop it further to make it more usable, let me know and I'll provide a link to the bookmarklet.

    Posted by Gez on

  8. [ie-zoom.php#comment8]

    Thought ye might be interested

    I am; that's very cool! It suffers from the limited scale options afforded by IE, but there's not much you could do about that. Nicely done.

    Posted by Gez on

  9. [ie-zoom.php#comment9]

    Thanks Gez, yeah the IE limitation is a shame, but you can still get full effect in NS and Firefox, only thing I havnt figured out yet is forms (Im new to this whole lark)

    Posted by Colin Larkin on

  10. [ie-zoom.php#comment10]

    I wanted the zoom to be permanent (persistent), so I made a file called style.css with this inside:
    body{font-size:48pt; zoom:1.3}

    Then I went to Tools -> Internet Options... -> Accessibility... -> Check Format documents using my style sheet, Browse to where the style.css is saved.

    Save and restart browser.

    Posted by fhuang on

  11. [ie-zoom.php#comment11]

    Oops, that 24pt should probably not be there.

    File style.css:
    body{zoom:1.3}

    Posted by fhuang on

Comments are closed for this entry.