Druckansicht für Blogbeiträge anpassen

Zum Repertoire eines guten WordPress Blogs gehört es, dass man die Artikel bei Bedarf ausdrucken kann, und das bestenfalls ohne Elemente, die man als Offline-Leser nicht benötigt. Dazu gehört beispielsweise die Seitenleiste, die auf dem Ausdruck nur wertvolles Papier kostet ohne Mehrwert zu bieten. Wir zeigen dir, wie du die Kontrolle über die Druckansicht deiner Artikel übernimmst.

CSS ist die Skriptsprache für das Aussehen einer Website. Über so genannte Media Queries kannst du beeinflussen, wie deine Webseite auf verschiedenen Endgeräten angezeigt wird. Das ist nicht nur nützlich um die mobile Darstellung zu optimieren, in dem du weniger relevante Elemente ans Ende der Seite setzt oder ganz ausblendest. Media Queries können auch für die Druckansicht eingesetzt werden.

Wie du mit deinem WordPress Blog auch auf Papier einen guten Eindruck machst, liest du in diesem Beitrag. Schreib uns einen Kommentar mit deinen Erfahrungen zu diesem Thema.

Wenn Leser deine Blogartikel ausdrucken

Gerade ältere Besucher deiner Website ziehen es möglicherweise vor, sich deine interessanten Artikel auf Papier auszudrucken um sie besser und entspannter lesen zu können. Nicht jeder möchte lange Beiträge am Bildschirm konsumieren. Also druckt man sie kurzer Hand einfach aus.

Wurde in deinem Theme hierfür ein gesonderter Abschnitt für Print-Styles hinterlegt? Am besten prüfst du es direkt einmal nach, indem du selbst auf Drucken klickst und dir die Druckvorschau einer deiner Seiten ansiehst.

So beeinflusst du die Druckansicht deiner Website

Damit auch deine Druckvorschau so aufgeräumt aussieht, musst du vermutlich einige Elemente deiner Website für Ausdrucke ausblenden.

Das geht wie schon Eingangs erwähnt über Media Queries. Füge die Druckanweisungen entweder in ein bestehendes Stylesheet (z.B. style.css in deinem WordPress Theme-Verzeichnis) oder erstelle eine eigene print.css um die Anweisungen sauber voneinander zu trennen. Das kostet dich allerdings eine HTTP-Abfrage mehr, auch wenn diese kaum ins Gewicht fällt.

CSS Media Queries für Print

Füge nachfolgende Zeile in deiner style.css im Theme-Verzeichnis ein und ergänze sie um die Elemente, die du ausblenden möchtest. Dies ist unser Beispielcode, den du an deine eigenen Klassen anpassen solltest.

@media print { 
	header, aside, footer, main #comments {
		display: none; 
	}
	main article {
		padding: 0;
		box-shadow: none;
		border: none;
	}
}

Im ersten Abschnitt deaktivieren wir unseren Kopfbereich einschließlich Navigationsleiste, die Seitenleiste (Sidebar oder aside) sowie den Footer, da diese Elemente für Leser irrelevant sind und nur Seitenweise wertvolles Papier verschwenden.

Nicht benötigte Widgets, Banner und mehr ausblenden

Enthalten deine Beiträge zum Beispiel Werbebanner, Widgets oder Videos, die nur für Online-Leser relevant sind, weil damit Geld verdient oder eine Funktion der Seite bedient wird, kannst du auch diese über CSS-Anweisungen für den Druck ausblenden.

Als Beispiel nehmen wir ein beliebtes Bewertungs-Widget für WordPress, das uns auf dem Ausdruck nur stören würde.

Um das gewünschte Element auszublenden, müssen wir es über eine Klasse oder ID im CSS ansprechen. Um die Klasse des Widgets ausfindig zu machen verwende ich den Inspector in Firefox bzw. den Elements Panel in Chrome. In beiden Browsern kommst du über einen Rechtsklick auf das Objekt > „Untersuchen“ (bzw. „Inspect“).

In unserem Fall lautet die Class .rplg – Damit wird das Google Business Review Widget platziert. Wir fügen diese also innerhalb unseres @print Media Queries ein und blenden die Box mit display: none; aus.

@media print { 
  .rplg {
    display: none;
  }
}

Natürlich kannst du über diesen Weg auch Informationen einblenden, die nur für Ausdrucke benötigt werden. Zum Beispiel Urheberrechtshinweise oder einen QR-Code, der auf deine Website führt. Dir sind kaum Grenzen gesetzt.

Ich möchte ein für den Druck verkleinertes Seitenlogo am Textanfang sowie eine Fußnote am -ende positionieren. Das löse ich mit den Pseudoklassen ::before und ::after am article-container, jeweils über das Attribut content: „“;

main article::before {
  content: url('img/logo-pressengers-print.png');
  float: right;
  padding: 0 0 20px 20px;
}
main article::after {
  content: "⭐️Diesen Artikel findest du auf Pressengers.de";
}

Das Logo sollte nun rechts oben erscheinen, während der Text es umfließt (float: right;). Der Innenabstand (padding) sorgt dafür, dass zwischen Text und Bild noch etwas Weißraum ist. Die Fußnote wird am Ende des Artikels eingefügt.

Seitenumbrüche verschönern in der Druckausgabe

Da die Druckausgabe automatisch generiert wird, müssen wir beim Feinschliff mit Regeln arbeiten, welche die ebenso automatisch gesetzten Seitenumbrüche beeinflussen und unschöne Schnitte von Absätzen und anderen Elementen vermeiden.

Nutze page-break-inside um Elemente zu schützen

Um wie in unserem Beispiel das Umbrechen des Code-Elements zu vermeiden und damit den Lesefluss zu verbessern, verwenden wir das Attribut page-break-inside mit dem Wert avoid.

pre, code {
  page-break-inside: avoid;
}

Damit wird verhindert, dass code-Blöcke vom automatischen Seitenumbruch zerteilt werden. Gerade bei Quelltext-Snippets ist das sehr praktisch, damit der Leser kein wichtiges Zeichen durch den Umbruch übersieht.

Was mit sehr langen Blöcken passiert

Es scheint eine den Umständen entsprechend gute Lösung zu sein, um den Seitenumbruch bei wichtigen Passagen des Contents vor dem Seitenumbruch zu bewahren. Man kann mit dieser Methode auch normale Textabsätze in <p> Elementen schützen.

Doch was passiert mit sehr langen (Code-)Blöcken? Verschwinden diese im Nirvana oder werden sie irgendwann doch zerschnitten?

Ich habe hierfür einen längeren Abschnitt eingefügt, der beim Druck durch seine Textlänge über mehrere DIN A4 Seiten geht.

Glücklicherweise wird in unserem Test vom Browser ein Seitenumbruch in der Druckvorschau erzwungen. Damit geht wenigstens kein Inhalt verloren, wenn der mit page-break-inside formatierte Block zu lang für eine Seite ist.

Seitenumbrüche erzwingen

Du kannst Seitenumbrüche bei Ausdrucken nicht nur verhindern sondern auch erzwingen. Das macht beispielsweise bei einer H1-Überschrift Sinn, wenn du vor dieser ein Bild als Deckblatt auf deinem Handout haben möchtest und um diese oder andere wichtigen Überschriften nicht vom zugehörigen Inhalt abzutrennen.

Du kannst so deinen Artikel von Meta-Informationen klar abtrennen, indem du zum Beispiel nach dem eingänglichen Inhaltsverzeichnis ein page-break-after: always; einsetzt.

Weiterführende CSS-Anweisungen um deine Druckansicht zu optimieren

CSS bietet dir eine große Vielfalt an Kommandos, mit denen du deine Print-Ansicht verschönern kannst. Auch für verschiedene Endgeräte wie TV-Geräte, spezifische Auflösungen und mehr können die praktischen Media Queries eingesetzt werden. Meist genügen aber wenige Korrekturen um deine Druckvorschau angemessen zu gestalten.

WordPress-Plugins zur Optimierung der Druckansicht

Es gibt auch für diesen und ähnliche Zwecke das richtige Plugin. Wer sich selbst nicht die Mühe machen möchte, in den Quellcode des verwendeten WordPress Themes einzugreifen, findet sicher eine gute Lösung im WordPress Plugin Repository.

Auch kostenpflichtige Lösungen können gute Ergebnisse erzielen und sind ggf. für große WooCommerce Shops interessant. Denkbar sind auch extra generierte PDFs die den Lesern angeboten werden können.

Aus meiner Sicht aber bieten derartige Plugins aber einen vergleichsweise geringen Nutzen im Vergleich zu ein paar simplen Zeilen eigenen CSS-Code. Zudem bläst jedes Plugin deine Installation auf und schafft potenzielle Sicherheitslücken in WordPress.

Zu viel Aufwand ist meist nicht notwendig, da – je nach Zielgruppe – eher die Minderheit deiner Leser wirklich auf Drucken klickt. In erster Linie sollte Papier- und Tinten-Sparsamkeit den Gestaltungsprozess maßgeblich beeinflussen.

Ist deine Druckansicht optimal? Wie sehen deine Print-Styles aus? Schreibe uns einen Kommentar!