Zum Inhalt springen
Start » Beiträge » @media print: CSS für den Ausdruck

@media print: CSS für den Ausdruck

Zeitung (Hamburger Abendblatt) mit WordPress Logo

Nach dem ersten nun ein zweiter Beitrag von der Baustelle „GEST-Website“. Langsam erreicht die Einrichtung der Technik im Hintergrund ihre Ziellinie und es folgt, was kommen muss: die Politur der Oberfläche, sprich: die Erstellung der Layout-Richtlinien mittels CSS. Glücklicherweise geben die Themes von WordPress vieles vor und so kommt die Gestaltung meist allein mit der Anpassung von Farben aus. Und wo mehr Anpassungen notwendig sind, helfen dem geneigten Webentwickler die sogenannten Entwicklertools der Browser. Aber es gibt bis heute eine wesentliche Lücke: die Optimierung der Website für den Ausdruck als PDF oder auf Papier.

Warum eine Anpassung für den Ausdruck?

Webseiten ohne Anpassung für den Druck weisen oftmals Schwächen auf:

  • unzureichender Kontrast der Schrift,
  • Elemente werden im Layout falsch dargestellt,
  • sogenannte „sticky“ (verklebte) Elemente: Elemente, die beim Scrollen an ihrer Position verbleiben, werden auf den Seiten wiederholt dargestellt, überlappen teilweise den auf der Seite enthaltenen Text,
  • Platzverbrauch durch unnötige Elemente wie jene zur Navigation.

Viele heutige Webseiten sind zwar hervorragend auf unterschiedliche Endgeräte angepasst – scheitern jedoch, wenn es darum geht, die Inhalte auszudrucken.

Der Weg zum Ausdruck: @media print

In einem Cascading Stylesheet (CSS), fasst man Anpassungen für die Druckausgabe im Eintrag @media print zusammen. Um etwa alle Schriftfarben auf Schwarz zu setzen, kann man im CSS folgenden Eintrag verwenden:

@media print {
  body {
    color: black !important;
  }
}

Der Zusatz !important stellt sicher, dass diese Layoutanweisung über andere gewinnt.

Die sogenannten „sticky“ Elemente versteckt man im Ausdruck am besten:

@media print {
  .sticky {
    display: none !important;
  }
}

Das Beispiel würde alle Elemente verstecken, welche die CSS-Klasse „sticky“ zugewiesen bekommen haben.

Gold wert sind auch die Tipps von Rachel Andrew im Smashing Magazine: Mit Ihren Tipps kann man unter anderem einen Text am Ende des Ausdrucks anzeigen. Und noch viel besser: Links, die auf Papier völlig wertlos sind, können im Ausdruck zusammen mit ihrer URL dargestellt werden:

@media print {
  #site-footer::after {
    content: "Aktuelle Informationen erhalten Sie auf www.gest-hamburg.de.";
  }

  a[href^="http"]:not([href*="gest-hamburg"]):after {
    content: " (" attr(href) ")";
  }
}

Entwicklertools versus Druckansicht

Auch die Entwicklertools wie etwa von Chrome und Firefox haben den Druck für sich entdeckt. Leider noch sehr rudimentär und im Falle von Chrome sehr versteckt. Für Chrome hat Kayce Basques auf developers.google.com eine kurze Anleitung dazu verfasst. Kurz: In den Entwicklertools Command+Shift+P (Mac) oder Strg+Shift+P drücken. Dann im Eingabefeld einfach „print“ eingeben und in der Kategorie „Rendering“ den Punkt „Emulate CSS print media type“ auswählen (Stand: Chrome 80).

Responsive Preview für die Druckansicht

Vergleicht man das Ergebnis jedoch mit der Druckansicht, stellt man noch viele Unterschiede fest. Zum einen wird die Medienbreite nicht beachtet. Um einen besseren Eindruck zu erhalten, vergleicht man am besten die Druckansicht mit dem Ergebnis in den Entwicklertools. Stellt man dann beispielsweise auf die „Responsive“ Ansicht um (Command+Shift+M (Mac) oder Strg+Shift+M) wählt man dort eine passende Breite. Zum Testen dieser Website habe ich die Breite 800 Pixel verwendet. Dies entsprach dann in etwa der Darstellung auf einer DIN-A4-Seite.

Die wahre Druckansicht

Leider unterscheidet sich das Ergebnis immer noch von der wirklichen Druckansicht. Elemente, die etwa absolut auf einer Seite positioniert sind, werden in der echten Druckansicht falsch dargestellt, überlappen teilweise andere Elemente. Oder Elemente fehlen völlig, die gemäß CSS Regeln und gemäß Entwicklertools eigentlich sichtbar sein müssten.

Bis jetzt verschwindet zum Beispiel das Logo der GEST aus dem Kopfbereich in der Druckausgabe. Ob ich das Rätsel lösen konnte, können Sie einfach in der Druckvorschau oder beim Druck als PDF (um Papier zu sparen) überprüfen. Noch habe ich die Hoffnung nicht aufgegeben – aber es gibt auch wichtigere Dinge als ein auf Papier gebanntes Logo 😉

Fazit

Die Optimierung für den Ausdruck wird heutzutage oft vernachlässigt. Mit ein paar kleinen Anpassungen lassen sich viele Probleme beim Ausdruck beheben, wie das Verstecken irrelevanter oder störender Elemente. Leider sind die Entwicklertools der Browser bis heute noch nicht ausgereift genug, wirklich bei dieser Arbeit zu unterstützen. Dann hilft nur Rätselraten – oder doch die weiße Fahne zu schwenken.

Weiterführende Links

Schlagwörter: