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

margin

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

page-orientation

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

size

Bestimmt die Zielgröße und Ausrichtung des 's enthaltenen Blocks. In der Regel, wo eine auf ein Blatt gedruckt wird, gibt sie auch die Größe des Zielfeldes an.

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

Beschreibung

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

Verwandte Eigenschaften

Die @page-At-Regel erlaubt es dem Benutzer, der Regel einen Namen zuzuweisen, der dann in einer Deklaration über die page-Eigenschaft aufgerufen wird.

page

Ermöglicht 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> Folgendes umfasst:

• Seiteneigenschaften
• Seitenrandeigenschaften

und <pseudo-page> diese Pseudoklassen darstellt:

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

Margin-At-Regeln

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

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

@top-left zielt auf den oberen linken Bereich des Dokuments und wendet die basierend auf den festgelegten Seitenrandeigenschaften vorgenommenen Änderungen 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

Seitenrandeigenschaften

Die Seitenrandeigenschaften sind eine Gruppe von CSS-Eigenschaften, die in einer beliebigen Margin-At-Regel festgelegt werden können. Diese umfassen:

Benannte Seiten

Benannte Seiten ermöglichen es, eine Seitengestaltung durchzuführen und Seitenumbrüche auf deklarative Weise beim Drucken hinzuzufügen.

Benannte Seiten können durch die 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 zur Änderung der Seitenausrichtung

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im landscape-Format aufgeteilt werden, wobei jede Seite beim Drucken einen 20% Rand hat. Das Klicken auf die Drucktaste öffnet einen Druckdialog, in dem die HTML-Abschnitte in einzelne Seiten unterteilt 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;
}

Beispiele für @page-Pseudoklassen

Siehe die verschiedenen Pseudoklassen von @page für Beispiele.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die page-Eigenschaft
• Der @page size Deskriptor
• CSS-Seitenmedien Modul
• [META] CSS Paged Media Module Level 3 Bugzilla zur Verfolgung des Fortschritts zu diesem Thema (seitenbasierte Zähler usw.)