@page
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die @page
At-Regel ist eine CSS-At-Regel, die verwendet wird, um verschiedene Aspekte gedruckter Seiten zu modifizieren. Sie zielt auf die Anpassungen der Dimensionen, Ausrichtung und Ränder der Seite ab. Die @page
At-Regel kann verwendet werden, um alle Seiten in einem Ausdruck oder einen Teil davon mithilfe ihrer verschiedenen Pseudoklassen zu definieren.
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);
}
}
Seiten-Eigenschaften
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
undmargin-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.
Übrige Seiten-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 | |
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 |
Margin-Eigenschaften | margin-top |
margin-right | |
margin-bottom | |
margin-left | |
margin | |
Umriss-Eigenschaften | outline-width |
outline-style | |
outline-color | |
outline | |
Innenabstands-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 des Seitenrahmens. Die @page
At-Regel kann über die CSS-Objektmodell-Schnittstelle CSSPageRule
aufgerufen werden.
Hinweis: Das W3C diskutiert, wie mit Viewport-bezogenen <length>
Einheiten, vh
, vw
, vmin
und vmax
umzugehen ist. In der Zwischenzeit sollten Sie diese nicht innerhalb einer @page
At-Regel verwenden.
Verwandte Eigenschaften
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.
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 der <page-body>
enthält:
- Seiten-Eigenschaften
- Seiten-Margin-Eigenschaften
und <pseudo-page>
diese Pseudoklassen darstellt:
Margin-At-Regeln
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
Seiten-Margin-Eigenschaften
Die Seiten-Margin-Eigenschaften sind die Menge an CSS-Eigenschaften, die in einer beliebigen individuellen Margin-At-Regel festgelegt werden können. Sie umfassen:
Seiten-Margin-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 |
Margin-Eigenschaften | margin-top |
margin-right | |
margin-bottom | |
margin-left | |
margin | |
Umriss-Eigenschaften | outline-width |
outline-style | |
outline-color | |
outline | |
Innenabstands-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 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.
Beispiele
Verwenden der Size-Eigenschaft zum Ändern 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% 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;
}
}
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.
Beispiele für @page Pseudoklassen
Bitte beziehen Sie sich auf 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
BCD tables only load in the browser
Siehe auch
- 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