Schöner Drucken – Druckvorschau in der Browser-Console

Die Druckversion der Webseite ist das Waisenkind und Mauerblümchen der Stylesheets, dabei gibt es viele Anwendungen, die nach einer liebevolleren Darstellung auf dem Papier dürsten.

CSS im print-preview mit den Entwickler-Werkzeugen der Browser

Nun ist es nicht so schwer, ein paar Elemente auszuknipsen, wenn sie auf dem Papier keinen Sinn machen. Das fängt bei der Seitennavigation an, das große Bild im Seitenkopf muss nicht sein, Slideshows und Animationen können unter den Tisch fallen, Hintergrundfarben und -muster verbrauchen Tinte und verlangsamen den Druck.

media screen und media print

Das Stylesheet für den Monitor kann für den Druck vollkommen ausgeschaltet werden, damit CSS-Eigenschaft gar nicht erst überschrieben werden müssen.

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

Für Links, die auf dem Papier keinen Sinn machen, lässt sich ohne viel Federlesens eine lesbare URL einsetzen. Und am Ende ist es auch schön, mal genau zu wissen, wie groß der ViewPort ist: 21 x 29 cm.

Druckvorschau in der Browser-Console

Die Entwickler-Tools der Browser halten nicht nur eine Vorschau auf verschiedene Viewports parat, sondern auch eine Druckvorschau. Am einfachsten macht es Safari: Das Druckersymbol sitzt in der Menüleiste der der Konsole.

Print Preview Firefox

Auch Firefox kommt direkt zur Sache – bzw. zur Druckvorschau. Vielleicht etwas zu diskret: das Symbol einer Seite mit Eselsohr ganz rechts.

Print Preview Chrome

Perfekt versteckt:
Entwickler-Tool / Konsole laden
Rendering aktivieren
Scrollen bis Emulate CSS media type
Print anstelle von no emulation bzw. Keine Emulation einstellen

Druckvorschau in Chrome aktivieren
Wenn Rendering in der Konsole nicht angezeigt wird, oben rechts die weiteren Optionen unter den drei Punkten öffnen.

print.css untersuchen und testen

Anstelle von Testdrucken oder der Anzeige als PDF zeigen die Browser in der Druckvorschau der Console die Stile aus print.css mit allen Hilfsmitteln, die auch für die Webseitenansicht gilt.

Druckvorschau Chrome
Styles direkt testen, Styles deaktivieren, ohne immer wieder die Seite auszudrucken oder die PDF-Darstellung zu Rate zu ziehen.

Die Druckvorschau zeigt keine Seitengrenzen, auch Seitenkopf und -fuß bleiben außen vor – sie werden erst in der „offiziellen“ Druckvorschau angezeigt. Aber die Browserkonsole zeigt – ohne die Konsole zu schließen – Änderungen in print.css nach einem Refresh direkt an.

Und wie kommen Seitenkopf und Seitenfuß auf jede Seite? Das ist trickreich – demnächst auf diesem Kanal …

Mehr zum Druck von Webseiten

@page-Regel – CSS für den Druck

PDF on the fly – PDF dynamisch erstellen – wenn Inhalte entsprechend Benutzeraktionen aufbereitet werden

2024-02-12 SITEMAP BLOG