it-swarm.com.de

CSS zum Einstellen des A4-Papierformats

Ich muss ein A4-Papier im Web simulieren und zulassen, dass diese Seite so gedruckt wird, wie sie im Browser angezeigt wird (speziell in Chrome). Ich habe die Elementgröße auf 21 cm x 29,7 cm eingestellt, aber wenn ich zum Drucken (oder zur Druckvorschau) sende, schneide ich meine Seite ab.

Siehe hierzu Live-Beispiel !

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>

Ich denke, ich vergesse etwas. Aber was wäre das?

  • Chrome : Clipping-Seite, Doppelseite ( es ist genau das, was ich brauche, um zu arbeiten
  • Firefox : es funktioniert einwandfrei.
  • IE10 : Ob Sie es glauben oder nicht, es ist perfekt!
  • Opera : sehr fehlerhaft in der Druckvorschau
211
David Rodrigues

Ich habe mir das etwas genauer angesehen und das eigentliche Problem scheint darin zu liegen, initial der Seite width unter der Medienregel print zuzuweisen. Es scheint, als würde in Chrome _width: initial_ auf dem _.page_ -Element eine Skalierung des Seiteninhalts, wenn für width für keines der übergeordneten Elemente ein bestimmter Längenwert definiert ist (_width: initial_ wird in diesem Fall in _width: auto_ aufgelöst ... aber Tatsächlich verursacht jeder Wert, der kleiner als die in der _@page_-Regel definierte Größe ist, dasselbe Problem.

Also nicht nur der Inhalt ist jetzt zu lang für die Seite (um ca. 2cm), aber auch der Seitenabstand ist geringfügig größer als der anfängliche 2cm und so weiter (es scheint so) Rendern Sie den Inhalt unter _width: auto_ auf die Breite von ~196mm und skalieren Sie dann den gesamten Inhalt auf die Breite von 210mm ~ aber seltsamerweise wird derselbe Skalierungsfaktor auf Inhalte angewendet, deren Breite kleiner als 210mm ist.

Um dieses Problem zu beheben, können Sie einfach in der Medienregel print die Papierbreite und -höhe A4 _html, body_ oder direkt _.page_ zuweisen und in diesem Fall das Schlüsselwort initial vermeiden.

DEMO

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

Dies scheint alles so zu lassen, wie es in Ihrem ursprünglichen CSS ist, und das Problem in Chrome (getestet in verschiedenen Versionen von Chrome unter Windows) zu beheben , OS X und 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>

DEMO

32
Salim

https://github.com/cognitom/paper-css scheint alle meine Bedürfnisse zu lösen.

Papier-CSS für fröhliches Drucken

Front-End-Drucklösung - Vorschau und Live-Reload möglich!

25
Mark Boulder