How does scribd implement zooming?

Question

Scribd's zooming functionality is very impressive. All the page content including images and text are zoomed proportionally when you click on their + and - buttons.

For example, try it on http://www.scribd.com/html5.

How do they do this? It doesn't seem to be as simple as controlling the browser zoom (although controlling browser zoom itself is not simple if not possible at all!)

A related question would be how they implement their 'full screen mode'. This question was asked before but that was two years ago when they were still using Flash.

Answer 1

I'd suggest that it might be a simple transformation of a canvas element, but looking at their source this does not appear to be the case.

Instead, it looks like the "Zoom In" function only affects the img tags on the page, so I'd say that probably they are just dynamically modifying the width and height attributes for those tags. It's not a very sophisticated approach, and certainly doesn't rely on anything introduced in HTML5.

Edit:

Chrome's developer tools are excellent. If you observe the DOM between zooms, it's easy to pinpoint how the effect is being implemented. Here's what the markup looks like in the page's default state:

<div class="outer_page only_ie6_border" id="outer_page_1" 
     style="width: 516.8000000000015px; height: 400px; ">
      <div class="newpage" id="page1" 
           style="width: 902px; height: 697px; 
                 -webkit-transform: scale(0.5729490022172966); 
                 -webkit-transform-origin-x: 0%; 
                 -webkit-transform-origin-y: 0%; ">
      ...
</div>
</div>

...and after zooming out once:

 <div class="outer_page only_ie6_border" id="outer_page_1" 
     style="width: 646.0000000000018px; height: 500px; ">
      <div class="newpage" id="page1" 
           style="width: 902px; height: 697px; 
                 -webkit-transform: scale(0.7161862527716206); 
                 -webkit-transform-origin-x: 0%; 
                 -webkit-transform-origin-y: 0%; ">
      ...
</div>
</div>

...and after zooming out again:

<div class="outer_page only_ie6_border" id="outer_page_1" 
     style="width: 807.5000000000023px; height: 624px; ">
      <div class="newpage" id="page1" 
           style="width: 902px; height: 697px; 
                 -webkit-transform: scale(0.8952328159645258); 
                 -webkit-transform-origin-x: 0%; 
                 -webkit-transform-origin-y: 0%; ">
      ...
</div>
</div>

So it appears that they have implemented their zoom effect by doing two things:

1. Increasing the width and height of the container div.
2. Using the webkit-transform CSS property to scale the contents up or down as needed.