CSS pour définir la taille du papier A4

Question

J'ai besoin de simuler un papier A4 dans le web et de permettre d'imprimer cette page telle qu'elle est affichée sur le navigateur (Chrome, spécifiquement). J'ai défini la taille de l'élément à 21 cm x 29,7 cm, mais lorsque j'envoie à l'impression (ou à l'aperçu avant impression), ma page est coupée.

Voir ceci Exemple concret !

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 qu'est-ce que c'est ?

• Chrome : page de coupure, double page ( c'est juste ce dont j'ai besoin pour fonctionner )
• Firefox : il fonctionne parfaitement.
• IE10 : croyez-le ou non, c'est parfait !
• Opéra : très bogué sur l'aperçu avant impression

Answer 1

Je me suis penché un peu plus sur la question et le problème actuel semble être lié à l'attribution de l'accès à l'Internet. initial à la page width en vertu de la print règle des médias. Il semble que dans Chrome width: initial sur le .page donne lieu à mise à l'échelle 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, se résout en width: auto ... mais en fait, toute valeur inférieure à la taille définie sous la rubrique @page cause le même problème).

Donc, non seulement le contenu est maintenant trop longtemps pour la page (d'environ 2cm ), mais aussi le remplissage de la page sera légèrement supérieur à la valeur initiale de l'option 2cm et ainsi de suite (il semble que le contenu soit rendu sous la rubrique width: auto à la largeur de ~196mm puis mettre à l'échelle l'ensemble du contenu jusqu'à la largeur de 210mm ~ mais, étrangement, le même facteur d'échelle est appliqué aux contenus dont la largeur est inférieure à celle de l'image. 210mm ).

Pour résoudre ce problème, vous pouvez simplement dans le print règle de support attribuent la largeur et la hauteur du papier A4 à html, body ou directement à .page et dans ce cas, éviter le initial mot-clé.

DEMO

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

Cela semble conserver toutes les autres caractéristiques de 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).

Answer 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>

DEMO

Answer 3

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

Papier CSS pour une impression heureuse

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