Mit wenig Aufwand Webseiten für Print optimieren
Sehr viele Websites, insbesondere Business Sites, bieten keine für den Druck optimierten Seiten an, was einen unprofessionellen Eindruck vermitteln kann. Klar, in Zeiten von Tablets könnte man zu dem Schluss kommen, dass Ausdrucken von Webseiten ein Relikt aus der Vergangenheit darstellt. Jedoch werden insbesondere im Geschäftsumfeld viele Seiten weiterhin zu Papier gebracht. Es ist zu vermuten, dass das Thema druckoptimierte Webseiten auch in Zukunft noch relevant sein wird, denn Papier ist für Viele immer noch ein geeignetes Medium, um beispielsweise Annotationen in Meetings zu machen.
Media Queries nutzen
Optimieren von Webseiten für den Druck ist keine große Sache, von daher ist es um so verwunderlicher, dass es relativ selten getan wird. Wir müssen lediglich auf CSS2 zurückgreifen und uns die Media Queries zu Nutze machen. Im head des HTML-Dokuments bzw. in einem entsprechenden Template, falls wir Druckoptimierung in einem CMS-Projekt einsetzen wollen, ist ein spezielles Print-Stylesheet einzubinden.
<head>
<title>NP rules</title>
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
</head>Entscheident dabei ist das Attribut media mit dem Wert print. Somit wird dieses Stylesheet verwendet, sobald der Benutzer über den Browser die Druckfunktion aufruft.
Print Stylesheet definieren
Was wir nun lediglich tun müssen, ist in dem speziellen Stylesheet existierende Styles zu überschreiben oder ergänzende Styles zu definieren, die nur für die Druckversion greifen sollen.
Ungewünschte Elemente ausblenden
Wir müssen nun dafür Sorge tragen, dass ungewünschte Bereiche auf der Seite, wie beispielsweise Header, Footer oder Sidebar ausgeblendet werden.
#header, #footer, aside {
display: none;
}Im vorherigen Snippet wurde exemplarisch davon ausgegangen, dass die Header- und Footer-Bereiche über HTML-Elemente mit den IDs header bzw. footer realisiert wurden. Für die Sidebar wurde in diesem Beispiel der semantische Weg via HTML5 Tag aside gewählt.
Damit haben wir schon einiges abgefrühstückt, was in unserer Druckversion nicht erscheinen soll. In der Druckvorschau des Browsers kann man direkt sehen, dass die spezifizierten Elemente nicht erscheinen.
Was ist allerdings, wenn wir bestimmte Elemente innerhalb von Container-Elementen ausblenden möchten? Auch kein Problem! Wir können das beispielsweise über eine CSS-Klasse no-printbewerkstelligen, die wir allen auszublendenden Elementen im HTML-Markup zuweisen.
<div>
<h2>print me</h2>
<p class="no-print">do not print me</p>
</div>In unserem Print-Stylesheet sieht dann die CSS-Klasse wie folgt aus.
.no-print {
display: none;
}Optimierung mit Sass
In unseren letzten beiden Snippets sind wir einen Weg gegangen, bei dem wir im Markup, d.h. direkt in der View, nicht-fachliche CSS-Klassen verwenden müssen. Weiterhin kann dass den HTML-Markup aufblähen. Es wäre doch schön, wenn man diese künstlichen Klassen vermeiden könnte.
Das ist mit Sass - und natürlich auch anderen Precompilern, wie z.B. Less - möglich. Folgendes Snippet demonstriert das Vorgehen.
@mixin do-not-print {
display: none;
}
#content p {
@include do-not-print;
}In diesem Snippet definieren wir ein Mixin do-not-print, was letztendlich nur HTML-Elemente ausblendet. Im Endeffekt genau das, was wir mit unserer Klasse no-print gemacht haben.
Nun können wir jedoch, was exemplarisch der Selektor zeigt, Elemente ausblenden, ohne dass wir die View anfassen müssen. In diesem Beispiel werden in einem Container-Element mit der ID content alle p Tags ausgeblendet und somit aus der Druckversion genommen.
Weitere Anpassungen
Es ist je nach Projektkontext sinnvoll, für den Druck andere Formatierungen einzusetzen, als für die Anzeige auf dem Bildschirm. Dies gilt vor allem für positionierte Bereiche, ebenso für Farbgestaltung und Schriftarten. Beispielsweise möchte man die Schriftfarbe für die Druckversion generell auf schwarz setzen. Die Schriftart sollte im Gegensatz zur Screen-Version mit Serifen sein.
* {
font-family:"times new roman",times,serif;
text-align:justify;
}Unter Umständen ist auch font-size anzupassen. Folgende Tabelle hilft etwas, geeignete Größen zu definieren bzw. pt auf px zu mappen.
Ein wichtiger Punkt ist, im Print-Stylesheet dafür zu sorgen, dass keine Inhaltsbereiche abgeschnitten sind und die volle Papierbreite für den Druckinhalt genutzt wird. Meistens reicht es aus, wenn Container-Elemente folgende Styles bekommen
#container, #container2, #content {
width: 100%; margin: 0; float: none;
}Druckoptimierung durch CSS-Frameworks
Das auf Sass aufsetzende CSS-Authoring-Framework Compass bietet spezielle Utilities an, um druckoptimierte Stylesheets zu erzeugen.
Keep It Simple, Stupid (KISS)
Das Print-Stylesheet benötigt in der Regel wenige Style-Anweisungen. Prinzipiell sollte darauf verzichtet werden, sehr viele Selektoren zu nutzen und sehr viele Styles zu überschreiben. Ansonsten wird das Pflegen des Print-Stylesheets ein aufwändigerer Task, als es sein müsste. Man sollte hinterfragen, ob es wirklich nötig ist, sämtliche Elemente zu listen und zu überschreiben.
Auf aufwändige Umpositionierung von Content im Print-Stylesheet sollte man wenn möglich auch verzichten. Eventuell ist eine Sidebar, die im Screen-Stylesheet, oben rechts positioniert ist, im Print-Stylesheet nicht so einfach an das Ende des Druck-Contents zu positionieren. Manchmal ist dieser Content einfach nicht in der Druckversion nötig und es reicht ein einfaches Ausblenden.
Designed man das Markup gut, so sollte es schon möglich sein, eine druckbare Version der Webseite zu haben, wenn man über den Browser sämtliche Styles deaktiviert und somit der natürliche Fluss der HTML-Elemente die Reihenfolge bzgl. der Anzeige definiert. Falls wir solch Markup haben, fällt es leicht, mit wenigen Anweisungen im Print-Stylesheet eine ansprechende Druckversion zu bauen.
Ein paar nützliche Quellen
Unter folgenden Links findet man nützliche Tutorials und Ressourcen zum Thema Druckoptimierung.