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 Seitenmedien erläutert. Außerdem erfahren Sie, wie Sie mit dieser Funktion die Druckausgabe Ihrer Webseiten verbessern können.
Die CSS enthalten Spezifikationen zu Paged Media, das CSS Paged Media Module und CSS-generierte Inhalte für Paged Media. Sie definieren Funktionen, die nur beim Drucken einer Seite verwendet werden (einschließlich 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 @page-At-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 herum festlegen. Ab Chrome 131 können Sie mithilfe von generierten Inhalten auch Inhalte zu den Rändern hinzufügen, indem Sie ein Targeting auf den relevanten Rand bei der Regel vornehmen.
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 aufgeteilt, von denen jedes eine entsprechende At-Regel hat.
@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 des oberen und unteren Felds sowie die Breite des linken und rechten Felds werden durch die Ränder definiert, die mit @page festgelegt werden. 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
Wenn Sie Randfeldern Inhalte hinzufügen möchten, verwenden Sie CSS-generierte Inhalte, 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
Beim Drucken über einen Browser fügt der Browser automatisch einen Seitenrandinhalt hinzu, sofern Platz zur Anzeige vorhanden 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 umfassen 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> gekennzeichnet sind. Dabei wird der Inhalt jeder <h1> im rechten oberen Rand auf den rechten Seiten verwendet. Wenn er zum nächsten <h1> gelangt, wird der Wert für die Ränder nach diesem Zeitpunkt 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 für Querverweise.
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;
}