Richtig Druck machen – Einfaches Stylesheet für die Druckausgabe

Informative Quellen:
http://www.style-sheets.de/guide/medien/print
http://www.mediaevent.de/css/pagedmedia.html
http://aktuell.de.selfhtml.org/artikel/css/drucklayout/

CSS Webseiten bieten neben vielen anderen, noch einen weiteren netten Vorteil: man kann über eine print.css auch das Aussehen des Drucks einer Webseite verbessern. Die Voreinstellungen des Browsers für die Printausgabe sind zwar hinreichend, aber schön ist erstens was anderes und zweitens werden doch auch noch viele Bilder mitegdruckt, was nicht sein muss. Daher war ich erfolgreich in Sachen Print.css unterwegs und beschreibe hier mal kurz, was ich gemacht habe.

Zuerst eine leere Datei unter print.css abspeichern. Der Name kann natürlich frei gewählt werden.

Print.css einbinden

In einem WordPress-Blog kann man die template-url benutzen um die print.css im „head“ richtig zu verlinken:

<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('template_url') ?>/print.css" />

Inhalte entfernen

Bei der Erstellung einer Druckausgabe muss man sich nun dem zuwenden, was alles nicht auf der Seite erscheinen soll. Was soll beispielsweise ein User mit der ausgedruckten Navigation? Was kann er mit der Sucheingabemaske anfangen? Nichts – also weg damit.

Am besten ist es, etappenweise vorzugehen. Also immer mal wieder in der Druckvorschau schauen, was noch vorhanden ist und weggeschaltet werden muss.

Inhalte lassen sich auch mit visibilty hidden wegschalten. Im Unterschied zu display:none; wird aber der Platz, den das Element ohne hidden einnehmen würde, frei gehalten, was zu unschönen leeren Passagen führt.

Schrift wählen

Auf einem Bildschirm kann man besser eine serifenlose Schrift lesen, auf gedrucktem Papier eine Schrift mit Serifen, wie z.B. die Times New Roman. Da Grau weniger schwarze Tinte verbraucht, als reines Schwarz, habe ich die Farbe auf einen schönen Grauwert gesetzt. Dagegen halten kann man, dass der User bevormundet wird, weil er nun den Tintenfluss nicht mehr selbst einstellen kann. Ich weiß â€¦ aber der Designer in mir war stärker und ich habe auch keine Serifenschrift verwendet. Frevel … ;-))

Zum Übertragen der Schrifteigenschaften benutze ich den Star-Selektor um in einem Rutsch alle Elemente anzusprechen:

{font: 10pt 'Times New Roman', serif; color:#7a7a7a;}

Man beachte: Für die Schriftgröße wird die Einheit pt gewählt!

Später kann man durch Ausnutzung der Überschreibregel einzelne Überschriften (insbesondere Permalink) herausnehmen und hierfür ein bisschen Farbe ins Spiel bringen:
h1, h2, h3, h4, h5, h6, h1.headtitle, h2.posttitle a.permalink
{font: normal 12pt Verdana, sans-serif;color:#CD3200;}

Hintergrundfarben

Ganz wichtig für Webseiten mit farbigem Hintergrund:
* {background-color: #FFF;}
Alle Hintergrundfarben auf weiß setzen.

Seitenumbruch

Schön für einen Blog finde ich es, wenn jedes posting eine eigene Seite bekommt. Hierfür können page-break-after: always; oder page-break-bevor:always: ins Spiel gebracht werden.

In meinem WordPress-Theme konnte ich den Seitenumbruch durch Zuordnung zum div post-content erreichen.
.post-content {page-break-after:always;}

Und das war es auch schon.
Ich werde das in Zukunft für jede Webseite so machen. Ist ein bisschen Arbeit, aber dafür doch etwas benutzerfreundlicher – find ich.