Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print Scale by CSS

Tags:

css

printing

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?

like image 211
dotnetN00b Avatar asked Apr 19 '11 14:04

dotnetN00b


People also ask

How do you scale in CSS?

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.

What is @media print CSS?

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.

How do you print using CSS?

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.


2 Answers

There is Zoom:

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

And moz/webkit-transform:

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

like image 93
DA. Avatar answered Sep 19 '22 08:09

DA.


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

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

</style>
like image 38
Waruna Manjula Avatar answered Sep 20 '22 08:09

Waruna Manjula