Echtes Insider-Wissen ohne Werbung und Gastbeiträge
print.css testen beispiele und tipps

print.css – 5 wertvolle Tipps und Beispiele

Inhaltsangabe

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 trotzdem drucken.
  • 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 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

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://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 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?

Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Beiträge zu ähnlichen Themen

Newsletter abonnieren

Wenn du willst, schicke ich dir gern eine E-Mail, wenn ich einen neuen Beitrag veröffentliche. Es kommt kein Spam. Nur nützliche Infos und Freebies für Menschen mit Websites. Versprochen.

Newsletter Sign-up
Ich nutze keinen externen Anbieter und speichere und nutze deine Daten ausschließlich, wie in meinen Datenschutzhinweisen beschrieben. Du kannst dich jederzeit wieder abmelden.

Willst du meinen Newsletter?

Verpasse keine neuen Posts oder Freebies. Ich versende max. einen Newsletter im Monat. Kein Spam. Versprochen.

Newsletter Sign-up
Ich speichere und nutze deine Daten ausschließlich wie in meinen Datenschutzhinweisen beschrieben. Du kannst dich jederzeit wieder abmelden.