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

Seiteneigenschaften

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

margin

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

page-orientation

Gibt die Orientierung der Seite an. Dies hat keinen Einfluss auf das Layout der Seite; die Drehung wird nach dem Layout im Ausgabemedium angewendet.

size

Bestimmt die Zielgröße und Orientierung des die Seite enthaltenen Blockes. Im allgemeinen Fall, wenn ein Seitenblock auf ein Blatt projiziert wird, zeigt es auch die Größe des Ziel-Seitenblattes an.

Die Spezifikation erwähnt, dass die folgenden CSS-Eigenschaften auf Seitenboxen über die @page-At-Regel anwendbar sein sollen. Diese werden jedoch noch nicht von einem Benutzeragenten unterstützt.

Beschreibung

Die @page-Regel definiert Eigenschaftten der Seitenbox. Die @page At-Regel ist über die CSS-Objektmodell-Schnittstelle CSSPageRule zugänglich.

Verwandte Eigenschaften

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

page

Ermöglicht einen Selektor, eine benutzerdefinierte benannte Seite zu nutzen.

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 ]  

Wobei der <page-body> umfasst:

• Seiteneigenschaften
• Seitenrand-Eigenschaften

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

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

Margin-At-Regeln

Die Margin-At-Regeln werden innerhalb der @page At-Regel verwendet. Jede zielt auf einen anderen Abschnitt der gedruckten Dokumentseite ab und gestaltet den Bereich der gedruckten Seite basierend auf den im Stilblock festgelegten Eigenschaftswerten:

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

@top-left zielt auf den oberen linken Bereich des Dokuments ab und wendet die Änderungen basierend auf den Seitenrand-Eigenschaften an.

Andere 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

Seitenrand-Eigenschaften

Die Seitenrand-Eigenschaften sind der Satz von CSS-Eigenschaften, der in einer beliebigen einzelnen Margin-At-Regel gesetzt werden kann. Sie umfassen:

Benannte Seiten

Benannte Seiten ermöglichen, ein pro-Seiten-Layout zu gestalten und Seitenumbrüche auf deklarative Weise beim Drucken hinzuzufügen.

Benannte Seiten können über die page Eigenschaft angewendet werden. Dies erlaubt es dem Benutzer, unterschiedliche Seitenkonfigurationen zur Nutzung in Drucklayouts zu erstellen.

Ein Beispiel dafür findet sich in den page Beispielen.

Beispiele

Die Verwendung der size-Eigenschaft zur Änderung der Seitenorientierung

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im landscape-Format mit einem 20% Rand bei jedem Ausdruck aufgeteilt werden können. Durch den Klick auf die Druckschaltfläche wird ein Druckdialog geöffnet, wobei die HTML-Abschnitte in einzelne Seiten 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;
}

@page Pseudoklassen-Beispiele

Sehen Sie sich die verschiedenen Pseudoklassen der @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 Verfolgung des Fortschritts zu diesem Thema (seitenbasierte Zähler, etc.)