CSS to set A4 paper size

Question

I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.

See this Live example!

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage">Page 1/2</div>
  </div>
  <div class="page">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

I think I'm forgetting something. But what would it be?

Chrome: clipping page, double page (it's just what I need it to work)
Firefox: it works perfectly.
IE10: believe it or not, it's perfect!
Opera: very buggy on print preview

The correct answer is here: http://stackoverflow.com/a/34018790/293856 — unom, Dec 01 '15 at 11:22
Possible dupe of: http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages — Mark Boulder, May 09 '17 at 14:52
[bug report](https://bugs.chromium.org/p/chromium/issues/detail?id=603559#c64) about this — Eugen Konkov, Oct 20 '18 at 14:22

score 269 · Accepted Answer · edited Jun 20 '20 at 09:12

269

I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the @page rule causes the same issue).

So not only the content is now too long for the page (by about 2cm), but also the page padding will be slightly more than the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).

To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or directly to .page and in this case avoid the initial keyword.

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).}

edited Jun 20 '20 at 09:12

Community

1
1

answered May 20 '13 at 13:18

Martin Turjak

19,846
5
53
76

How did you arrive at the `256mm` (and thus `237mm`, eventually) for the `.subpage` element? – caw Sep 12 '14 at 03:42
@MarcoW. I believe the OP's *`256mm`* is slightly rounded down A4 paper height without the page padding: *`297mm - 2*20mm`* ... maybe `257mm` would be a bit more obvious ;-) And in my previous example the *`237mm`* accounted for the *`~2cm`* "too long" content ... but only superficially solved the problem. See my updated answer above for the actual solution. – Martin Turjak Sep 14 '14 at 16:35
10

Hey @MartinTurjak, i tweaked your fiddle to a US Letter version, in case anyone's interested. http://jsfiddle.net/2wk6Q/2957/ Cheers! – Ben Hickson Mar 25 '15 at 20:49
I am having 4 fields in printing a page how to partition the equal size of all the fields.. what is the size of the print page in pxl – Vikram May 22 '15 at 05:21
i was generating an 8 page document and the `257mm` height on the `.subpage` was creating a blank page at the end. fiddling around with it resulted in `256.85mm` being the golden number. – Brad Oct 08 '15 at 23:50
Never would have guessed that this was the problem. Thanks! – Seiyria Jun 03 '16 at 23:08
4

@Brad: didn't work for me. Still creating a blank page in between each page. – Sebastian Farham Apr 09 '17 at 20:45
1

Worked perfectly in my application.That JSFiddle is nice by the way - the print preview looked so clean I nearly fell out of my chair. – 1owk3y Aug 07 '17 at 13:03
Nope, this doesnt work. Example print is only have the size and doesnt fill out the paper – nights Dec 11 '17 at 10:18
For the blank print pages problem, just remove all the .page { } class below the @media print { } and it will get sorted. That class is totally unnecessary – Thanasis Jul 28 '19 at 09:54
1

I made mistake above. You can't really delete that. Just change min-height: 297mm into max-height: 296mm; in the .page class. This will sort the double page issue. – Thanasis Jul 28 '19 at 13:47
For me 297.129mm is the real height of an A4 format, 297mm with 70 pages I have a little space at the end of the document – Safi Nettah Jul 22 '20 at 09:02
Beautiful! Thank you so much, this was a life saver! – Yous0147 Jan 18 '21 at 14:40

score 40 · Answer 2 · answered May 20 '15 at 09:34

40

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

DEMO

answered May 20 '15 at 09:34

MaxEcho

13,325
6
72
84

3

side note: `` is not a [valid custom HTML element name](https://www.w3.org/TR/custom-elements/#valid-custom-element-name) – Martin Schneider Aug 03 '17 at 10:14
2

Seems to work. But `box-shadow: 0;` doesn't work (at least in Chrome), it should be `box-shadow: none;`. The two margin declarations can also be combined into `margin: 0 auto 0.5cm;`. – Matias Kinnunen Jan 04 '18 at 14:24

score 38 · Answer 3 · answered May 09 '17 at 14:53

38

https://github.com/cognitom/paper-css seems to solve all my needs.

Paper CSS for happy printing

Front-end printing solution - previewable and live-reloadable!

answered May 09 '17 at 14:53

Mark Boulder

11,570
11
40
73

CSS to set A4 paper size

3 Answers3

DEMO

Paper CSS for happy printing

Linked