@page

Syntax

/* Targets all the pages */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* Targets all even-numbered pages */
@page :left {
  margin-top: 4in;
}

/* Targets all odd-numbered pages */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* Targets all selectors with `page: wide;` set */
@page wide {
  size: a4 landscape;
}

@page {
  /* margin box at top right showing page number */
  @top-right {
    content: "Page " counter(pageNumber);
  }
}

Seiten-Eigenschaften

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

margin

Bestimmt die Seitenränder. Einzelne Rand-Eigenschaften margin-top, margin-right, margin-bottom, und margin-left können ebenfalls verwendet werden.

page-orientation

Bestimmt die Ausrichtung der Seite. Dies wirkt sich nicht auf das Layout der Seite aus; die Drehung wird nach dem Layout im Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des umgebenden Blocks der Seitenbox an. Im allgemeinen Fall, in dem eine Seitenbox auf ein Blatt Papier gerendert wird, gibt sie auch die Größe des Zielblatts an.

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

Beschreibung

Die @page Regel definiert Eigenschaften der Seitenbox. Die @page Regel kann über das CSS-Objektmodell-Interface CSSPageRule abgerufen werden.

Verwandte Eigenschaften

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

page

Erlaubt es einem Selektor, eine benutzerdefinierte benannte Seite zu verwenden.

Formale Syntax

@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 der <page-body> umfasst:

• Seiten-Eigenschaften
• Seitenrand-Eigenschaften

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

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

Margin-Regeln

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

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

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

Weitere Margin-Regeln sind:

@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

Seitenrand-Eigenschaften

Die Seitenrand-Eigenschaften sind die Menge der CSS-Eigenschaften, die in jeder individuellen Margin-Regel festgelegt werden können. Sie beinhalten:

Benannte Seiten

Benannte Seiten ermöglichen es, pro Seite ein Layout vorzunehmen und Seitenumbrüche in deklarativer Weise beim Drucken hinzuzufügen.

Benannte Seiten können über die page Eigenschaft angewendet werden. Dies erlaubt es dem Benutzer, verschiedene Seitenkonfigurationen für Drucklayouts zu erstellen.

Ein Beispiel dafür finden Sie in den page Beispielen.

Beispiele

Verwendung der Größe Eigenschaft, um die Seitenausrichtung zu ändern

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im landscape Format mit jeweils einem 20 % Rand beim Drucken aufgeteilt werden. Ein Klick auf die Drucktaste öffnet einen Druckdialog, wobei die HTML-Abschnitte in einzelne Seiten aufgeteilt werden.

<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;
}

@page Pseudoklassen-Beispiele

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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