How to make HTML pages print at a consistent size from Chrome?

Question

I'm designing a set of HTML pages to be printed, and I want elements of the pages to end up the same scale as each other. For example, there's a class of div whose width is defined as 200px wide appears on each of several pages. I want it to appear precisely the same size when each page is printed (suitable for, e.g., cutting out and superimposing).

I'm using a few things that work best in Chrome (mainly the CSS zoom rule to have smaller copies of elements elsewhere), so ideally I'd like to keep using Chrome. (This would be easier in Firefox, because it has an explicit scale ratio in the print dialog.) But it seems that on Chrome, keeping the same element a consistent size when printed from different pages is far from easy.

Chrome's PDF generation (which is what printing from Chrome does under the hood) appears to pick some section to define the page's width, and scale the rest of the page based on that. Or perhaps it tries to set the page size to fit an "optimal" number of elements on one page. If the outside framing elements of each page aren't the same size in all cases, then it seems like elements with screen size 200px can come out anything from 3-4 cm down to 1.5-2cm or maybe smaller.

Just using @page size doesn't help: I've got this CSS and it's not making any difference:

@media print {
  @ page size: 297mm 210mm 
}

Does anyone have any thoughts for how to get things to print out with consistent sizes?

One extreme workaround I could apply is to make them all parts of one big HTML page, and use Javascript to mark certain parts as the only parts to be printed... I'm not even sure if that'd work, and it'd be rather cleaner to keen things on a few different pages. So are there any other ideas?

Solution 1

I found a solution. The key is to ensure that in each document, the "logical page" that Chrome splits elements into for printing is the same size. E.g. if one document has lots of 200x200px squares and Chrome decides to group them in a rectangle 5x4 to print landscape, then you need to make sure that Chrome will print every other consistent document split into elements of size 1000x800px.

For documents that are simply a number of spans or inline-block divs in sequence, it suffices to have a div set to exactly your chosen width (1100px), and ensure that that div occupies the full page width in print preview. Then just make sure your CSS contains something like:

@media print {  
  @page {
    size: 297mm 210mm; /* landscape */
    /* you can also specify margins here: */
    margin: 25mm;
    margin-right: 45mm; /* for compatibility with both A4 and Letter */
  }
}

If this isn't sufficient, then putting everything inside one or more divs with fixed size (width: 1100px; height: 800px; overflow: hidden;) does the job, as a way to force Chrome to split into the pages you want (and therefore keep elements the same size when printed).

Solution 2

Allow different sizes, but control each size's margins and design!

When first answering I was using Chrome 32.0.1700.107 m

The W3 CSS3 standard established for page sizes works great with the "SAVE AS PDF" option directly from Chrome's plugin on the printing interface.

I have had years of trouble with different interfaces and go-around solutions for different proyects (for example: generating PDF's directly from server which was too heavy in processing and messy in code, or telling users to use windows printing interface, etc). This one is a great solution for me and seems to be definitive!

Here's a perfect example of the same page, with options for A4-size and Letter-size printing margins:

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }
 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

You can replicate as many times as you wish using different paper sizes. Extra values (colors, hidden elements, etc.) would go outside @page.

Solution 3

In addition, if the paper size is A4 and protrait you can also use this

@page {
    size: A4 landscape;
}

This operates in Chrome

Solution 4

your at-rules media queries are structured incorrectly. try:

@media print {  
    @page {  
      size:297mm 210mm;  
    }  
}

that at least provides the correct syntax. as for the size property, it was dropped from css2.1 and browser support varies. you could always set width, margin, and/or padding

View more solutions

Comments

[AlexC]

This doesn't quite address what I was wanting, though. If I've got one document with two 200px-by-200px divs, and another document with twenty of them, and I want to print them both and have everything come out the same size. Chrome's default PDF generation may not have that result. That's why my solution has a div of "whole page" width.

[AlexC]

That's an alternative for the @page { size } option, yes. But that doesn't help ensure that two different documents both print a 200px div at the same size as each other, though. The way to do that is to ensure that one div of the desired full-page size (e.g. 1100px) always spans the whole page width, as I describe in my answer.

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.