Veröffentlicht: 30. Oktober 2024
Ab Chrome 131 können Sie mit CSS Inhalte in den Seitenrändern hinzufügen, wenn Seiten gedruckt werden. In diesem Beitrag wird das Seitenmodell für seitenorientierte Medien erläutert und wie Sie diese Funktion verwenden können, um die Druckausgabe Ihrer Webseiten zu verbessern.
CSS enthält Spezifikationen für seitenbasierte Medien, das CSS-Modul für seitenbasierte Medien und von CSS generierte Inhalte für seitenbasierte Medien. Sie definieren Funktionen, die nur beim Drucken einer Seite verwendet werden, einschließlich der Ausgabe als PDF. Es gibt User-Agents, die dieses CSS unterstützen und mit denen Sie Bücher und andere Druckmaterialien aus HTML und CSS generieren können. Diese Funktion wurde in Webbrowsern jedoch nie gut unterstützt, obwohl wir häufig PDFs aus Anwendungen drucken oder erstellen müssen.
Chrome und Firefox unterstützen die At-Rule-Funktion @page. 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 herum festlegen. Ab Chrome 131 können Sie auch generierte Inhalte verwenden, um den Rändern Inhalte hinzuzufügen. Dazu müssen Sie die entsprechende At-Rule für Ränder verwenden.
Das Seitenmodell
Das Seitenmodell, das in Seitenmedien verwendet wird, definiert einen Seitenbereich, also das Blatt Papier. Innerhalb des Seitenbereichs befinden sich ein Seitenrand, ein Seitenrand, ein Seitenabstand und schließlich der Seitenbereich, in dem Ihre Inhalte angezeigt werden. Beim Drucken werden die Inhalte auf so viele Seiten aufgeteilt, wie erforderlich sind.
Der Seitenrand wird dann in 16 Felder unterteilt, die jeweils eine entsprechende At-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öße des Ränderbereichs
Die Höhe der oberen und unteren Felder sowie die Breite der linken und rechten Felder wird durch die mit @page festgelegte Rändergröße bestimmt. Die Eckfelder haben daher eine feste Größe, die durch die Überschneidung dieser Ränder entsteht. Die drei Felder zwischen den Ecken sind jedoch flexibel. Sie verhalten sich ähnlich wie Felder in einem Flex-Layout mit flex: auto, d. h., sie dehnen sich, um den gesamten Bereich auszufüllen. Wenn Sie jedoch einen langen Text in einen Bereich einfügen und in die anderen nichts, wird der Bereich mit dem Text vergrößert, anstatt den Text umzubrechen.
Ränderfeldern Inhalte hinzufügen
Verwenden Sie CSS-generierte Inhalte, um Ränderfeldern Inhalte hinzuzufügen, genau wie bei den Pseudoelementen ::before und ::after. Verwenden Sie in diesem Fall das Attribut für das Feld, auf das Sie das Targeting vornehmen möchten. Mit dem folgenden CSS wird der Text „Mein Buch“ in das Feld für den linken unteren Rand oder auf die rechten Seiten eingefügt. Außerdem wird der Text formatiert.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Neben Textzeilen können Sie den Rändern auch Seitenzähler hinzufügen. Der vordefinierte Zähler page enthält die aktuelle Seite. Mit dem folgenden CSS-Code wird das Bild 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, fügt der Browser automatisch etwas Inhalt in den Seitenrand ein, wenn 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 auf einer Seite auf „0“ setzen oder einen Wert festlegen, der so klein ist, dass kein Platz für die Browser-Header und ‑Fußzeilen bleibt, werden diese nicht angezeigt.
Aufgrund des Standardseitenlayouts in Chromium wird verhindert, dass die Browserinhalte auf den folgenden Seiten angezeigt werden, auch wenn dort Platz vorhanden ist, wenn auf der ersten Seite des gedruckten Dokuments kein Platz für die automatischen Inhalte vorhanden ist.
Zukünftige Möglichkeiten für Medien mit Seiten
Die Spezifikationen für seitenorientierte Medien enthalten mehrere weitere Funktionen, die im Artikel Design für den Druck mit CSS beschrieben werden. Wenn Sie einen Anwendungsfall für eine der folgenden Funktionen haben, fügen Sie ihn den verknüpften Fehlern hinzu.
Strings festlegen
In Büchern wird der Titel des aktuellen Kapitels oft im Rand gedruckt. Dieser Titel kann nicht in Ihr CSS-Dokument hartcodiert 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 Kapiteltitel als <h1> markiert sind. Dabei wird der Inhalt jeder <h1> im rechten oberen Rand auf den rechten Seiten verwendet. Wenn der Wert den nächsten <h1> erreicht, wird er für Ränder 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
Nach dem Drucken eines Dokuments werden Verweise auf andere Seiten in der Regel durch die Seitennummer angegeben, unter der sich der Verweis befindet. Diese Querverweise können mit target-counter erstellt werden. Wenn Sie diese Option auf einen Link anwenden, wird beim Klicken auf den Link zur Referenz im Web gesprungen. Beim Drucken wird die Seitennummer angezeigt.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Chromium-Fehler bei Querverweisen
Fußnoten
Fußnoten sind auch eine Funktion der Spezifikationen für seitenbasierte Medien. Verwenden Sie in HTML eine Klasse, um Text zu kennzeichnen, der als Fußnote gekennzeichnet werden 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;
}