Print-Stylesheets
von Hella Schuster
Für Internetausdrucker // Update
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:
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:
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).
Update
Leider hat das Entwicklerteam von Firefox dieses Feature seit Version 62 entfernt. Wirklich schade, jetzt kann man nur noch im Chrome testen!