Druckvorschau - Cascading Style Sheet zum drucken

Vorwort

Manchmal ist es notwendig eine Webseite zu drucken. Untersuchungen haben ergeben, dass Anwender es bevorzugen lange Texte zu drucken, um sie anschließend zu lesen. Anstatt dies unter erschwerten Bedingungen am Bildschirm zu tun.
Das liegt zum einen daran, dass der Mensch das Scrollen als äußerst unangenehm empfindet, weil man dadurch schnell die Übersicht und Kontrolle verliert. Zum anderen liegt es daran, dass das Bildschirmlesen durch das direkte Licht des Bildschirms, im Gegensatz zu reflektiertem Licht bei Papier, mit zunehmender Dauer anstrengend wird.

Gut ist es dann für so einen Fall vorbereitet zu sein. Verwendet man CSS kann man zum drucken einen extra Style Sheet erstellen und so seine Inhalte druckgerecht aufbereiten.

Der Print Style Sheet hilft überflüssige Bildschirmelemente, wie zum Beispiel die Navigation oder Hintergrundbilder, im Druckbild auszublenden.
Dieser Artikel ist für Sie geeignet:

Wenn Sie Erfahrung im Umgang mit CSS besitzen.
Wenn Sie eine Scriptsprache wie PHP beherrschen.

Externen Cascading Style Sheet einbinden

Um eine saubere Trennung zwischen Druck- und Bildschirm Style Sheet zu erreich. Binden Sie am besten Ihren Style Sheet als Datei im Kopfbereich der Seite ein.

Cascading Style Sheets einbinden

...

<head>
        ...

<link rel="stylesheet" type="text/css" href="/css/gedit.net/v0.5/default/screen/style.css" media="all">
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="/css/gedit.net/v0.5/default/screen/ie/style.css" media="all">
	<![endif]-->
        ...

<link rel="stylesheet" type="text/css" href="/css/gedit.net/v0.5/default/print/style.css" media="print">
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="/css/gedit.net/v0.5/default/print/ie/style.css" media="print">
	<![endif]-->
        ...

</head>
...

Der im Kopfbereich eingebundener Style Sheet ist mit media="all" deklariert. Er ist also sowohl als auch für die print sowie screen Ausgabe zuständig.
Der darauf folgende Print Style Sheet überschreibt, falls der Anwender die Webseite druckt, Statments und Regeln die im media="all" Style Sheet deklariert wurden.

Anweisungen im Print Style Sheet

Im Folgenden mehrere Beispiele für Statements oder Deklarationen im Print Cascading Style Sheet der mit media="print" eingebunden wird.

Print Cascading Style Sheet

/* Hintergrundbild nicht mitdrucken */
body {
         background-image: none;
}

/* Links nicht unterstreichen */
a {
         text-decoration: none;

/* Navigation nicht mitdrucken */
#navigation {
         display: none;
}

...

Es gibt noch eine Reihe weiterer media Typen für Sprachausgabe oder Handhelds. Unter <_http://www.w3.org/TR/CSS2/media.html>_ oder SelfHTML - Formate einbinden finden Sie mehr zu diesem Thema.

Druckvorschau

In meinem Fall ist eine Druckvorschau recht einfach gelöst. Ich hab einfach eine if Abfrage in mein Template integriert, die in etwa so aussieht:

if Abfrage Vorschau

# if Abfrage
$mediatype_print = "print";

if ( $_GET['print'] == true ) $mediatype_print = "all";

# Cascading Style Sheet
<link rel="stylesheet" type="text/css" href="/path/to/css/files/print/style.css" media="$mediatype_print">

# Link Druckvorschau
# rel="nofollow" hab ich verwendet um doppelten Content bei
# Suchmaschinen zu vermeiden.
<a rel="nofollow" href="REQUEST_URI?print=1" title="Druckvorschau">Druckvorschau</a>

Die if Abfrage setzt, falls $_GET['print'] true zurück gibt, den Print Style Sheet von media="print" auf media="all". Was dazu führt das seine Statments sich auch auf die Bildschrimausgabe auswirken.

Links und Quellen

Druckvorschau dieser Seite - <http://gedit.net/Artikel;Print_Style_Sheet_mit_Druckvorschau,Druckvorschau>
gedit.NET - Print Cascading Style Sheet - </css/gedit.net/v0.5/default/screen/style.css>
gedit.NET - Screen Cascading Style Sheet - </css/gedit.net/v0.5/default/print/style.css>
W3C - CSS 2.0 Mediatypes - <http://www.w3.org/TR/CSS2/media.html>
SelfHTML - Formate einbinden - <http://de.selfhtml.org/css/formate/einbinden.htm>
Lesen im Cyperspace - Bildschirm gegen Mensch - <http://www.medien.ifi.lmu.de/fileadmin/mimuc/mmi_ws0304/exercise/aufsaetze/Markus_Haarlaender.html>
Lesen auf Papier vs. Lesen am Bildschirm - <http://lehrerfortbildung-bw.de/kompetenzen/gestaltung/layout/pdf-doc/pc-lesen.pdf>

Kommentare

Hallo,
danke für den Artikel hat mir sehr geholfen.
Ich hab allerdings mal überlegt ob es nicht einfacher ist das rel="nofollow" in die robots.txt zu schreiben mit
User-Agent: *
Disallow: print
Mfg Lars

Lars, Mittwoch, 29. Oktober 2008, 19:50

Hallo Lars,
die Idee ist gut. Ich hatte Sie auch. Schau mal bitte in die robots.txt.
Zudem hab ich noch im Headerbereich der Druckvorschauseiten <meta name="robots" content="noindex,follow"> notiert um ganz sicher zu gehen.
Wobei man unterscheiden muss zwischen nofollow und noindex.
Nofollow verhindert das der Crawler den Links folgt und noindex verhindert das die Webseite indiziert wird.
Die robotst.txt verhält sich wie nofollow,noindex. Sogesehn kann man sich dann das rel="nofollow" im Link und das robots Metatag sparen den das noindex ist vorallem wichtig um doppelte Inhalte bei Suchmaschinen zu vermeiden.
Liebe Grüße Simon

Simon Gattner, Donnerstag, 30. Oktober 2008, 21:01