@page
Baseline 2024 *Newly available
Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Die @page
-At-Regel ist eine CSS-At-Regel, die verwendet wird, um verschiedene Aspekte von gedruckten Seiten zu ändern. Sie zielt auf die Dimensionen, die Ausrichtung und die Ränder der Seite ab und modifiziert diese. Die @page
-At-Regel kann verwendet werden, um alle Seiten in einem Ausdruck oder einen Teil davon mit ihren verschiedenen Pseudoklassen anzusprechen.
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. Einzelne Rand-Eigenschaften wie
margin-top
,margin-right
,margin-bottom
undmargin-left
können ebenfalls verwendet werden. page-orientation
-
Gibt die Ausrichtung der Seite an. Dies beeinflusst das Layout der Seite nicht; die Drehung wird nach dem Layout im Ausgabemedium angewendet.
size
-
Gibt die Zielgröße und Ausrichtung des enthaltenden Blocks der Seitenbox an. Im allgemeinen Fall, bei dem eine Seitenbox auf ein einzelnes Seitenblatt gerendert wird, gibt sie auch die Größe des Zielseitenblatts an.
Die Spezifikation erwähnt die folgenden CSS-Eigenschaften, die auf Seitenboxen über die @page-At-Regel anwendbar sind. Diese wurden jedoch noch nicht von einem Benutzeragenten unterstützt.
Verbleibende Seiteneigenschaften
Funktion | CSS-Eigenschaften |
---|---|
bidi-Eigenschaften | direction |
Hintergrund-Eigenschaften | background-color |
background-image | |
background-repeat | |
background-attachment | |
background-position | |
background | |
Rahmen-Eigenschaften | border-top-width |
border-right-width | |
border-bottom-width | |
border-left-width | |
border-width | |
border-top-color | |
border-right-color | |
border-bottom-color | |
border-left-color | |
border-color | |
border-top-style | |
border-right-style | |
border-bottom-style | |
border-left-style | |
border-short-style | |
border-top | |
border-right | |
border-bottom | |
border-left | |
border | |
Zähler-Eigenschaften | counter-reset |
counter-increment | |
Farbe | color |
Schrift-Eigenschaften | font-family |
font-size | |
font-style | |
font-variant | |
font-weight | |
font | |
Höhen-Eigenschaften | height |
min-height | |
max-height | |
Zeilenhöhe | line-height |
Rand-Eigenschaften | margin-top |
margin-right | |
margin-bottom | |
margin-left | |
margin | |
Umriss-Eigenschaften | outline-width |
outline-style | |
outline-color | |
outline | |
Polster-Eigenschaften | padding-top |
padding-right | |
padding-bottom | |
padding-left | |
padding | |
Anführungszeichen | quotes |
Text-Eigenschaften | letter-spacing |
text-align | |
text-decoration | |
text-indent | |
text-transform | |
white-space | |
word-spacing | |
Sichtbarkeit | visibility |
Breiten-Eigenschaften | width |
min-width | |
max-width |
Beschreibung
Die @page-Regel definiert die Eigenschaften der Seitenbox. Die @page
-At-Regel kann über die CSS-Objektmodell-Schnittstelle CSSPageRule
angesprochen werden.
Hinweis:
Das W3C diskutiert, wie mit viewportbezogenen <length>
-Einheiten, vh
, vw
, vmin
und vmax
umgegangen werden soll. Verwenden Sie diese meanwhile nicht innerhalb einer @page
-At-Regel.
Verwandte Eigenschaften
Die @page
-At-Regel ermöglicht es dem Benutzer, der Regel einen Namen zuzuweisen, der dann in einer Deklaration mit der page
-Eigenschaft aufgerufen wird.
page
-
Erlaubt 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 ]
Wobei der <page-body>
Folgendes beinhaltet:
- Seiten-Eigenschaften
- Seitenrand-Eigenschaften
und <pseudo-page>
diese Pseudoklassen darstellt:
Margin-At-Regeln
Die Margin-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 in dem Style-Block gesetzten 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 gesetzten Seitenrand-Eigenschaftswerten an.
Weitere 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
Seitenrand-Eigenschaften
Die Seitenrand-Eigenschaften sind die Menge von CSS-Eigenschaften, die in jeder individuellen Margin-At-Regel gesetzt werden können. Sie beinhalten:
Seitenrand-Eigenschaften
Funktion | CSS-Eigenschaften |
---|---|
bidi-Eigenschaften | direction |
Hintergrund-Eigenschaften | background-color |
background-image | |
background-repeat | |
background-attachment | |
background-position | |
background | |
Rahmen-Eigenschaften | border-top-width |
border-right-width | |
border-bottom-width | |
border-left-width | |
border-width | |
border-top-color | |
border-right-color | |
border-bottom-color | |
border-left-color | |
border-color | |
border-top-style | |
border-right-style | |
border-bottom-style | |
border-left-style | |
border-short-style | |
border-top | |
border-right | |
border-bottom | |
border-left | |
border | |
Zähler-Eigenschaften | counter-reset |
counter-increment | |
Inhalt | content |
Farbe | color |
Schrift-Eigenschaften | font-family |
font-size | |
font-style | |
font-variant | |
font-weight | |
font | |
Höhen-Eigenschaften | height |
min-height | |
max-height | |
Zeilenhöhe | line-height |
Rand-Eigenschaften | margin-top |
margin-right | |
margin-bottom | |
margin-left | |
margin | |
Umriss-Eigenschaften | outline-width |
outline-style | |
outline-color | |
outline | |
Polster-Eigenschaften | padding-top |
padding-right | |
padding-bottom | |
padding-left | |
padding | |
Anführungszeichen | quotes |
Text-Eigenschaften | letter-spacing |
text-align | |
text-decoration | |
text-indent | |
text-transform | |
white-space | |
word-spacing | |
Vertikale Ausrichtung | vertical-align |
Sichtbarkeit | visibility |
Breiten-Eigenschaften | width |
min-width | |
max-width | |
z-Index | z-index |
Benannte Seiten
Benannte Seiten ermöglichen das Durchführen eines pro-Seiten-Layouts 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 Seiteneinstellungen für den Druck-Layouts zu erstellen.
Ein Beispiel hierfür finden Sie in den Seitenbeispielen.
Beispiele
Verwendung der Size-Eigenschaft, um die Seitenausrichtung zu ändern
Dieses Beispiel zeigt, wie man die <section>
-Elemente in einzelne Seiten im Querformat
aufteilt, wobei jede Seite beim Drucken einen Rand von 20% hat. Beim Klicken auf die Drucktaste wird ein Druckdialog geöffnet, mit 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;
}
}
@Page-Pseudoklassen-Beispiele
Siehe die verschiedenen Pseudoklassen von @page
für Beispiele.
Spezifikationen
Specification |
---|
CSS Paged Media Module Level 3 # at-page-rule |
CSS Logical Properties and Values Level 1 # page |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@page | ||||||||||||
@bottom-center page-margin box | ||||||||||||
@bottom-left page-margin box | ||||||||||||
@bottom-left-corner page-margin box | ||||||||||||
@bottom-right page-margin box | ||||||||||||
@bottom-right-corner page-margin box | ||||||||||||
@left-bottom page-margin box | ||||||||||||
@left-middle page-margin box | ||||||||||||
@left-top page-margin box | ||||||||||||
page-orientation descriptor | ||||||||||||
@right-bottom page-margin box | ||||||||||||
@right-middle page-margin box | ||||||||||||
@right-top page-margin box | ||||||||||||
size descriptor | ||||||||||||
jis-b4 page size | ||||||||||||
jis-b5 page size | ||||||||||||
@top-center page-margin box | ||||||||||||
@top-left page-margin box | ||||||||||||
@top-left-corner page-margin box | ||||||||||||
@top-right page-margin box | ||||||||||||
@top-right-corner page-margin box |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
Siehe auch
- Die
page
-Eigenschaft - Der
@page
size
Deskriptor - CSS-Seitenmedien Modul
- Paged.js: W3C-Seitenmedien-Polyfill auf pagedjs.org
- [META] CSS Paged Media Module Level 3 Bugzilla zur Verfolgung des Fortschritts zu diesem Thema (seitenbasierte Zähler, etc.)