@page

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

margin

Gibt die Seitenränder an. Einzelne Margin-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 Seitenrahmens an. Im Allgemeinen, wenn ein Seitenrahmen auf ein Blatt Papier gerendert wird, gibt dies auch die Größe des Zielblatts an.

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

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

Die @page At-Regel ermöglicht es, einen Namen zuzuweisen, der dann in einer Erklärung mit der page Eigenschaft aufgerufen wird.

page

Ermöglicht es 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 der <page-body> enthält:

• Seiten-Eigenschaften
• Seiten-Margin-Eigenschaften

und <pseudo-page> diese Pseudoklassen darstellt:

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

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

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

@top-left zielt auf die obere linke Ecke des Dokuments und wendet die basierenden Änderungen auf die festgelegten Seiten-Margin-Eigenschaften an.

Andere Margin-At-Regeln beinhalten:

@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 Seiten-Margin-Eigenschaften sind die Menge an CSS-Eigenschaften, die in einer beliebigen individuellen Margin-At-Regel festgelegt werden können. Sie umfassen:

Benannte Seiten ermöglichen die Durchführung von Layouts pro Seite 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 dafür finden Sie in den page Beispielen.

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im landscape-Format aufgeteilt werden, wobei jede Seite beim Drucken einen Rand von 20% hat.

HTML

<button>Print Webpage</button>
<article>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>

CSS

@page {
  size: landscape;
  margin: 20%;
}

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: 1.5rem;
  border: 1px dashed;
}

JavaScript

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

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

Ergebnis

Ein Klick auf die Drucktaste öffnet ein Druckdialog, bei dem die HTML-Abschnitte in einzelne Seiten aufgeteilt werden.

Bitte beziehen Sie sich auf die verschiedenen Pseudoklassen von @page für Beispiele.

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

• Der @page size Deskriptor
• Die page Eigenschaft
• Siehe das [META] CSS Paged Media Module Level 3 Ticket in Bugzilla zur Nachverfolgung des Fortschritts zu diesem Thema (seitenbasierte Zähler usw.)
• CSS Paged Media Modul
• Paged.js: W3C Paged Media Polyfill