Agile Ajax

Keeping up with Firefox 3: The agony and the ecstasy of full page-zoom

I've been playing with the page-zoom feature in Firefox 3 Beta 3. Thanks to the hard work of the Mozilla folks, Firefox is now the third major browser (behind Opera and IE7) to support this feature. (Safari, of course, supports page zoom on the iPhone but not yet on the desktop.) I don't know whether to be elated or annoyed.

A little background: For years, browsers have allowed users to scale the font-size of any web page using built-in browser controls. The text would get bigger, but other page elements wouldn't. Increasing your font size wouldn't affect the layout of the page at all. If sites weren't careful about how they built their CSS, absolute positioning and fixed-width elements would conflict with the zoomed-up font sizes. The result wold be pages where the main content was readable, but navigational and chrome elements looked grotesquely distorted or in some cases disappeared into the seams of the CSS (see photo below).

New York Times homepage scaled to 170%

With full page zoom, however, the entire page scales geometrically - including the images and the layout. The proportions of the entire page remain fixed as you zoom up. This allows the look and feel of the page to remain consistent, but it may cause the content to scroll horizontally. Previously, this sort of effect was possible, but it relied on carefully-written em-based CSS that was difficult to develop and even harder to maintain. I helped implement such a CSS codebase for Ebookers, a European subsidiary of my former employer Orbitz Worldwide.

Whether it's enabled by the front-end code or the browser itself, I find full page zoom something of a blessing and a curse - at least as a user. I'm one of those people who constantly hits command-plus to bump tiny fonts up to a readable size on sites across the web. I even use NoSquint, a Firefox extension that remembers my font-size settings on a site-by-site basis. I'd like to think full page-zoom will make my eyesight issues less of a problem, but that's probably not the case. From now on, instead of complaining that layouts break when I scale up the font size, I'll be complaining that layouts require horizontal scrolling when I scale up the entire page zoom. Making a site's text readable will continue to have its drawbacks, but they'll be different drawbacks.

As a developer, though, the advent of full page zoom is more of a blessing. Once Firefox 3 and IE7 become the dominant browsers, I will probably never again have to build an em-based CSS layout. Sigh. Choosing a career in programming means watching your most hard-won skills become obsolete over and over again. Then again, this hard-won skill was tedious to employ. Posting about this same issue a couple of months ago, Ryan Tomayko lamented the unmaintainability of em-based CSS, declaring that "Full Page Zoom Is For Sissies." He's not wrong.

One wrinkle in Firefox's page-zoom implementation: The Mozilla team has completely done away with the old text-zoom behavior. Firefox users who are used to scaling their fonts with command-plus or command-minus will find that the same keystrokes now zoom the entire page rather than just the font size. IE7, by comparison, maintains IE6's user interface for text-zoom and provides a separate UI for controlling page zoom. Blogger Peng is up in arms about this development, and I agree completely.

Comments: 2 so far

  1. Text zoom is an option in the nightly builds again and will be there in the next beta and presumably in the final release.

    - A

    Comment by Asa Dotzler, Wednesday, February 27, 2008 @ 6:12 pm

  2. I like the page-zoom in IE7 much better for this reason, there is absolutely no reason to change the default behevior for mentioned hotkeys.

    However, the EM based layout isn’t actually dead, there are still clear benefits. As long as the user change the font-size, and don’t use the page-zoom.

    Comment by BlueBoden, Saturday, March 22, 2008 @ 8:08 pm

Leave a comment

Powered by WP Hashcash

About Pathfinder

  • We design and build extraordinary applications for companies looking to make the next great idea a reality.
  • learn more

Topics

WordPress

Comments about this site: info@pathf.com