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 {_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
background-color: #FAFAFA;_x000D_
font: 12pt "Tahoma";_x000D_
}_x000D_
_x000D_
* {_x000D_
box-sizing: border-box;_x000D_
-moz-box-sizing: border-box;_x000D_
}_x000D_
_x000D_
.page {_x000D_
width: 21cm;_x000D_
min-height: 29.7cm;_x000D_
padding: 2cm;_x000D_
margin: 1cm auto;_x000D_
border: 1px #D3D3D3 solid;_x000D_
border-radius: 5px;_x000D_
background: white;_x000D_
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);_x000D_
}_x000D_
_x000D_
.subpage {_x000D_
padding: 1cm;_x000D_
border: 5px red solid;_x000D_
height: 256mm;_x000D_
outline: 2cm #FFEAEA solid;_x000D_
}_x000D_
_x000D_
@page {_x000D_
size: A4;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
@media print {_x000D_
.page {_x000D_
margin: 0;_x000D_
border: initial;_x000D_
border-radius: initial;_x000D_
width: initial;_x000D_
min-height: initial;_x000D_
box-shadow: initial;_x000D_
background: initial;_x000D_
page-break-after: always;_x000D_
}_x000D_
}
_x000D_
<div class="book">_x000D_
<div class="page">_x000D_
<div class="subpage">Page 1/2</div>_x000D_
</div>_x000D_
<div class="page">_x000D_
<div class="subpage">Page 2/2</div>_x000D_
</div>_x000D_
</div>
_x000D_
I think I'm forgetting something. But what would it be?
This question is related to
css
printing
print-preview
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.
@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).
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>
https://github.com/cognitom/paper-css seems to solve all my needs.
Front-end printing solution - previewable and live-reloadable!
Source: Stackoverflow.com