Paged Media – CSS für den Druck

Drucker-Stylesheets mit @page-Regel

Webseiten machen beim Drucken selten einen guten Eindruck. Erst spezielle Stylesheets für den Drucker formatieren die Webseite für die Ausgabe auf dem Papier.

Stylesheets für den Druck werden als separate CSS-Datei im Head der Seite eingebunden oder durch die @media-Regel.

Schriftgrößen und Schriftfamilie

Auf dem Papier herrscht 'pt'. Die Schriftfamilie durch eine Systemschrift ersetzen und evt. auf eine Serifenschrift umsteigen.

<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; 
}

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) ") ";}

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: 400px; 
}

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

http://myhomepage.de/node/137

Der WordPress-Editor hält einen Kurzlink parat, der schneller und weniger fehlerlastig abgelesen und eingetippt werden kann.

Kurzlink in WordPress anzeigen lassenBeitrag bearbeitenCSS für den Druck von WebseitenPermalink: http://www.meineseite.de/webdesign/css-webseiten-schoener-druckenBearbeitenBeitrag ansehenKurzlink ansehenhttp://www.meineseite.de/?p=2377URLAbbrechenOKDateien hinzufügenVon "http://www.meineseite.de":Erstellen

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

CSS für den Druck

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 die Seitengestaltung erweitert.

Das CSS2-Modell einer Seite gibt an, 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 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, anhand derer beim Falten und Beschneiden des Papiers die richtige Reihenfolge festgestellt wird.

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 Generated Content for Paged Media Module W3C Working Draft 29 November 2011

size / marks

nicht mehr Teil von CSS2.1

page-break-before
page-break-after

IE5+ M1 N6 O5+ S1 Erblich: Ja

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.

Nur Opera unterstützt alle Werte. Firefox und Safari ignorieren left und right, nicht aber avoid.

page-break-inside

O5 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.

orphans | widows

O5+ CSS2 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

O5+ CSS2 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.

fist | left | right

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