Print Scale by CSS

Question

On IE 8 and Firefox (3.6 and 4), if you go to Print Preview, you adjust the Print Scale by a a percentage or use Shrink to Fit. Does CSS have a property like scale:50%; or something to adjust the print scale?

Euphony

Answer 1

There is Zoom:

http://reference.sitepoint.com/css/zoom

And moz/webkit-transform:

http://help.dottoro.com/lcebdggm.php

Sheley

oddly enough, zoom works differently on IE 8. in IE 7 it works the way I want it to: makes everything inside the body larger or smaller. in IE 8 it expands or contracts the body itself by whatever percentage you pick. I'm not sure which implementation is the bug. – Euphony

Heads up that CSS combined with printing has always been buggy in most versions of IE. – Sheley

sitepoint.com link is dead. But this is what worked for me: @media print { html {zoom: 75%;} } – Pappy

@Sheley If you are still around, can you write out what the link said? I'm interested in this answer. – Semitrailer

@Semitrailer are you asking me if I remember what a page I looked at 10 years ago had said? :) Alas, my brain is 10 years older and not what it used to be. But, I assume it was referencing developer.mozilla.org/en-US/docs/Web/CSS/zoom but as that page notes, it never really became a standard. – Sheley

@Sheley :) Same here, at my age, I struggle with remembering or refinding random pages I found a few weeks ago. On the other hand, if you continue using custom print settings, you might have an update that could benefit others. I have offline browser tools that I use with my company that would really look much nicer if I could override browser defaults and when people create new questions the administrators foolishly shut them down as already answered because a 10 year old link that was once a useful solution. – Semitrailer

For me, ZOOM only was working for printing when set on the HTML tag. – Pericope

@Pericope It doesn't seem to work for me neither with the body tag, nor with the html tag on Chrome 109.0.5414.74. Any ideas if there is a new solution for scaling the webpage on print? – Isoprene

Answer 2

<style type="text/css" media="print">

body {
  zoom:75%; /*or whatever percentage you need, play around with this number*/
}

</style>

Campo

Answer 3

Since zoom or -ms-zoom doesn't work the way I expected it to on IE8, I ended up fiddling with the font-size and tr sizes. Hopefully MS makes a zoom that works like the Print Scale/Size functionality in the Print window from the browser.

Euphony

Answer 4

I know it has been many years since this question was asked, but I came across it via a recent Google search. As I also posted here, I discovered that another way you can scale a page for printing is to manually specify the width of the body, like this:

@media print {
    body {
        min-width: 1000px;
    }
}

(This assumes that your content is "responsive" and reacts to you changing the width of your browser window.)

The content of the page will be scaled when printed — a larger number of pixels will make printed content appear smaller, and vice-versa. I've only tested this roughly in Windows Chrome and iPhone Safari, but both of these seem to scale the output so that the entire body fits the width of the printed page.

The benefit of this method is that it's likely to be more consistent across devices than using zoom.

Hearth