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


Tags: html,css,google-chrome,printing,print-css

Problem :

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 :

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


    CSS Howto..

    How to program the navigation bar(image) web html

    How can I add vertical space to a horizontal list?

    Does anyone know how Pinterest.com's layout works?

    how to vertically align div opposite to each other

    How to Make a Fluid Layout

    How do we group monospace font families with regards to their serif property? [closed]

    How to set keyboard focus to a representing parent element of a list

    Jsoup html parsing style="display:none; dont show the link

    How to Find CSS Selector

    How to vertical align icon inside label and button in the same way

    How to manage multi tenant web portal css using Asp.Net MVC

    How to capture table row on button click to add css class knockout js

    how to edit a css selector in order to shorten the amount of characters used in file

    How come one jquery script cant effect another jquery script

    Internet Explorer: how to escape extra carriage return after editing Textarea?

    How do I place text to the right of a relatively positioned image?

    How to change background color of readonly textbox in css

    how to define style for a group of child elements from parent element's style?

    div how to make its dimensions exactly as those of the contents

    How to Fade in AFTER the Page has Loaded: Javascript

    How to override HTML image using CSS

    how to encode .css file?

    How to horizontally center a link element with CSS?

    How do I spilt the footer into different widths?

    How to access two Ids in one css selector

    How could i center unordered lists in a footer?

    jQuery on click shows div but it flickers and disappears

    CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?

    how to style every html posts differently in css

    How to define margin (CSS) around an absolutely positioned, floating element?