@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-rules enthalten. Die folgenden Deskriptoren 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 im Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des umgebenden Blocks der Seitenbox an. Im Allgemeinen Fall, in dem eine Seitenbox auf ein Seite-Blatt gerendert wird, zeigt sie auch die Größe des Ziel-Seite-Blattes an.

Die Spezifikation erwähnt, dass die folgenden CSS Eigenschaften über die @page At-Regel auf Seitenboxen anwendbar sind. Aber diese werden 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 aufgerufen werden.

Verwandte Eigenschaften

Die @page At-Regel ermöglicht es dem Benutzer, der Regel einen Namen zuzuweisen, der dann in einer Deklaration mithilfe der 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 das <page-body> einschließt:

• Seiteneigenschaften
• Seitenrand-Eigenschaften

und <pseudo-page> diese Pseudo-Klassen darstellt:

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

Margin at-rules

Die Margin at-rules werden innerhalb der @page At-Regel verwendet. Sie zielen jeweils auf einen anderen Bereich der gedruckten Seite, wobei der Bereich der gedruckten Seite basierend auf den im Stilblock festgelegten Eigenschaftswerten gestaltet wird:

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

@top-left zielt auf die obere linke Seite des Dokuments und wendet die Änderungen basierend auf den festgelegten Seitenrand-Eigenschaften an.

Weitere Margin-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 Menge an CSS-Eigenschaften, die in jeder einzelnen Margin-At-Regel festgelegt werden können. Sie umfassen:

Benannte Seiten

Benannte Seiten ermöglichen es, das Layout pro Seite zu gestalten und Seitenumbrüche auf deklarative Weise beim Drucken hinzuzufügen.

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

Ein Beispiel dafür finden Sie in den Beispielen auf der page Seite.

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 Rand von 20 % aufweist. Durch Klicken auf die Drucken-Schaltfläche wird ein Druckdialog angezeigt, in dem die HTML-Abschnitte in einzelne Seiten aufgeteilt werden.

<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

Siehe die verschiedenen Pseudo-Klassen der @page für Beispiele.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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