13 Print CSS

Einige Elemente einer Webseite sind auf Papier überflüssig. Suchfeld oder Navigationsleiste sowie Werbebanner sind nur einige davon. Zudem werden längere Texte in der Regel lieber auf Papier gelesen. Es gibt viele Gründe Webseiten auszudrucken. Zeitungen bieten längst spezielle Printversionen zu den Artikeln an. Diese erfordern aber meist eine Serverseitige Verwaltung der Inhalte (Content Management System). Die Druckversion muss zudem extra vom Server angefordert werden, das führt zu mehr Traffic, und lohnt sich meist nur für grosse Sites. Mit einem Print CSS und einem neuern Browser, gibts eine einfachere, schnellere Möglichkeit Websites für den Druck gut aussehen zu lassen, die zudem keinen Traffic generiert. Hier die Schritte zu einem print.css

media="print" (media-Attribut )

Das Bildschirm-Stylesheet muss es auf "screen" gesetzt werden,
das Druck-Stylesheet auf "print". Siehe auch CSS einbinden.

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

font und background-color (Schrift- und Hintergrundfarbe)

Serifen Schriften eigenen sich in der Regel besser als Laufschrift für den Ausdruck. Titel können in anderen Standartschriften dargestellt werden. Die Schriftgrösse sollte für den Drucker auf points eigestellt werden. Die Schriftfarbe sollte schwarz und die Hintergrundfarbe transparent sein.

body {
background-color: transparent;
font-size: 12pt;
font-family:'Times New Roman',Times,serif;
color:#000000; }

display (Navigationen ausblenden)

Beim Ausdruck sind Hintergrundbilder sowie Werbebanner und search Buttons unerwünscht. Lesbarkeit und Tintenverbrauch sind 2 der Gründe. Elemente (div) können mit display:none; ausgelendet werden.

#navi   { 
background-color:transparent;
padding-top: 10px;
display:none;}

padding und margin (Ränder)

Wenn padding und margin auf 0px eingestellt sind, wird sichergestellt, dass der Text die ganze Breite des Papiers nutzt. Beim Bildschirm wäre das sinnlos.

#content   { 
background-color:transparent;
padding: 0px;
margin: 0px;
}

a:visited:after (Links)

Damit ein Link auch im ausdruck Sinn macht setzt man mit den Pseudo-Element:after und der Eigenschaft:content die komplete URL des Hyperlins neben den Verweis. Diese Eigenschaft geht zur zeit im Mozilla und im Safari, sollte aber dafür auch eingesetzt werden.

a:after, a:link:after  { 
color: #000000;
background-color:transparent; 
content: " * Link " attr(href) "* "; }

a:visited:after {
color:#000000; 
background-color:transparent;
content: " * Link " attr(href) "* "; }

page-break (Seitenumbruch)

Mit page-break-after:always; kann man einen Seitenumbruch erzwingen. Mit avoid verhindert man einen Seitenumbruch.

page-break-after:always;
page-break-before:always;
page-break-after:avoid;
page-break-before:avoid;