web-dev-qa-db-fra.com

CSS pour définir le format de papier A4

J'ai besoin de simuler un papier A4 en web et de pouvoir imprimer cette page telle qu'elle apparaît sur le navigateur (Chrome, en particulier). Je règle la taille de l'élément sur 21 cm x 29,7 cm, mais lorsque je l'envoie à imprimer (ou à un aperçu avant impression), il coupe la page.

Voir ceci Exemple en direct !

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>

Je pense que j'oublie quelque chose. Mais ce serait quoi?

  • Chrome : coupure de page, double page ( c'est tout ce dont j'ai besoin pour fonctionner )
  • Firefox : cela fonctionne parfaitement.
  • IE10 : croyez-le ou non, c'est parfait!
  • Opera : très buggy sur l'aperçu avant impression
cssprintingprint-preview
211
David Rodrigues

J'ai examiné la question un peu plus et le problème semble être d'assigner initial à la page width sous la règle de média print. Il semble que dans Chrome _width: initial_ sur l'élément _.page_, les résultats scaling du contenu de la page si aucune valeur de longueur spécifique n'est définie pour width sur l'un des éléments parents (_width: initial_ dans ce cas, résout _width: auto_ ... mais en réalité, toute valeur inférieure à la taille définie sous _@page_ règle cause le même problème).

Ainsi, non seulement le contenu est maintenant trop long == pour la page (environ 2cm), mais le remplissage de la page sera légèrement supérieur à la valeur initiale 2cm et ainsi de suite (il semble que le contenu s'affiche sous _width: auto_ au width ~196mm puis redimensionnez tout le contenu jusqu'à la largeur de 210mm ~ mais étrangement exactement le même facteur de mise à l'échelle est appliqué au contenu dont la largeur est inférieure à 210mm).

Pour résoudre ce problème, vous pouvez simplement, dans la règle de support print, affecter la largeur et la hauteur du papier A4 à _html, body_ ou directement à _.page_. Dans ce cas, évitez le mot clé initial.

DEMO

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

Cela semble garder tout le reste tel quel dans votre CSS d'origine et résoudre le problème dans Chrome (testé dans différentes versions de Chrome sous Windows, OS X et Ubuntu. ).

218
Martin Turjak

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>

DÉMO

32
Salim

https://github.com/cognitom/paper-css semble résoudre tous mes besoins.

CSS papier pour une impression réussie

Solution d'impression frontale: prévisualisable et rechargeable en direct!

25
Mark Boulder