CSS, HTML und Javascript mit {stil}

@page-Regel – CSS für den Druck

CSS für den Druck mit @page-Regel

Webseiten machen beim Drucken selten einen guten Eindruck. Erst spezielles CSS für den Druck formatiert die Webseite für die Ausgabe auf dem Papier.

Dabei muss das CSS für den Druck der Seite nicht annähernd so komplex sein, denn viele Elemente einer Webseite sind im Druck schlichtweg überflüßig.

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

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

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

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 auf dem Papier keine klickbaren 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

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

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 Generated Content for Paged Media Module
W3C Working Draft, 13 May 2014

size / marks

nicht mehr Teil von CSS2.1

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 oder zwischen einem figure-Element und seiner 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.

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

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

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

orphans | widows

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.

fist | left | right

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

CSS Print PAGED MEDIA Beitrag bearbeitenCSS für den Druck von WebseitenPermalink: https://www.mediaevent.de/css-links-drucken/BearbeitenBeitrag ansehenKurzlink ansehenhttp://www.meineseite.de/?p=2377URLAbbrechenOKDateien hinzufügenVon "http://www.meineseite.de":Erstellen A A