Print-Stylesheets

Für Internetausdrucker

16. November 2016 von Hella Schuster

Für Internetausdrucker

Unter Webdesignern nicht sehr beliebt ist ja meist das Print-Stylesheet.

Mittlerweile ist es aber nicht mehr so schlimm, selbiges zu stylen. In grauer Vorzeit musste man noch tatsächlich drucken, dann hat man pdfs gedruckt und jetzt?

 

Webfonts

Für viele Druckertreiber (u.a. HP) ist das Zusammenspiel von Browser und Webfont tödlich. In meinem Fall hat es sowohl mit dem Firefox als auch mit dem IE11 zu massiven Druckerproblemen geführt, schließlich hat der Drucker sich ergeben und selbst gebootet. Das einzige was geholfen hat: im print.css alle Webfonts (falls Iconfonts verwendet werden: auch diese bitte) durch eine sans-serif oder serif-Angabe überschreiben oder im Falle der Iconfonts evtl auf display:none setzen.

 

Flexbox

Setzt man Flexbox ein, so müssen alle display:flex-Angaben im print.css durch display: block oder inline überschrieben werden. Andernfalls hat man ein unbefriedigendes Ergebnis. Elemente, die nicht auf eine Seite passen, werden abgeschnitten.

 

Min-Height, Height

Bei abgeschnittenem Inhalt im Ausdruck sollte man auch die Höhenangaben prüfen. Angaben für Höhen, wie etwa

html, body {min-height: 100%; height: 100%}

müssen durch

html, body {min-height: 0; height: auto}

ersetzt werden.

Simulation von print.css

In Chrome:

Chrome emulate media print

F12 für die Developer Tools, dann das Menü, das mit drei Punkten übereinander rechts steht, klicken, 'More tools' -> 'Rendering'. Dort kann man in dem sich öffnenden Bereich die Checkbox bei 'Emulate Media' setzen und 'print' wählen.

In Firefox:

Firefox media emulate print

Shift & F2 eingeben, dann öffnet sich die Developer Konsole. Hier gibt man diese Zeile ein:

media emulate print

Auch andere Medientypen können hier emuliert werden. Die Emulation ist dabei immer nur eine Näherung, für die letzten 5% braucht man dann meist doch noch das echte Drucken (als pdf).

Zurück