ZOOM is good for print.css

July 8, 2009

Part 2 in my series on print.css

While one of your co-workers is in the middle of an annoying IE6 bug, say “zoom one” to them and chances are they will laugh (or maybe cry). The proprietary IE css ‘zoom‘ property has its roots in accessibility and well intentioned functionality however now it is mostly used as a IE6 hack to give an element the ‘has-layout‘ property.
It’s usually used in a moment of complete desperation at the last minute when nothing else is working; “dude…try {zoom:1}…. holy shit that worked!”.

Is this what zoom is actually good for?

Recently in my travels along creating a print style sheet for our entire site, I think I may have found another more legit and helpful use of zoom. I found that my pages were printing fine by default in firefox and safari, then in IE everything was big, fugly and going outside the margins of the page. Here is something for your toolbox if you ever need it. In either your head tag, (or external print.css style sheet) try:

<style type="text/css" media="print">
body {
zoom:75%; /*or whatever percentage you need, play around with this number*/
}
</style>

Only IE understands zoom, and all other browsers ignore it so, when you goto print from IE the page will actually be reduced nicely to fit by 75%.

Leave a Comment

Add a Comment