@page CSS at-rule

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 Seitendeskriptoren und Rand-Regeln enthalten. Die folgenden Deskriptoren wurden von mindestens einem Browser implementiert:

margin

Gibt die Seitenränder an. Einzelne Rand-Attribute 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 Rotation wird nach dem Layout im Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des enthaltenden Blocks der Seitenbox an. Im allgemeinen Fall, wo eine Seitenbox auf ein Blatt gedruckt wird, gibt es auch die Größe des Zielblattes an.

Die Spezifikationen erwähnen die folgenden CSS-Eigenschaften, die für Seitenboxen mittels der @page Regel anwendbar sind. Diese wurden jedoch noch nicht von einem Benutzeragenten unterstützt.

Beschreibung

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

Verwandte Eigenschaften

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

page

Erlaubt 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> Folgendes beinhaltet:

• Seiten-Eigenschaften
• Seiten-Rand-Eigenschaften

und <pseudo-page> repräsentiert diese Pseudo-Klassen:

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

Randregeln

Die Randregeln werden innerhalb der @page Regel verwendet. Sie zielen jeweils auf einen anderen Abschnitt der gedruckten Seite ab und gestalten den Bereich der gedruckten Seite basierend auf den in dem 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 eingestellten Seiten-Rand-Eigenschaften an.

Andere Randregeln 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 die Reihe von CSS-Eigenschaften, die in jeder einzelnen Randregel festgelegt werden können. Dazu gehören:

Benannte Seiten

Benannte Seiten ermöglichen eine pro-Seiten Darstellung und das Hinzufügen von Seitenumbrüchen auf deklarative Weise beim Drucken.

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 hierfür finden Sie in den page Beispielen.

Beispiele

Verwendung der size-Eigenschaft, um die Ausrichtung der Seite zu ändern

Dieses Beispiel zeigt, wie man die <section>s in einzelne Seiten im landscape-Format aufteilt, wobei jede Seite beim Drucken einen 20%-Rand hat. Das Klicken auf die Drucktaste öffnet ein Druckdialogfeld mit den HTML-Abschnitten, die 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 Pseudo-Klassen-Beispiele

Sehen Sie sich die verschiedenen Pseudo-Klassen von @page für Beispiele an.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die page Eigenschaft
• Der @page size Deskriptor
• CSS gedruckte Medien Modul
• [META] CSS Paged Media Module Level 3 Bugzilla zum Fortschritts-Tracking des Themas (seitenbasierte Zähler usw.)