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?
The scale property in CSS resizes an element's width and height in proportion. So, if we have an element that's 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of . 5 decreases the dimensions in half, resulting in 50 pixels square.
This rule allows you to specify different style for different media. So, you can define different rules for screen and a printer. The example below specifies different font families for screen and print. The next CSS uses the same font size for both screen as well as printer.
Developer Tools. The DevTools ( F12 or Cmd/Ctrl + Shift + I ) can emulate print styles, although page breaks won't be shown. In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.
There is Zoom:
http://reference.sitepoint.com/css/zoom
And moz/webkit-transform:
http://help.dottoro.com/lcebdggm.php
<style type="text/css" media="print">
body {
zoom:75%; /*or whatever percentage you need, play around with this number*/
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With