Bewährt: Wie Du das optimale Print-Stylesheet erstellst

Auch heute gibt es noch viele Menschen, die sich das Internet ausdrucken möchten. Das kann verschiedene Gründe haben. Vielleicht will ein Team den Inhalt deines Beitrags im Meeting besprechen. Oder jemand möchte deinen Artikel dort lesen, wo er gewiss keinen Internet-Empfang hat. Um diese Menschen ansprechen zu können, benötigt jede Website immer noch eine CSS-Datei für den Druck, das sogenannte Print-Stylesheet.

Viele Menschen drucken sich auch heute noch etliche Artikel aus, um sie offline lesen zu können. Diesem Umstand solltest du Rechnung tragen, wenn du keine Leser verlieren willst. Allerdings stellen sich zwei Hürden in den Weg des Druckens.

Erstens: Kaum ein WordPress-Theme hat heute noch ein Print-Stylesheet. Die Entwickler der Themes machen sich diese Mühe nicht, obwohl ein solches Druck-CSS einfach für mich zum guten Ton des Entwickelns zählt. Zweitens: Da kein Druck-Stylesheet vorhanden ist, hat der Endverbraucher, der das Theme einsetzt, auch keinen Drucken-Button zur Verfügung.

Daher zeige ich dir in diesem Beitrag, wie du ein Print-CSS erstellst, wo es in das Theme integriert werden sollte und wie man sich einen Druck-Button erstellen kann.

Das optimale Print-Stylesheet erstellen

Erstelle zuerst eine leere CSS-Datei mit einem reinen Text- oder HTML-Editor. Benenne sie print.css. Kopiere im Anschluss folgendes hinein:

Alle CSS-Einstellungen, die du nun tätigen möchtest, kommen zwischen das öffnende und das schließende Bracket.

1 – Seitenränder und Schriftgrößen festlegen

Zuerst legen wir die Abstände der Seitenränder fest, um ein optimales Ergebnis zu erhalten.

Ich empfehle, die obere Einstellung zu verwenden und die Seitenränder auf 2 cm einzustellen. Nachdem das Geschehen ist, können die Einstellungen der Schriftgrößen vorgenommen werden. Hierbei ist zu beachten, dass der Drucker andere Einheiten für die Schriftgröße benötigt, als ein Monitor. Daher muss von Pixel, Em und Rem in Points umgerechnet werden.

• Pixels => Points
• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• 18px => 14pt
• 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• 22px => 17pt
• 23px => 17pt
• 24px => 18pt

Eine Schriftgröße von 12pt hat sich als optimal erwiesen. Nun hast du auch noch die Wahl, welchen Font du für den Druck verwenden möchtest. Eine gute Lesbarkeit auf einem gedruckten Blatt Papier bilden Schriftarten mit Serifen, wie zum Beispiel die Georgia.

2 – Pagebreaks einsetzen – Seitenumbrüche bestimmen

Mit den drei CSS-Eigenschaften page-break-before, page-break-after und page-break-inside kann man genau bestimmen, ob und wo eine Druckseite umgebrochen wird. Verhindert werden soll damit zum Beispiel, dass Bilder in zwei Teile umgebrochen werden.

• page-break-before bestimmt dabei, ob und wie ein Seitenumbruch vor diesem Element stattfindet.
• page-break-after wiederum kümmert sich um Umbrüche nach einem Element
• page-break-inside kümmert sich um einen eventuellen Umbruch innerhalb eines Elements, zum Beispiel der Bilder und Grafiken.

Auto ist der Standard des Druck-Elements, always setzt jedes Mal einen Umbruch, avoid verbietet den Umbruch und left und right ist gedacht für Folgeseiten, die entsprechend links oder rechts formatiert werden. Geschickt für den Druck eingesetzt sähen die Regeln so aus:

3 – Der Umgang mit Links

Links sollten deutlich gekennzeichnet werden, damit sie auffallen. Da sich Links auf einem Blatt Papier nicht anklicken lassen, müssen wir die Link-Ziele visualisieren. Das machen wir mit den folgenden Notierungen:

4 – Videos und andere iframes ausblenden

Videos darzustellen auf einem ausgedruckten Papier ergibt keinen Sinn. Setzt man die iframes jedoch einfach nur auf display: none, dann bleiben hässliche Abstände übrig. Mit dem folgenden Code setzt man die Abstände zurück und blendet iframes, sowie Videos vollständig aus.

5 – Unnötige Elemente ausblenden

Viele Bereiche einer Website sollten nicht gedruckt werden. Zum ersten stellen sie keine wichtigen Informationen bereit, zum zweiten kostet der Ausdruck dieser Bereiche unnötig teure Tinte oder Toner. Daher blenden wir alle Bereiche aus, die nicht von Wert sind.

Für dich bedeutet das, dass du in den Quellcode deiner Website eintauchen darfst, damit du die Bereiche findest, die nicht gedruckt werden sollten. Folgende Dinge bieten sich an, um sie auszublenden:

Der Header, die Navigationen, die Pagination, die Sidebar, die Tags und die Kategorien, die Kommentare, die Share-Buttons und weitere Elemente. Hier ein Auszug aus dem Print-Stylesheet meiner Website Techbrain.de:

6 – Nachrichten vor und nach dem Druck-Content einfügen

Manchmal kann es sehr praktisch sein, vor und nach dem eigentlichen Druck-Inhalt Nachrichten einfügen zu können. Mit einer solchen Nachricht kannst du dich vielleicht auch bei deinem Leser bedanken, der deinen Artikel ausgedruckt hat. Oder aber du kannst eine Copyright-Nachricht einblenden. Auch hier gilt es wieder, die richtige CSS-Klasse von deinem Inhaltsbereich zu finden.

Das komplette Druck-Stylesheet

Die richtige Location: wo gehört das print.css denn hin?

Die folgenden Funktionen gehören in die functions.php des Themes oder in ein seitenspezifisches Plugin.

Die korrekte Antwort wäre eindeutig in den Header. Folgende Funktion ist die richtige, wenn ein entwickeltes Theme in das offizielle Theme-Verzeichnis aufgenommen werden soll:

Solltest du jedoch dein eigenes Theme mit einem Druck-Stylesheet versorgen wollen, dann ist die oben beschriebene Art nicht unbedingt optimal. Erstens wird das CSS auf allen Seiten geladen, nicht nur auf den einzelnen Artikeln, zweitens blockiert es den Seitenaufbau und macht deine Website ein wenig langsamer. Daher:

Jedes nicht zum Seitenaufbau im sichtbaren Bereich nötige CSS gehört in den Footer!

Zudem sollte es nur geladen werden, wenn die single.php mit den einzelnen Artikeln aufgerufen wird. Es dürfte kaum jemanden geben, der deine Startseite drucken möchte.

Daher lassen wir das Stylesheet in den Fußbereich der Website laden.

Benutzerfreundlichkeit: einen Druck-Button erstellen

Wenn du deinen Lesern ein gut gemachtes Druck-Stylesheet anbietest, dann wäre es vorteilhaft, wenn du auch einen Button zum Ausdrucken in dein Theme einbauen würdest. Die Vorgehensweise ist recht einfach, der Button kann mit CSS so designed werden, wie du es möchtest. Der Code auf meiner Website sieht so aus:

Im Theme kann dieser Button dann mit einem einfachen <?php ah_print_button();?> überall aufgerufen werden, wo er erscheinen soll.

Wenn du eine Demo des Druck-Stylesheets und des Buttons möchtest, dann schaue vorbei auf TechBrain.de. Dort findest du den Button unterhalb der Artikel und kannst dir anschauen, wie meine Druckansicht aussieht.

Der Artikel entstand als Erweiterungsidee zum Beitrag: Webseiten druckerfreundlich machen und Druckkosten sparen

(dpe)