CSS to set A4 paper size
Solution 1
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).
Solution 2
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>
Solution 3
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!
Related videos on Youtube
David Rodrigues
Updated on April 15, 2021Comments
-
David Rodrigues about 3 years
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
-
unom over 8 yearsThe correct answer is here: stackoverflow.com/a/34018790/293856
-
Mark Boulder about 7 yearsPossible dupe of: stackoverflow.com/questions/3341485/…
-
Eugen Konkov over 5 yearsbug report about this
-
caw almost 10 yearsHow did you arrive at the
256mm
(and thus237mm
, eventually) for the.subpage
element? -
Martin Turjak almost 10 years@MarcoW. I believe the OP's
256mm
is slightly rounded down A4 paper height without the page padding:297mm - 2*20mm
... maybe257mm
would be a bit more obvious ;-) And in my previous example the237mm
accounted for the~2cm
"too long" content ... but only superficially solved the problem. See my updated answer above for the actual solution. -
Ben over 9 yearsHey @MartinTurjak, i tweaked your fiddle to a US Letter version, in case anyone's interested. jsfiddle.net/2wk6Q/2957 Cheers!
-
Vikram about 9 yearsI 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
-
Brad over 8 yearsi 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 in256.85mm
being the golden number. -
Seiyria about 8 yearsNever would have guessed that this was the problem. Thanks!
-
Sebastian Farham about 7 years@Brad: didn't work for me. Still creating a blank page in between each page.
-
Martin Schneider almost 7 yearsside note:
<page>
is not a valid custom HTML element name -
1owk3y almost 7 yearsWorked perfectly in my application.That JSFiddle is nice by the way - the print preview looked so clean I nearly fell out of my chair.
-
nights over 6 yearsNope, this doesnt work. Example print is only have the size and doesnt fill out the paper
-
Matias Kinnunen over 6 yearsSeems to work. But
box-shadow: 0;
doesn't work (at least in Chrome), it should bebox-shadow: none;
. The two margin declarations can also be combined intomargin: 0 auto 0.5cm;
. -
Thanasis almost 5 yearsFor 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 almost 5 yearsI 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.
-
Safi Nettah almost 4 yearsFor 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
-
Yous0147 over 3 yearsBeautiful! Thank you so much, this was a life saver!
-
Matthew Herbst almost 3 yearsThis (at least, the fiddle example) no longer appears to work on Chrome 92 (MacOS 11.4). I see white margins on both sides of the print area :(