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

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).

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.

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

@page {    size: A4 landscape;}

This operates in Chrome