Jedes moderne CMS bringt eine enorme Druckfunktion mit, die den Inhalt extra "druckoptimiert" anzeigt. Dabei kann es so einfach sein eine druckoptimierte Ausgabe zu definieren. Mit CSS ist es möglich Medientypen eigene CSS-Dateien zuzuweisen.Stylesheet-Bereiche definieren

Um den verschiedenen Medientypen eigene CSS Eigenschaften zuzuweisen muss nur eine weitere Information in das CSS-Tag geschrieben werden:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

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

Mit der Angabe media="print" weiß der Browser nun, dass er diese Datei nutzen muss, sobald das Dokument gedruckt werden soll. Die CSS-Datei screen wird dagegen bei einem Druck ignoriert.

Stylesheets definieren

Aber das ist ja noch nicht alles. Der Besucher möchte ja nur den Inhalt gedruckt bekommen und nicht das Menü, mögliche Hintergrundbilder oder Farben usw. Auch soll nicht das farbenfrohe Logo genutzt werden, sondern das Printlogo. Und genau in diesem Moment kommt uns die strikte Trennung von Inhalt und Layout zugute.

Wir blenden unerwünschte Blöcke mit der Eigenschaft display: none; aus, binden das Printlogo statt des Screenlogos ein, stellen die Hintergrundfarbe auf Weiß und die Schrift auf Schwarz.

Link zum drucken

Nun kann man zusätzlich noch ein Druckicon oder einen Text verlinken, welches automatisch den Druckdialog startet. Dafür nutzen wir die vorderfinierte Javascript-Funktion print();
<a href="javascript:window.print()">Diese Seite drucken</a>

Statt des Textes kann man, wie schon gesagt, auch eine Grafik nutzen. In diesem Fall aber nicht den alternativen Text vergessen.
<a href="javascript:window.print()"><img src="print.png" alt="Druckgrafik- Klick zum drucken" /></a>

Diesen Link positionieren wir nun an der gewünschten stelle auf der Seite.