Eigene Druckvorschau erstellen

Alternative CSS-Stylesheets

Moderne Content-Management-Systeme bieten meist ein zusätzliches Druck-Layout an. Haben Sie Ihre Seite aber selbst erstellt, zeigen wir Ihnen hier, wie Sie mit CSS eine eigene Druckvorschau erstellen.

Alternative Stylesheets

© Archiv

Alternative Stylesheets

Das Drucken von Webseiten ist sicherlich seit den inzwischen verlässlichen Speichermethoden von HTML-Seiten zur Seltenheit, jedoch nicht zur Ausnahme geworden.

Gerade bei wissenschaftlichen Artikeln, Schritt-für-Schritt-Anleitungen, Rechnungen, elektronischen Tickets und Ähnlichem bietet sich der Druck an, sei es um bequem handschriftliche Anmerkungen machen zu können, sei es zum Archivieren von Belegen und Dokumenten.

Dies ist bei der reinen Bildschirmausgabe nur schwer möglich und birgt bei Drucker-unfreundlichem Layout ein hohes Frustpotenzial.

Zwei Alternativen

Für Besitzer einer Website, welche diesen Dienst anbieten möchten, bleiben zwei Alternativen: Entweder sie pflegen die Inhalte doppelt in einer normalen und einer druckoptimierten Version oder sie schaffen sich auf Basis von CSS eine automatisch optimierte Seite für den Ausdruck.

Letzteres Vorgehen ist sicherlich zu bevorzugen - zwar bedeutet es ein wenig mehr Aufwand bei der Erstellung der Webseite, dafür müssen sie sich im Nachhinein nicht um die doppelte Pflege der Inhalte kümmern und können die entsprechenden CSS-Definitionen vielfältig wiederverwenden.

Als Grundlage für dieses Beispiel wird eines der beiden Beispiele aus der Ausgabe 01/2009 herangezogen. Dieses zeigt eine Webseite mit zwei Spalten, einigen Formatierungen und Überschriften sowie einem grauen und einem schwarzen Hintergrund.

In mehreren Schritten wird diese Webseite so optimiert, dass ein Ausdruck ohne Hintergrundfarben und mit einer optimierten Ausrichtung der Inhalte für den Drucker möglich ist.

Medientypen

Im Beispiel sind zur Vereinfachung alle Stylesheet-Definitionen in das HTML-Dokument eingegliedert und nicht in einer separaten Datei ausgelagert. Deswegen sieht die Definition für das Stylesheet folgendermaßen aus:

<style type="text/css" media=
"screen">

Wenn Sie lieber mit einer zusätzlichen Datei für die CSS-Definitionen arbeiten möchten, sieht die Verlinkung wie folgt aus:

<link rel="stylesheet" type=
"text/css" href="myStyle.css" media="screen" />

In beiden Fällen ist der Medientyp der Bildschirm (media="screen"), die im Folgenden definierten Formatierungen gelten also für die direkte Ausgabe im Browser.

Als Alternativen bietet CSS noch zwei weitere Medientypen an:

all - diese Definitionen gelten für alle Ausgaben und sind somit immer zutreffend. • print - die Festlegungen gelten nur für die Ausgabe auf dem Drucker.

Die Medientypen bilden die Grundlage für das Aussteuern der unterschiedlichen Ausgaben auf dem Bildschirm und dem Drucker.

Radikale Bereinigung

Für die Erstellung einer Druckansicht sollten Sie Ihren Text als Erstes von allen Formatierungen befreien und sich anschließend schrittweise an die Optimierung machen.

Bei der Zuweisung der Formate zu den Style- sheets ist für jede Definition entscheidend, ob diese für alle Medien gilt oder nur für den Bildschirm oder den Drucker. Entsprechend wird eine Verteilung der Formatierungen angegangen.

Das Zurücksetzen von Außen- und Innenabstand soll für alle Elemente und alle Medientypen gelten.

<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".