Firefox 3, or, technically, Gecko 1.9, comes with support for full page zoom. It works by scaling CSS pixels when the page is rendered – from the perspective of JavaScript or CSS there is no difference between a page zoomed to 200%, 50% or 100%.
I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case.
The problem with this solution is that it does not detect the zoom level when the page is first loaded.
Another solution I found relies on Flash. Not so much a problem for sIFR, for which I started this little investigation, but not the best solution either. Flash can be configured not to scale with its container page by setting Stage.scaleMode = "noscale";. The Stage.height value gives the height of the Flash movie as its actually rendered by the browser. In other words, this value is not affected by page zoom. The height assigned to the Flash movie <object>, as it exists in the DOM, however, is affected by the zoom level. Simply dividing Stage.height by <object>.height gives the zoom level, even on page load. See test case.
Of course, these two methods are hacks. It would be great if the browser can be queried for the zoom level.
Addendum: I just tested both approaches in Opera and IE 7. The percentages trick works in Opera, but not in IE. IE’s page zoom is quite a hack anyway, so that’s to be expected. The Flash solution works in all browsers, and is far more precise than the percentages approach. Definitely the way forward I’d say!
It would be even better if page zoom worked so well that there would be no need to query the zoom level. Why do you need it for sIFR?
sIFR passes the CSS pixel width to Flash, which doesn’t take the zoom level into account, so the text is the wrong size. I also can’t use Flash’s scale mode because it doesn’t work properly with sIFR. Fundamentally this is a Flash issue, not really a browser issue.
This one works in IE.
Yep, forgot to mention it. The code could use a few improvements though.
hello! I need scalable sIFR fonts when I scale my Safari window. Anybody can help me? Thanks.
Editor’s note: Safari doesn’t do full page zoom yet, and I do not intend to add font resize support to sIFR. So, that’d be a no from me.
I also can’t use Flash’s scale mode because it doesn’t work properly with sIFR. Fundamentally this is a Flash issue, not really a browser issue… ispanyolca tercüman
Editor’s note: sIFR 3 supports page zoom since the second beta.
There is of course another problem with the first method, which is that the bug will probably be fixed soon anyway.
I’ve been playing with firefox 3 and IE8 since the betas launched and I know which one I’m liking most!
Full page zoom is coming for Safari. It’s in the Webkit nightlies and works quite nicely. For most pages I’ve visited, Flash zooms fine.