Es gibt Webseiten, die von Usern ausgedruckt werden. Mir fallen da spontan Rezepte oder Ferienwohnung-Infos ein. In den allermeisten Fällen sind aber nicht alle Informationen und auch nicht alle Fotos und Grafiken, für den Ausdruckenden interessant. Um deinem User ein Druck-freundliches Design anzubieten, kannst du in den <head> direkt nach deiner CSS-Datei für Screen ein zusätzliches Stylesheet für den Drucker hinterlegen – die print.css.
Vorteile eines Print Stylesheets
Natürlich sind wir alle dagegen, dass Webseiten ausgedruckt werden. Umwelt und so.
ABER mit einer print.css tust du dem User und der Umwelt einen Gefallen, sollte er/sie/es trotzdem drucken.
- Reduzierung auf die wesentlichen Informationen
- Dadurch weniger ausgedruckte Seiten
- Der User hat, was er benötigt und verschwendet weder Papier noch Tinte
- Deine Website macht auch auf dem Papier einen guten Eindruck
Und hier nun die 5 wertvollen Tipps und Beispiele zur print.css
1. Print Styles einbetten
Mit media=“print“ gibst du an, dass dieses Stylesheet für die Druckausgabe bestimmt ist. Statt des link-Tags im Header kannst du auch einen Media Query in dein Stylesheet schreiben.
@media print {
/* Print Styles ab hier */
body {
font-size: 11pt;
}
}
2. Print Stylesheet testen
Du musst deine Seite zum Testen NICHT ausdrucken. Damit dir im Browser eine Vorschau als gedruckte Seite angezeigt wird, kannst du diesen Trick für den Google Chrome Browser verwenden:
- Öffne deine Seite im Chrome Browser
- Öffne die DevTools (Rechtsklick Element untersuchen)
- Drücke Command+Shift+P (Mac) oder Control+Shift+P (Windows, Linux, Chrome OS).
- Tippe „render“ in das Suchfeld und wähle dann Drawer Show Rendering
- Scrolle unten im Rendring-Panel nach unten und wähle unter Emulate CSS media die Option print.
Jetzt siehst du die Webseite in der Print-Ansicht und kannst über das DevTool testen und anpassen.
Quelle: https://developer.chrome.com/docs/devtools/css/print-preview/
3. Einfaches Beispiel einer CSS Datei für die Druckansicht
Was genau in deinem Stylesheet stehen muss, entscheidet natürlich der spezifische Aufbau deiner Website. Hier ist ein Beispiel einer print.css für den Anfang:
.body {
font-size: 18pt;
margin: 12,7 mm;
}
/* Styles zuruecksetzen */
*,
*:before,
*:after,
*:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* nur den Hauptinhalt drucken */
body > *:not(main) {
display: none;
}
4. Absolute Einheiten
Statt %, em und rem, kannst du cm, mm, pt verwenden. Denn Druck ist nicht responsive. Die DIN-A4-Seite hat immer die gleiche Breite.
5. Seitenumbrüche
Wenn du nicht willst, dass mitten in einem Element ein Seitenumbruch gemacht wird (z. B. in einer Grafik), kannst du das auch über CSS steuern:
section {break-before: always;}
ul {break-inside:avoid;}
Mehr dazu:
https://developer.mozilla.org/en-US/docs/Web/CSS/break-before
https://developer.mozilla.org/en-US/docs/Web/CSS/break-after
https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
Hurenkind und Schusterjunge
Diese beiden Begriffe bezeichnen ungünstige Seiten oder Spaltenumbrüche, die den Lesefluss stören. Das Hurenkind oder die Witwe (engl. widow) bezeichnet die letzte Zeile eines Absatzes, die durch einen Spaltenumbruch oder Seitenumbruch den Bezug zu ihrem Absatz verliert und zusammenhangslos auf der nächsten Seite landet. Beim Schusterjungen oder auch Waisenkind (engl. orphan) steht die erste Zeile eines Absatzes allein und der folgende Absatz auf der nächsten Seite oder in der nächsten Spalte. Bei längeren Texten sollte man statt break-before und break-inside lieber Folgendes verwenden:
p {
widows: 4;
orphans: 3;
}
Wenn z. B. die letzte Zeile eines Absatzes nicht auf die aktuelle Seite passt (widow), werden die letzten beiden Zeilen dieses Absatzes auf die nächste Seite gedruckt, obwohl nur die letzte nicht passt. Dies liegt daran, dass die Eigenschaft, die dies steuert – widows – standardmäßig auf 2 festgelegt ist. Das können wir ändern. In diesem Beispiel werden die letzten 4 Zeilen eines Absatzes auf die nächste Seite gedruckt oder der ganze Absatz auf die nächste Seite, falls weniger als 3 Zeilen an das Ende der alten Seite passen.
https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge (Das heißt wirklich so)
Das alles hier reißt das Thema Optimierung für Print nur an.
Hast du noch Tipps zu dem Thema?
