Theme-CSS für den Druck vorbereiten

Ja, es gibt sie noch immer: Menschen die das Internet ausdrucken. Während wir diese Tatsache häufig einfach ignorieren, kann es sich doch lohnen, Webseiten auch für den Druck vorzubereiten.

Ja ich weiß, Print-CSS klingt nach etwas schrecklich veraltetem und viele moderne Websites (von dem meisten WordPress-Themes ganz zu schweigen) verzichten heute bewusst oder unbewusst auf ein gesondertes Styling. Tatsächlich gibt es aber einige Vorteile, die ein paar kleine Designoptimierungen für den Druck durchaus rechtfertigen.

Print-CSS?

Fangen wir ganz von vorne an. Wenn wir CSS schreiben, dann beschäftigt uns dieser Tage vor allem die Ausgabe auf Displays. CSS versteht sich jedoch auf verschiedenen sogernannte Media Types. Neben dem bereits erwähnten screen für Displays auch noch projection, speech, braille und eben print für den Druck. Wenn wir CSS für den Druck bereitstellen wollen, gibt es grundsätzlich zwei Möglichkeiten, dies zu tun:

Das Auslagern in eine gesonderte CSS-Datei ist vor allem bei komplexeren Print-Designs ein guter Weg. Die verschiedenen Styles können sauber getrennt werden und es wird einfacher, den Überblick zu bewahren. Eine externe CSS-Datei lässt sich einfach in HTML aufrufen:

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

Wenn wir eine externe Print-Datei in einem WordPress-Theme einsetzen möchten, müssen wir die folgende Funktion in der functions.php unseres Child-Themes platzieren und eine entsprechende CSS-Datei anlegen.

function kp_styles() {
	wp_enqueue_style( 'print', get_theme_file_uri() . '/print.css', '', '1612131441', 'print' );
}
add_action( 'wp_enqueue_scripts', 'kp_styles' );

wp_enqueue_style(); übergeben wir dabei ganz zum Schluss einen Parameter, der dem Browser mitteilt, dass es sich hier um einen Print-Stylesheet handelt. Siehe auch developer.wordpress.org

Wenn unsere Anpassungen aber nur klein sind, oder wir kein eigenes Child-Theme anlegen möchten, können wir sie auch wunderbar direkt über den neuen CSS-Editor im Theme-Customizer anlegen. Dort genügt es, folgendes einzugeben und allen Code, der die Druck-Version betreffen soll anschließend zwischen den beiden Klammern zu platzieren.

@media print {

}

Print-CSS!

Jetzt wo wir den Grundstein für unser CSS gelegt haben, wird es Zeit für einen ersten Versuch: der Probedruck. Wenn wir im Folgenden das Print-CSS auf die Probe stellen, tun wir der Umwelt vermutlich einen Gefallen, wenn wir nicht wirklich jedes Mal drucken. Am Mac nutze ich daher die Möglichkeit, eine Druckvorschau als PDF zu generieren. Auch Windows-User können hier auf die Vorschaufunktion ihres Betriebsystems zurückgreifen.

Welche Elemente der Seite jetzt im Detail zu bearbeiten sind, hängt vom jeweiligen Theme ab. In meinem Fall wurde zum Beispiel der mobile Menü-Knopf auf jeder Seite angezeigt. Dieses Verhalten habe ich mit meinem Print-CSS unterbunden:

.menu-toggle {
	display: none;
}

Auch die Antwort-Buttons im Kommentarbereich mit der Klasse .reply, das Kommentarformular mit der Klasse .comment-respond sowie die Buttons zum Wechseln zwischen Artikeln – Klasse .post-navigation habe ich ausgeblendet. Diese interaktiven Seitenelemente ergeben gedruckt keinen Sinn mehr.

.menu-toggle,
.comment-respond,
.comment-reply-link {
	display: none;
}

Weil wir auf KrautPress.de sowieso ein recht aufgeräumtes Theme verwenden, gibt es hier erstmal nicht mehr zu tun. Bei anderen Themes kann das ganz anders aussehen. Manchmal werden Menüleisten, Widgetbereiche oder andere Elemente angezeigt, die in einer Druck-Version nur unnötig Platz wegnehmen und keinen Mehrwert bieten.

Im Gegenzug können wir es mit unserem CSS aber noch etwas weiter treiben und die Benutzbarkeit unserer ausgedruckten Website noch etwas verbessern.

So geht eine der Grundfunktionen des Internets beim Drucken verloren: Verlinkungen. Im Web ist es ganz normal, auf einen Link zu klicken um anschließend auf der verknüpften Seite zu landen. Drucken wir eine Seite aus, ist mit etwas "Glück" an den Unterstreichungen zwar noch erkennbar, wo sich einmal Links befunden haben wohin verlinkt wurde ist aber nicht mehr erkennbar. Tatsächlich können wir auch hier mit CSS Abhilfe schaffen.
Mit dem folgenden Code-Schnipsel wird allen Link-Elementen innerhalb des Content-Bereichs .entry-content (das sollte bei vielen WordPress-Themes einer der Container sein, die den Inhalt eines Beitrag umschließen) das Linkziel angehängt.

.entry-content a:link::after,
.entry-content a:visited::after {
	content: " [" attr(href) "] ";
}

Benutzt ihr Print-CSS? Wenn ja: welche Anpassungen haben es euch besonders angetan?

4 Kommentare

  1. Guter Hinweis – an die Links hatte ich bisher nicht gedacht.

    Ein weiterer Schritt um tintensparsam zu drucken, könnte auch sein die Hintergrundfarben (und -bilder) auszublenden. Zusätzlich könnte auch noch die Textfarbe Schwarz erzwungen werden.

    body {
        background: #fff;
        color: #000;
    }
    
    1. Hej Stafan,
      der Tipp mit der Textfarbe ist in der Tat wichtig.
      Die Hintergrundfarbe habe im ich Beispiel bewusst weggelassen, nachdem alle Browser, die ich testen konnte, ihrerseits Hintergrundfarben /-bilder automatisch entfernt haben.

  2. Hallo Simon, ich habe mal für ein Projekt eine print.css Änderung gemacht, die etwas hinzufügt statt auszublenden. Und zwar wurden Listendaten von Verkaufs-Exposées dann mit einem druckbaren Briefkopf, einer Adress-Fußzeile und je nach Kategorie des Posts mit individuellen Disclaimern versehen, die dann als fertige Sheets ausgedruckt oder als PDF gespeichert werden konnten.
    Meinem Kunden ersparte das ein andauerndes lästiges Erstellen und Versenden von PDF-Exposées auf seinem Briefpapier auf Kundenanfrage.

  3. Super Anleitung für Einsteiger mit Buttons und Screenshots! Danke!

    … und dann auch noch für den neuen WordPress-CSS-Editor im Theme-Customizer!
    Jetzt werde ich damit anfangen für meine HP, die noch in der Entwicklung ist.

    Ich habe leider im header das Logo incl. Fotoleiste als ein jpg eingesetzt. Was kann ich tun, um im Ausdruck das Logo und den Namen anzuzeigen und die Fotoleiste auszuschalten?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.