Print CSS

Einige Elemente einer Webseite sind auf Papier überflüssig. Suchfeld oder Navigationsleiste sowie Werbebanner sind nur einige davon. Längere Texte werden  in der Regel lieber auf Papier gelesen. Es gibt viele Gründe Webseiten auszudrucken. Zeitungen bieten oft 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  gibt es 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-Attribut media="print"

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">  

Schrift- und Hintergrundfarbe background-color/color

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

Navigationen ausblenden display

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.

nav   { display:none;}

Ränder und Rahmen padding/margin/border

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: 0;
margin: 0;
}

Links a:after

Damit ein Link auch  Ausgedruck Sinn macht setzt man mit den Pseudo-Element :after und der Eigenschaft :content die komplete URL des Hyperlins neben den Verweis.

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

Seitenumbruch page-break

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;