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 large can CSS values be?

    How to move hamburger menu to the front of overlay menu

    How to Change a Plugin's CSS

    How can I remove the border around all the cells in a table?

    how to isolate firefox 17 rendering bug [closed]

    How to horizontally align to “block” divs inside a div?

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    How to separate content and presentation layers on JSPs?

    How do I control a css child property with javascript?

    how to center horizontally div and span elements using css

    How does displays/hides an element through Css?

    JQuery - show/hide rows and manipulate css

    PHP Show Hidden Div

    How to change image css after rotating it in JS?

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How to avoid an hover on a menu item to affect the menu items on the right

    How to Manage Responsive Design in percentage(%)?

    How to fit CSS buttons into table cells?

    How fix position element so that while hovering on one element other two element should remain at same place

    How to bypass an overriding CSS Declaration

    How can I rotate(or change) background image using CSS and Javascript

    How to wait a while before adding elements in css? javascript?

    How to fix CSS background position

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    Yii2 how to include multiple css files from specific view or controller action

    How do I put hint in a asp:textbox

    How can I make a div horizontally center itself in another div? [duplicate]

    How to apply customized css to SSRS report

    How to create click-able CSS sprite with rather than Javascript?

    How can I add a transition for this growing div?