Veröffentlicht: 30. Oktober 2024
Ab Chrome 131 können Sie mit CSS Inhalte in die Ränder von Seiten einfügen, wenn sie gedruckt werden. In diesem Beitrag wird das Seitenmodell für paginierte Medien erläutert und es wird beschrieben, wie Sie diese Funktion verwenden können, um die Druckausgabe Ihrer Webseiten zu verbessern.
CSS umfasst Spezifikationen für Seitenmedien, das CSS Paged Media Module und CSS Generated Content for Paged Media. Sie definieren Funktionen, die nur verwendet werden, wenn eine Seite gedruckt wird (auch als PDF). Es gibt User-Agents, die dieses CSS unterstützen und mit denen Sie Bücher und andere Drucksachen aus HTML und CSS generieren können. Diese Funktion wurde jedoch in Webbrowsern nie gut unterstützt, obwohl wir häufig Anwendungen ausdrucken oder PDFs daraus erstellen müssen.
Chrome und Firefox unterstützen die @page-Regel. Mit dieser Regel können Sie die Größe der Seite, auf die Sie drucken, und die Größe der Ränder um den Inhalt festlegen. Ab Chrome 131 können Sie auch generierte Inhalte verwenden, um den Rändern Inhalte hinzuzufügen. Dazu müssen Sie die entsprechende Randregel anvisieren.
Das Seitenmodell
Das im Seitenmedium verwendete Seitenmodell definiert einen Seitenrahmen, also das Blatt Papier. Innerhalb des Seitenfelds befinden sich ein Seitenrand, ein Seitenrahmen, ein Seitenabstand und schließlich der Seitenbereich, in dem Ihre Inhalte angezeigt werden. Wenn Inhalte gedruckt werden, werden sie auf so viele Seiten aufgeteilt, wie für die Darstellung erforderlich sind.
Der Seitenrand wird dann in 16 Felder unterteilt, die jeweils eine entsprechende @-Regel haben.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Größenanpassung des Randbereichs
Die Höhe der oberen und unteren Felder sowie die Breite der linken und rechten Felder werden durch die mit @page festgelegte Randgröße definiert. Die Eckfelder haben daher eine feste Größe, die durch den Schnittpunkt dieser Ränder bestimmt wird. Die drei Felder zwischen den Ecken sind jedoch flexibel. Sie verhalten sich ähnlich wie Felder in einem Flex-Layout mit flex: auto. Sie werden also so gedehnt, dass sie den verfügbaren Platz ausfüllen. Wenn Sie jedoch einen langen Textstring in ein Feld einfügen und nichts in die anderen, wird das Feld mit dem Text vergrößert, anstatt den Text umzubrechen.
Inhalte zu Randfeldern hinzufügen
Wenn Sie den Randboxen Inhalte hinzufügen möchten, verwenden Sie CSS-generierte Inhalte, genau wie bei den Pseudoelementen ::before und ::after. Verwenden Sie in diesem Fall die at-Regel für das Feld, auf das Sie die Ausrichtung vornehmen möchten. Mit dem folgenden CSS wird der Text „Mein Buch“ im unteren linken Randfeld oder auf rechten Seiten eingefügt. Außerdem wird der Text formatiert.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Neben Textstrings können Sie auch Seitenzähler in die Ränder einfügen. Der vordefinierte Zähler page enthält die aktuelle Seite. Mit dem folgenden CSS wird sie rechts unten auf rechten Seiten und links unten auf linken Seiten eingefügt.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Außerdem gibt es einen pages-Zähler, der immer die Gesamtzahl der Seiten enthält.
Hinweise zur Verwendung von Seitenrändern
Wenn Sie über einen Browser drucken, wird automatisch Seitenrandinhalt hinzugefügt, sofern dafür Platz ist. Das passiert auch dann, wenn Sie Inhalte hinzugefügt haben. Diese automatisch generierten Kopf- und Fußzeilen können im Druckdialog deaktiviert werden.
Wenn Sie die Ränder einer Seite auf 0 oder einen so kleinen Wert festlegen, dass kein Platz für die Browser-Kopf- und ‑Fußzeilen vorhanden ist, werden sie nicht angezeigt.
Aufgrund des Konzepts eines Standardseitenlayouts in Chromium wird der Browserinhalt nicht auf späteren Seiten angezeigt, wenn auf der ersten Seite des gedruckten Dokuments kein Platz für die automatischen Inhalte ist, auch wenn auf den späteren Seiten Platz vorhanden ist.
Zukünftige Möglichkeiten für seitenbasierte Medien
Die Spezifikationen für paginierte Medien enthalten mehrere andere Funktionen, die im Artikel Mit CSS für den Druck gestalten beschrieben werden. Wenn Sie einen Anwendungsfall für eine der folgenden Funktionen haben, fügen Sie ihn den verlinkten Fehlern hinzu.
Strings festlegen
In Büchern wird der aktuelle Kapiteltitel oft in den Rändern gedruckt. Dieser Titel kann nicht fest in Ihr CSS codiert werden, da er sich im Laufe des Buchs ändert. Mit der Property string-set können Sie einen Wert aus Ihrem HTML-Code festlegen, der dann in den generierten Inhalten verwendet wird. Im folgenden CSS wird davon ausgegangen, dass Kapitelüberschriften als <h1> gekennzeichnet sind. Der Inhalt jedes <h1> wird verwendet und oben rechts auf den rechten Seiten platziert. Wenn der nächste <h1> erreicht wird, wird der Wert für die Margen nach diesem Punkt aktualisiert.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Chromium-Fehler für string-set und string().
Querverweise
Wenn ein Dokument gedruckt wird, werden Verweise auf andere Seiten in der Regel durch die Seitenzahl angegeben, auf der der Verweis zu finden ist. Diese Querverweise können mit target-counter erstellt werden. Wird sie auf einen Link angewendet, wird beim Klicken auf den Link im Web zur Referenz gesprungen. Beim Ausdrucken wird die Seitenzahl angezeigt.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Chromium-Fehler für Querverweise.
Fußnoten
Fußnoten sind ebenfalls eine Funktion der Spezifikationen für Seitenmedien. Verwenden Sie in HTML eine Klasse, um Text zu kennzeichnen, der eine Fußnote sein soll, z. B.:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Verwenden Sie dann den footnote-Wert von float, um diesen Text in Fußnoten umzuwandeln. Sie wird beim Drucken des Dokuments aus dem Absatz entfernt und als Fußnote angezeigt.
.fn {
float: footnote;
}