@page

Die @page At-Regel kann nur Seitenbeschreibungen und Rand-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 Ausrichtung der Seite an. Dies beeinflusst nicht das Layout der Seite; die Drehung wird nach dem Layout auf das Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des umgebenden Blocks des Seitenrahmens an. Im allgemeinen Fall, bei dem ein Seitenrahmen auf ein Seitenblatt gerendert wird, gibt es auch die Größe des Zielseitenblatts an.

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

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

Die @page At-Regel ermöglicht es dem Benutzer, der Regel einen Namen zuzuweisen, der dann in einer Deklaration mit der Eigenschaft page 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> beinhaltet:

• seiteneigenschaften
• seitenrand-eigenschaften

und <pseudo-page> diese Pseudoklassen darstellt:

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

Die Rand-At-Regeln werden innerhalb der @page At-Regel verwendet. Sie zielen jeweils auf einen anderen Abschnitt der gedruckten Seite ab 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 und wendet die Änderungen basierend auf den festgelegten seitenrand-eigenschaften an.

Weitere Rand-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

Die Seitenrand-Eigenschaften sind die Menge der CSS-Eigenschaften, die in jeder einzelnen Rand-At-Regel festgelegt werden können. Sie umfassen:

Benannte Seiten ermöglichen das Durchführen eines seitenweisen Layouts und das Hinzufügen von Seitenumbruch auf deklarative Weise beim Drucken.

Benannte Seiten können mit der page Eigenschaft angewendet werden. Dies ermöglicht es dem Benutzer, unterschiedliche Seitenkonfigurationen für den Einsatz in Drucklayouts zu erstellen.

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

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im Querformat 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

Durch Klicken auf die Druck-Schaltfläche wird ein Druckdialog gestartet, mit 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

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