CSS @page – Webseiten drucken

Webseiten drucken

Dabei ist das CSS für den Druck der Seite nicht annähernd so komplex wie für die Webseite, denn viele Elemente der Webseite sind im Druck schlichtweg überflüßig. Stylesheets für den Druck werden als separate CSS-Datei oder durch die @media-Regel eingebunden.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />
oder
@media print {
p { 
    font-family: Georgia, serif;
    font-size: 12pt;
}

h1 { font-family: Georgia, serif; 
     font-size: 28pt; 
}

Da das Drucker-Stylesheet für die Darstellung der Seite auf dem Monitor nicht benötigt wird, ist die externe CSS die bessere Wahl. Aber damit das CSS für den Druck nicht bei jedem Aufruf der Seite den Ladevorgang ausbremst, kommt es in den Fuß der Seite.

<head>
</head>
<body>
    …
    <link rel="stylesheet" type="text/css" href="print.css">
<body>

Da stört es nicht einmal den Validator, ein Link-Element am Ende des body-Tags ist durchaus erlaubt.

Schriftgrößen und Schriftfamilie

Auf dem Papier herrscht die Schriftangabe in Punkt – pt. Die Schriftfamilie durch eine Systemschrift ersetzen und evt. auf eine Serifenschrift umsteigen. Ebenfalls sinnvoll: schwarze Schrift statt grauer Absätze und bunter Header.

Für den Druck der Webseite gelten dieselben CSS-Eigenschaften, aber viele Elemente einer Webseite machen im Druck wenig Sinn: z.B. Navigationsleisten, Slideshows, Video, Audio-Elemente, Werbung und Formulare. Sie werden am besten ausgeblendet.

#sidebar {
    display: none;
}

Gedruckte Links sind ohne URL ihr Papier nicht wert, aber die URL lässt sich leicht sichtbar machen.

a:after { content: "( " attr(href) ") ";}

Der Seitenfuß oder footer-Elemente werden durch die URL der Seite ersetzt – nie vergessen, dass auf dem Papier keine klickbaren Links existieren. Content Management Systeme führen eine Kurzform der URL, z.B.:

https://myhomepage.de/node/137    // Drupal
https://www.mediaevent.de/?p=25   // WordPress

Das CSS für den Druck einer Webseite ist im Grunde genommen einfach. Was ein Drucker-Stylesheet komplex macht, ist die feste Seitengröße des Papiers.

CSS für den Druck von Webseiten

Während die Ausgabe auf dem Monitor und die Sprachausgabe fortlaufende Ausgaben sind, muss der Druck die Webseite meist auf mehrere Seiten aufteilen. Darum wurde CSS um Eigenschaften für Seitenbrüche erweitert.

Das CSS Box-Modell legt fest, wie ein Dokument innerhalb eines rechteckigen Bereichs – der Seitenbox – zu formatieren ist. Die Seitenbox ergänzt das Boxmodell, damit Autoren Papiergrößen, Ränder, Ausrichtung des Papiers und Seitenumbrüche angeben können.

Zum Verständnis des Seitenmodells in CSS2 sollte nicht nur der typische Desktop-Drucker zum Vergleich herangezogen werden. Der Desktop-Drucker druckt in der Regel eine Seite auf das passende Papier. Im Offsetdruck hingegen kann eine Seite auf ein A4+-Papier – das ist ein Bogen, der einige Zentimeter größer ist als DIN A4 – meistens jedoch auf noch größere Bögen gedruckt werden.

Das Modell beinhaltet die Seitenausgabe, wie wir sie von den Desktop-Druckern kennen: Dokumente werden Seite für Seite auf jeweils ein einzelnes Blatt gedruckt. Dazu kommt der doppelseitige Druck, der zwei Seiten auf ein Blatt Papier druckt, und der Druck mehrerer Seiten auf ein Blatt oder einen Bogen. Zusätzlich werden Signaturen ausgegeben, z.B. um Beschnittzeichen und eine Seitenbeschreibung, um die Reihenfolge beim Falten und Beschneiden des Papiers zu dokumentieren.

Seitendruck: Passermarken und Seitenfolge

Der Inhalt kann über die Seitenbox hinausgehen, wenn z.B. Bilder oder andere Elemente der Seite angeschnitten werden. Ein Anschnitt von Bildern, die über den Seitenrand hinausgehen sollen, wird durch einen negativen Abstand von der Seitenbox (margin) umgesetzt. Die jeweilige Realisierung ist dem User Agent – dem Druckertreiber – und einem Seitenschneider überlassen.

Autoren geben die Maße, die Orientierung, Ränder usw. der Seitenbox in der @page-Regel an. Eine @page-Regel besteht aus dem Schlüsselwort @page, einem optionalen Seitenselektor (gefolgt ohne Leerraum von einer optionalen Seitenpseudoklasse) und einem Block von Deklarationen (dem Seitenkontext). Die Seitenregel @page enthält die Ränder der Seite, z.B.

@page { margin: 2cm }

Die Eigenschaften border und padding können nicht auf die Seite einer Druckausgabe angewendet werden.

Die Pseudoklassen :first, :left und :right wurden für die Seitenausgabe definiert, um dem doppelseitigen Druck gerecht zu werden.

Der Seitenselektor gibt an, auf welche Seiten die Deklarationen anzuwenden sind. Ein Seitenselektor kann z.B. die erste Seite, alle linken Seiten oder eine Seite mit einem spezifizierten Namen ansprechen.

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

Inhalte im @page-Modell liegen in Blöcken oder Boxen. Boxen liegen horizontal auf der Seite. Dabei folgt die Oberkante einer Box hinter der Unterkante der vorhergehenden Box. Anders als die zugrunde liegende Seite können die Boxen die Eigenschaften margin, border und padding aufweisen, die bei der Druckausgabe auch respektiert werden.

Die Boxen werden vertikal auf unterschiedliche Weise ausgerichtet: anhand der Ober- und Unterkanten oder anhand der Grundlinie (baseline) des Textes in den Boxen. Der Text innerhalb einer Box liegt in einem rechteckigen Bereich, der Inlinebox.

Die Breite einer Inlinebox wird durch den umfassenden Block bestimmt. Die Höhe einer Inlinebox wird durch die Zeilenhöhe festgelegt. Dabei kann eine Zeile höher werden als die Box, in der sie liegt (wenn z.B. die Boxen so ausgerichtet wurden, dass die Grundlinien registerhaltig werden).

CSS Paged Media Module Level 3
W3C Working Draft, 18 October 2018

Bilder für den Druck der Webseite

Das CSS für den Druck muss viele Eigenschaften überschreiben oder zurücksetzen, denn Papier und Monitor haben entgegengesetzte Anforderungen. Bilder werden mit display:none verborgen oder auf eine geringe Größe gesetzt, um Papier, Zeit und Druckkosten im Rahmen zu halten.

img {
    max-width: 10cm; 
}

Kummer bereiten u.U. Bilder mit dem HTML-Attribut loading="lazy". Wenn der Benutzer nicht bis zum Ende der Webseite scrollt, sondern früher den Druckbefehl absendet, sind Bilder eventuell noch nicht geladen. Brauchbare Gegenmaßnahmen gibt es bislang nicht.

Seitenumbruch: page-break-before / page-break-after

Erblich: Ja

Wie und wann darf eine gedruckte Seite umbrechen? Per Vorgabe bricht die Seite um, wenn der bedruckbare Bereich gefüllt ist. Wenn das ausgerechnet nach einer Überschrift passiert, steht die Überschrift noch auf der leitenden Seite, aber der Inhalt zur Überschrift fließt in die Folgeseite. Gerade in Büchern gilt es, derart ungewollte Seitenumbrüche zu vermeiden. Ebenso unerwünscht sind natürlich auch Umrüche in der Mitte einer Tabelle, zwischen einem figure-Element und der Unterschrift bzw. Überschrift per figcaption.

page-break bestimmt, ob ein Seitenumbruch vor (before) oder nach (after) einem Element durchgeführt werden soll.

auto: ist die Voreinstellung und erzwingt keinen Seitenumbruch.
always: erzwingt stets einen Seitenumbruch vor/nach dem Element.
avoid: vermeidet Seitenumbrüche vor/nach dem Element.
left: veranlasst ein oder zwei Seitenumbrüche, so dass ein Element stets vor/auf der linken Seite ausgegeben wird.
right: veranlasst ein oder zwei Seitenumbrüche, so dass ein Element stets vor/auf der rechten Seite ausgegeben wird.

Nicht alle Browser unterstützen alle Werte: avoid fällt bei allen Browsern unter den Tisch, bei Firefox wirken zudem left und right nicht (doppelseitiges Drucken).

Seitenumbruch vor jeder Kapitelüberschrift

h1 {
  page-break-before: always;
}

Kein Seitenumbruch direkt nach einer Überschrift

h1, h2, h3, h4, h5 {
  page-break-after: avoid;
}

page-break-inside: Seitenumbruch innerhalb von Elementen vermeiden

Erblich: Ja

page-break-inside bestimmt, ob innerhalb eines Elements ein Seitenumbruch stattfinden kann.

auto: ist die Voreinstellung und erzwingt keinen Seitenumbruch.
avoid: vermeidet Seitenumbrüche vor/nach dem Element.

Kein Seitenbruch innerhalb von figure und table

table, figure {
  page-break-inside: avoid;
}

Fehler beim Seitenumbruch: orphans | widows

Einzelne Zeilen ab Anfang oder am Ende einer Seite wurden früher auch als Hurenkinder und Schusterjungen bezeichnet. Heute zieht man die Begriffe Seitenüberlauf vor.

Erblich: Ja

orphans: gibt an, wie viele Zeilen ein Absatz am Ende einer Seite enthalten muss.
widows: gibt an, wie viele Zeilen ein Absatz am Anfang einer Seite enthalten muss.

integer: ist per Voreinstellung 2

Wenn ein Absatz am Ende einer Seite weniger als integer Zeilen aufweist, wird ein Seitenumbruch eingefügt und der Absatz wird vollständig auf der nächsten Seite gesetzt.

Wenn ein Absatz am Anfang einer Seite weniger als zwei Zeilen aufweist, wird ein Seitenumbruch am Beginn des Absatzes eingefügt und der Absatz wird vollständig an den Beginn der nächsten Seite gesetzt.

:first |:left |:right

Erblich: Ja

Beim Druck von doppelseitigen Dokumenten wie Büchern oder Zeitschriften gibt es grundsätzlich drei Arten von Seiten: die erste, die linke und die rechte Seite.

first | left | right

first Einrichtung der Deckseite.
left linken Druckseiten eines Dokuments
right Formatierung der rechten Seiten

size / marks

nicht mehr Teil von CSS2.1

loading lazy: Bilder der Webseite werden nicht gedruckt

Wer nicht zuvor bis zu dieser Stelle der Webseite gescrollt hat, wird diese Bilder im Druck oder beim Speichern als PDF nicht sehen.

Bilder werden asynchron geladen – d.h. der Text ist schon da, während die Bilder noch nach und nach geladen werden. U.U. könnte Javascript den Druck verzögern und die Bilder laden, wenn der Benutzer einen Druckbefehl absetzt (How to lazy load images and make them available for print).

In dieser Hinsicht ist decoding="async" flexibler, denn die Bilder werden auch auf diese Weise auch asynchron geladen, aber bereits wenn der Browser »zwischendurch« die Zeit dafür findet.