Geek Answers Handbook

Print accurate measurements in Chrome

When measurements are in centimeters or inches for an element, it prints exactly the same size from Firefox and Internet Explorer. Chrome, on the other hand, makes elements larger.

In any case, to do the job with a Chrome printer with exactly the specified size, or is that what I just need to live with?

eg.

<!doctype html> <html> <head> <style type="text/css"> div.box { border: 1px solid black; width: 5cm; } </style> </head> <body> <div class="box">box</div> </body> </html>

The above code prints the exact 5 cm (on my printer) in Firefox and IE, but it prints about 5.5 cm from Chrome.

+8
html css google-chrome printing
source share
4 answers

For Chrome, just set the print margins to and set the body to the width of the paper, minus the margins.

eg. For an A4 page, the width is 210 mm.

So, for 1 inch (approximately 2.5 cm) margins you can do the following

 @media print { @page { margin-left: 25mm; margin-right: 25mm; } body { width: 160mm; } }

Left, right and body widths should be up to 210 mm.

For writing, you should use 1 inch margin and 6.5 inch width on the body.

+1
source share

A solution with a divider width of 100% does not work for me in the current version of Chrome, but it works for A4 paper:

 html, body { width: 210mm; }
+3
source share

I also found this problem.

After playing with MANY lost pieces of paper, I discovered that Chrome is trying to scale HTML.

For example, add the full width divider to your sample below and it will resize the window correctly because you are asking Chrome to make the field 100% of the page and thus forcing a 1: 1 scale page.

 <!doctype html> <html> <head> <style type="text/css"> div.box { border: 1px solid black; width: 5cm; } div.forcer { width: 100%; height: 1px; border: 1px dotted green; } </style> </head> <body> <div class="box">box</div> <div class="forcer"></div> </body> </html>

Unfortunately, when I tried this, it did not fix the height problem, but also I could not make the 0px field without losing the correct scaling.

By the way, look at how this affects print sizes. A.

 <!doctype html> <html> <head> <style type="text/css"> div.box { border: 1px solid black; width: 5cm; } div.forcer { width: 200%; height: 1px; border: 1px dotted green; } </style> </head> <body> <div class="box">box</div> <div class="forcer"></div> </body> </html>

In a nutshell: the print capabilities in Chrome are shocking!

Firefox works much better for printing, but it works much slower.

+2
source share

I confirmed that I had the same problem using your HTML, even when trying to specify some CSS rules to get rid of obvious suspects such as padding and fields. From the research I did, it looks like you are simply dealing with inconsistent browser standards when transmitting media requests. If possible, I would recommend conditionally styling the field based on the browser.

It seems that another aspect is that not specifying a Doctype (which in any case does not make any difference in development) can lead to inconsistency.

You can go to this topic to learn more about the problem:

Firefox and webkit dimensions for media queries based on width

0
source share

More articles:


All Articles