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

Seiteneigenschaften

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

margin

Gibt die Seitenränder an. Die einzelnen Randeigenschaften 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 im Ausgabemedium nach dem Layout angewendet.

size

Gibt die Zielgröße und Ausrichtung des enthaltenden Blocks des Seitenbereichs an. Im allgemeinen Fall, in dem ein Seitenbereich auf einem einzelnen Seitenblatt gerendert wird, gibt sie auch die Größe des Zielseitenblatts an.

Die Spezifikation erwähnt, dass die folgenden CSS-Eigenschaften über die @page-At-Regel auf Seitenbereiche anwendbar sind. Diese werden jedoch bislang von keinem User Agent unterstützt.

Beschreibung

Die @page-Regel definiert Eigenschaften des Seitenbereichs. Auf die @page-At-Regel kann über die CSS-Objektmodell-Schnittstelle CSSPageRule zugegriffen werden.

Verwandte Eigenschaften

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

page

Ermöglicht 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 ]  

Dabei enthält <page-body>:

• Seiteneigenschaften
• Seitenrand-Eigenschaften

und <pseudo-page> stellt diese Pseudoklassen dar:

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

Rand-At-Regeln

Die Rand-At-Regeln werden innerhalb der @page-At-Regel verwendet. Jede zielt auf einen anderen Bereich 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 festgelegten Seitenrand-Eigenschaften an.

Weitere Rand-At-Regeln sind:

@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 CSS-Eigenschaften, die in einer einzelnen Rand-At-Regel festgelegt werden können. Dazu gehören:

Benannte Seiten

Benannte Seiten ermöglichen es, beim Drucken deklarativ ein Layout pro Seite auszuführen und Seitenumbrüche hinzuzufügen.

Benannte Seiten können mithilfe der Eigenschaft page angewendet werden. Dadurch kann der Benutzer unterschiedliche Seitenkonfigurationen zur Verwendung in Drucklayouts erstellen.

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

Beispiele

Verwenden der Eigenschaft size zum Ändern der Seitenausrichtung

Dieses Beispiel zeigt, wie die <section>s beim Drucken in einzelne Seiten im landscape-Format aufgeteilt werden, wobei jede Seite einen Rand von 20 % hat. Durch Klicken auf die Druckschaltfläche wird ein Druckdialog geöffnet, in dem 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;
}

Beispiele für @page-Pseudoklassen

Beispiele finden Sie bei den verschiedenen Pseudoklassen von @page.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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