WordPress, SEO, Security, PageSpeed, CSS, Arbeitsabläufe

print.css testen beispiele und tipps
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

print.css – 5 wertvolle Tipps und Beispiele

Themen auf dieser Seite

Es gibt Webseiten, die von Usern ausgedruckt werden. Mir fallen da spontan Rezepte oder Ferienwohnungs-Infos ein. In den allermeisten Fällen sind aber nicht alle Infos 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 extra 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 es trotzdem tun.

  • Reduzierung auf die wesentlichen Infos
  • Dadurch weniger ausgedruckte Seiten
  • Der User hat was er braucht und verschwendet weder Papier noch Tinte
  • Deine Website macht auch auf dem Papier einen guten Eindruck

Und hier nun die 5 Tipps und Beispiele zur print.css

1. Print Styles einbetten

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

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: 28px;
  }
}

2. Print Stylesheet testen

print.css testenDu 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:

  1. Öffne deine Seite im Chrome Browser
  2. Öffne die DevTools (Rechtsklick Element untersuchen)print-css-devtool-emulate-css-media-print
  3. Drücke Command+Shift+P (Mac) oder Control+Shift+P (Windows, Linux, Chrome OS).
  4. Tippe „render“ in das Suchfeld und wähle dann Drawer Show Rendering
  5. 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://developers.google.com/web/tools/chrome-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 bzw. 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?

Teile das mit deinen Kollegen

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Feedback willkommen

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (No Ratings Yet)
Loading...

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Beiträge interessieren dich vielleicht auch