Surfin' Safari

Full Page Zoom

Posted by Dave Hyatt on Friday, March 21st, 2008 at 12:23 pm

WebKit now supports full page zooming on Mac and Windows. Because this feature involves new WebKit API, it’s not something you’ll see in nightly builds by default (since the Safari used with the nightlies calls the text zoom API). I have added a debug preference, though, that will cause the text zoom methods in WebKit to do full page zoom instead.

To try out full page zoom in a nightly, you can type the following in a terminal window:

defaults write com.apple.Safari WebKitDebugFullPageZoomPreferenceKey 1

We encourage people to try out full page zooming and file bugs on the feature.

26 Responses to “Full Page Zoom”

  1. stefanrechsteiner Says:

    Why is full-page-zoom the «main thing» these times? What about flexible-layouts with «everything is ‘em’»? Is it just me, or is this not one of the difference between fixed-width, liquid and elastic layouts? Why use a em-based elastic-layout, if the browser itself can zoom the whole page? Isn’t that miss the mark? Should the browser itself deliver the technique, or the standard-based css-layout?

  2. rk Says:

    An interesting feature. One thing I noticed was that on pages where 1px tall background images are used for faux columns or the like, the background image disappears when viewing at a size less than 100%. Hopefully that gets fixed soon.

  3. briana Says:

    Pretty cool feature. Worked relatively well with some sites I tried it with.

  4. michiel Says:

    @ stefanrechsteiner
    full-page zooming is a user feature, relative sized css is a developer feature.

    for me, em-based liquid layouts are not about resizing per se; it’s about a layout that works with different font sizes. wether that (different sizes) is caused by a preference, limitation or choice of the user and his browser doesn’t matter to me.

    and; full-page zoom also zooms background images if I’m correct, which a font-size resize does not.

  5. squareman Says:

    Please please please, in the end, allow for two forms of control on this. There are times (most) that I prefer text-zoom. Then there are times that I’d want page zoom. Please don’t make it an either situation, make it a both.

  6. squareman Says:

    PS: and by “both” I mean: there’s times where I wish I could not only page zoom, but ALSO text zoom.

  7. solipsism Says:

    This has been in WebKit build r31157 since Wednesday, right?

  8. phill Says:

    There is one thing that really bothers me with zoom and text-size.

    1. I don’t want the whole site to be zoomed, just the text that I’m trying to read.
    a. What would work perfect for me is if I can hover my mouse over some text and resize just that text. In this way the layout of the page will not be broken (in most cases). I don’t want to zoom menu bars or sidebar. I don’t want to zoom the graphics. Just the content that I’m reading.
    b. News type sites are notorious for having very, very small text on the page.
    2. The zoom is always too big of an increment.
    a. I just need to zoom a little bit, but the zoom jumps to super huge when used. It’s the same in all browsers. Maybe a way to configure the percent that it’s zoomed would be nice.

  9. str Says:

    phill got a nice idea ’bout a nice user-experience-feature: mouse-over select a text, then let this text display in a floating-’old-inspector-designed’-window where the text itself and a size-scroller is displayed … here you can change the text-size with the scroller and zoom the text in and out, whit-out effecting the layout cause only the text is shown! :-)

  10. eAi Says:

    Interestingly, most pages seem to work well, but the blog does not – the background gets vertical lines between each repeat.

  11. solipsism Says:

    Will it be possible to make SVG vector instead of rastering with this feature?

  12. Chris Bentley Says:

    @squareman “there’s times where I wish I could not only page zoom, but ALSO text zoom.”

    Yes there may be instances where I wish that be possible but the new feature passes the 80/20 rule for me and hope the simplicity of the current implementation is retained.

    As a user: I like that the new behaviour simply replaces the old — (ie same key stoke, same menu items). As an old fart with failing eye sight I surf with fingers planted on command-plus by default and text-zoom 60% of sites I visit. The result of the old text-only zoom method was often just as hard to read because of large font-sizes combined with restricted formatting and poor wrapping — especially in applications. For me the new style zoom now behaves as expected most of the time.

    As a web developer: I think having both methods available in the browser UI like IE7/8b might be complicating the issue, I’m happy to continue to provide targeted ‘text-only’ zooming as needed via scripting as I do now.

    ALSO the example in the previous article “background-clip: text” suffers from “pixel cracking” at some zoom sizes – here is screen shot

  13. eigentone Says:

    Should WebKit implement media=”zoom” so that we can adjust our style in full page zoom?

    Relevant: http://joeclark.org/access/webaccess/zoom

  14. The_Decryptor Says:

    Not every person using the zoom feature will be using it because they have visibility problems (or some other disability)

    I mainly use it to make sites with smaller designs larger, I think the last site I used it on only took up 15% of the width of my screen, and used a small font. There was nothing particularly wrong with the design (I could read it fine), But when I read long articles I like to lean back in my chair, and I couldn’t with that layout.

    If I got thrown to a drastically different layout just because I zoom in a bit, I’d be really annoyed, although I can certainly see the benefits of providing that option for somebody who needs it (But More likely than not, they would need it all the time, not just for zooming, so keeping that stylesheet to that mode would probably be more limiting)

  15. Macker Says:

    Speaking of visibility problems: the interface on Leopard is just too darn dark! Is there an app which I can run to lighten it up for the entire interface, not just Safari & WebKit?

    Thanks!

  16. Brad Says:

    I hated that I could no longer do text zooming in FireFox 3 without zooming the whole damn page (the latest beta added text zooming back in as an option). If I want to see fat pixels and all the ads and everything get bigger, then I’ll just control-scroll, as I can in any app.

  17. timofonic Says:

    Please, are there available screenshots of this feature?

    There are tons of pages that wastes (tons) of space at left and right. Here are some examples

    http://www.osnews.com
    http://www.elpais.com
    http://www.scummvm.org
    http://webkit.org
    http://www.phoronix.com
    http://www.gonintendo.com

    I don’t care if the webmaster liked to be showed in that way, I think pages must adapt to user needs and not the contrary. I would love a way for not suffering the empty spaces at the sides and even people could show the most information possible on the screen, this could be specially interesting for people with 16:9 screens.

  18. timofonic Says:

    Please, are there available screenshots of this feature?

    There are tons of pages that wastes (tons) of space at left and right. Some examples are osnews.com, elpais.com, scummvm.org, webkit.org (this site), phoronix.com and gonintendo.com

    I don’t care if the webmaster liked to be showed in that way, I think pages must adapt to user needs and not the contrary. I would love a way for not suffering the empty spaces at the sides and even people could show the most information possible on the screen, this could be specially interesting for people with 16:9 screens.

  19. wmertens Says:

    @Macker: Try going into your Display Preferences, Color tab and calibrating your display. Maybe you need to play with gamma a little. I don’t think the interface is dark at all?

    @Brad: The reason, IMHO, would be that text in smaller columns is easier to read. Try reading some text files in a really wide window, and then with a thin window. Observe how the thin window reads faster.

    On the subject: I like full zoom on my iPhone but I prefer text zoom on my laptop – I’ll use the Ctrl+scrolling zoom if I want to look at a picture up close.

    Now if Safari could provide its own ctrl+zoom equivalent that also redraws SVG and other vector content, that would be interesting…

  20. str Says:

    @timofonic: keep in mind, that to long line length aren’t user-friendly … have a look at http://webstyleguide.com/type/lines.html

  21. PhyLaw Says:

    Shouldn’t the zoom information for a given site be saved? Unless I am missing something, it appears that a site need to be re-zoomed each time you visit it in a new tab or window or after quitting and reloading webkit.

  22. The_Decryptor Says:

    @str: I’d say that’s a personal preference, I prefer reading long lines of text over short lines.

  23. timofonic Says:

    @str: Sorry but I still think that’s a stupid modern fashion. I suffer that even on instant messaging and have it too. I need nobody to say me what’s better, where’s the user likings?

  24. phill Says:

    All I know is…I shouldn’t have purchased the Mac Book Pro with the High Res screen. I can barely read the text on this site without zooming. And zooming just makes everything look bad.

  25. timofonic Says:

    @phill

    Yes, the problem of margins is specially PITA for users with widescreen monitors.

    I need nobody for saying me what’s better or worser, user must take control on how things must look on it’s system and not the programmer/webmaster. Customization to the likings of each user is the key.

  26. villeneuve Says:

    Hi,
    the same feature is available on windows webkit? If yes how can I enable it?
    Thanks.