J’ai besoin de simuler un papier A4 sur le Web et d’imprimer cette page telle qu’elle est affichée dans le navigateur (Chrome en particulier). Je mets la taille de l’élément à 21 cm x 29,7 cm, mais lorsque j’envoie pour imprimer (ou pour afficher un aperçu avant impression), cela coupe ma page.
Voir cet exemple Live !
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; } }
Page 1/2 Page 2/2
Je pense que j’oublie quelque chose. Mais ce serait quoi?
Je me suis penché là-dessus un peu plus et le problème semble être lié à l’atsortingbution de la width
initial
à la width
page sous la règle du support d’ print
. Il semble que dans Chrome width: initial
de l’élément .page
entraîne la mise à l’ échelle du contenu de la page si aucune valeur de longueur spécifique n’est définie pour la width
sur l’un des éléments parent ( width: initial
mais en réalité, toute valeur inférieure à la taille définie sous la règle @page
provoque le même problème).
Ainsi, non seulement le contenu est trop long pour la page (d’environ 2cm
), mais le remplissage de la page sera légèrement supérieur aux 2cm
initiaux et ainsi de suite (il semble que le contenu soit sous la width: auto
à la largeur de ~196mm
, puis redimensionnez tout le contenu jusqu’à la largeur de 210mm
~ mais, étrangement, le même facteur d’échelle est appliqué aux contenus de toute largeur inférieure à 210mm
).
Pour résoudre ce problème, vous pouvez simplement, dans la règle de support d’ print
, affecter la largeur et la hauteur du papier A4 au html, body
ou directement à .page
et éviter dans ce cas le mot-clé initial
.
@page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ }
Cela semble garder tout le rest comme il est dans votre CSS d’origine et corriger le problème dans Chrome (testé dans différentes versions de Chrome sous Windows, OS X et 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
DEMO
https://github.com/cognitom/paper-css semble résoudre tous mes besoins.
Solution d’impression frontale – prévisualisable et rechargeable en direct!