@page

Die @page At-Regel kann nur Seiten-Deskriptoren und Margin-At-Regeln enthalten. Folgende Deskriptoren wurden von mindestens einem Browser implementiert:

margin

Gibt die Seitenränder an. Individuelle Rand-Eigenschaften wie margin-top, margin-right, margin-bottom und margin-left können ebenfalls verwendet werden.

page-orientation

Gibt die Ausrichtung der Seite an. Dies beeinflusst nicht das Layout der Seite; die Drehung wird nach dem Layout im Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des enthaltenen Blocks der Seitenbox an. Im Allgemeinen Fall, wo eine Seitenbox auf ein Seitenblatt gerendert wird, zeigt es auch die Größe des Zielseitenblatts an.

Die Spezifikation erwähnt folgende CSS-Eigenschaften, die über die @page At-Regel auf Seitenboxen anwendbar sind. Diese werden jedoch von keinem Benutzeragenten unterstützt.

Die @page-Regel definiert die Eigenschaften der Seitenbox. Die @page At-Regel kann über die CSS-Objektmodell-Schnittstelle CSSPageRule aufgerufen werden.

Die @page At-Regel ermöglicht es dem Benutzer, der Regel einen Namen zuzuweisen, der dann in einer Deklaration mit der page Eigenschaft aufgerufen wird.

page

Erlaubt einem Selektor, eine benutzerdefinierte benannte Seite zu verwenden

@page = 
  @page <page-selector-list>? { <declaration-rule-list> }  

<page-selector-list> = 
  <page-selector>#  

<page-selector> = 
  [ <ident-token>? <pseudo-page>* ]!  

<pseudo-page> = 
  : [ left | right | first | blank ]  

Wo das <page-body> Folgendes umfasst:

• Seiteneigenschaften
• Seitenrand-Eigenschaften

und <pseudo-page> repräsentiert diese Pseudoklassen:

• :blank
• :first
• :left
• :right

Die Margin-At-Regeln werden innerhalb der @page At-Regel verwendet. Sie zielen jeweils auf einen anderen Abschnitt der gedruckten Seite ab und gestalten den Bereich der gedruckten Seite basierend auf den im Stilblock gesetzten Eigenschaftswerten:

@page {
  @top-left {
    /* page-margin-properties */
  }
}

@top-left zielt auf die obere linke Ecke des Dokuments und wendet die Änderungen basierend auf den festgelegten Seitenrand-Eigenschaften an.

Weitere Margin-At-Regeln umfassen:

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

Die Seitenrand-Eigenschaften sind der Satz von CSS-Eigenschaften, die in einer einzelnen Margin-At-Regel gesetzt werden können. Sie umfassen:

Benannte Seiten ermöglichen es, pro Seite Layouts zu erstellen und Seitenumbrüche in deklarativer Weise beim Drucken hinzuzufügen.

Benannte Seiten können mit der page Eigenschaft angewendet werden. Dies ermöglicht es dem Benutzer, verschiedene Seitenkonfigurationen für den Einsatz in Drucklayouts zu erstellen.

Ein Beispiel hierzu finden Sie in den page Beispielen.

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im Querformat aufgeteilt werden können, wobei jede Seite einen 20% Rand beim Drucken hat. Das Klicken auf den Druckknopf öffnet einen Druckdialog mit den HTML-Abschnitten, die in Einzelseiten aufgeteilt sind.

<button>Print page</button>
<article>
  <section>
    <h2>Header one</h2>
    <p>Paragraph one.</p>
  </section>
  <section>
    <h2>Header two</h2>
    <p>Paragraph two.</p>
  </section>
  <section>
    <h2>Header three</h2>
    <p>Paragraph three.</p>
  </section>
</article>

const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

@page {
  size: landscape;
  margin: 2cm;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1rem;
  border: 1px dashed;
}

Sehen Sie sich die verschiedenen Pseudoklassen von @page für Beispiele an.

• :blank
• :first
• :left
• :right

• Die page Eigenschaft
• Die @page size Deskriptor
• CSS paged media Modul
• [META] CSS Paged Media Module Level 3 Bugzilla zur Nachverfolgung des Fortschritts zu diesem Thema (seitenbasierte Zähler, etc.)