title: How to make HTML pages print at a consistent size from Chrome?
body: <p>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).</p>
  
  <p>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, <strong>keeping the same element a consistent size when printed</strong> from different pages is far from easy. </p>
  
  <p>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.</p>
  
  <p>Just using <code>@page size</code> doesn't help: I've got this CSS and it's not making any difference:</p>
  
  <pre><code>@media print {
    @ page size: 297mm 210mm 
  }
  </code></pre>
  
  <p>Does anyone have any thoughts for how to get things to print out with consistent sizes?</p>
  
  <p>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?</p>