Print CSS

Ein extra CSS für den Ausdruck einer Website anzubieten ist heute gängig, wie man dies einbindet ist denke ich Geschmackssache. Ich binde es meist als <link>-Tag mit entsprechender media-Angabe nach dem normalen CSS ein. Neben den gängigen Methoden möchte ich auch mal ein paar exotischere Varianten vorstellen.

Fangen wir vorne an, das CSS wird als letztes Stylesheet im <head>-Bereich eingebunden und zwar wie folgt:

 Generelles

Um dem Internet-Ausdrucker tatsächlich nur den Content zu liefern, der ihn vermutlich interessiert und weshalb er die Seite ausdrucken will, werden alle weiteren Elemente ausgeblendet. Im Beispiel gehen wir einfach mal von einem sauberen HTML5-Dokument aus:

header, footer, nav, aside {
  display: none;
}

Je nachdem was für Infos in der Sidebar (so es eine gibt) stehen ist es natürlich sinnvoll sie auszublenden oder eben nicht, beispielsweise wenn dort Autor, Datum des Artikels und weiterführende Infos eingeblendet werden, könnten sie auch bei einem Ausdruck sinnvoll sein.

Von Büchern haben wir schon längst gelernt: Serifen-Schriften sind gedruckt besser zu lesen, als serifenlose Schriften. Also stellen wir für den Ausdruck unsere Schriftart auf eine Serifen-Schrift um und die Größe auf die gängigen 12 Punkt.

article p {
  font: normal 12pt/16pt Garamond, Times, "Times New Roman", serif;
}

Spezielleres

Im Internet gibt es ja auch einige Informationen, die beim Ausdruck einer Seite verloren gehen. Ganz wichtig sind hier vor allem Links, aber auch die Bedeutung von Abkürzungen. Diese kann man im Ausdruck sichtbar machen.

article a:link,
article a:visited {
  text-decoration: underline;
}

Dieser Block sorgt dafür, dass ein Link auch noch im s/w-Ausdruck als solcher erkenntbar ist.

article a:link:after,
article a:visited:after {
content: " ("attr(href)")";
  font-size: 90%;
}
article a[href^="/"]:after {
  content: " (http://webdev-lab.de"attr(href)")";
  font-size: 90%;
}

Diese beiden Blöcke schreiben im Ausdruck hinter einen Link leicht verkleinert in Klammern den Link selbst. Der zweite Block sorgt für eine korrekte URL auch bei absoluten Links, die keine Domain enthalten.

article figure a:link:after,
article figure a:visited:after,
article figure a[href^="/"]:after {
  content: none !important;
}

Das figure-Tag wird in HTML5 für Bilder verwendet um sie mit ihrer Bildunterschrift auch logisch zu verbinden. Da aber verlinkte Bilder nicht unbedingt die URL hinter dem Bild anzeigen sollten, da dies vermutlich einerseits weniger interessant ist, andererseits optisch schwierig wird, da Bilder im Inhalt meist nur wenig Platz bekommen und neben dem Inhalt der Seite fließen, wollen wir dort die Links nicht ausschreiben im Ausdruck.

article abbr[title]:after {
  content: " ("attr(title)")";
}

Bei Abkürzungen kann man im HTML das abbr-Tag verwenden und die Bedeutung der Abkürzung im title-Attribut des abbr-Tags zu hinterlegen. Um diese Zusatzinfo im Ausdruck nicht zu verlieren, nutzen wir wieder die Technik, wie auch bei den Links.

Exotisches

CSS bietet für den Ausdruck eigentlich noch ein paar weitere sehr tolle Features, doch diese werden kaum unterstützt. Da sie aber nicht schaden, verwende ich einige davon ganz gerne mal um den wenigen Usern, bei denen diese Regeln greifen, einen Mehrwert zu bieten. Die page-bread-after-Angabe verhindert/soll verhindern, dass ein Seitenumbruch beim Ausdrucken genau nach diesem Element vorgenommen wird (Wert: avoid). Dies ist besonders sinnvoll bei Überschriften, da diese sonst noch am Ende einer Seite stehen könnten und der eigentliche Inhalt dann erst auf der nächsten Seite.

h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid;
}

orphans und widows – hängt man häufiger mit Druckern rum, ist interessiert an Typografie oder eben gelernter Mediengestalter wie ich, kennt man diese Begriffe bei uns als Schusterjungen und Hurenkinder. Dies sind unschöne typografische Effekte in der Satztechnik beim Absatz. Als Schusterjungen (orphan) bezeichnet man es, wenn die erste Zeile eines Absatzes die letzte Zeile einer Seite ist und der restliche Absatz dann auf der neuen Seite steht. Als Hurenkind (widow) hingegen bezeichnet man es, wenn die letzte Zeile eines Absatzes auf der neuen Seite als erste Zeile steht und der Rest des Absatzes noch auf der vorherigen Seite.
Diesem Problem kann man mittels orphans und widows begegnen, indem man eine Mindestanzahl Zeilen definiert. Im Beispiel müssen am Ende einer Seite mindestens 3 Zeilen eines Absatzes stehen und am Anfang einer Seite mindestens 2 Zeilen eines Absatzes.

article p {
  orphans: 3;
  widows: 2;
}

Zum oben bereits genannten page-break-after gibt es auch noch die Pendants page-break-before und page-break-inside. Ich finde letzteres besonderes interessant um Inhalte nicht „zerbrechen“ zu lassen. Im Beispiel angewendet auf ein figure-Element um zu verhindern, dass ein Bild auf der einen Seite landet und die Bildunterschrift auf der nächsten.

article figure {
  page-break-inside: avoid;
}

Leider sind die exotische Sachen fernab von einer breiten Browser-Unterstützung. So verstehen einige Browser zwar page-break-before/inside/after, jedoch den wichtigsten Wert avoid unterstützen sie leider nicht/höchst selten. Meine Begeisterung dafür, dass always unterstützt wird hält sich in Grenzen, denn damit erzwingt man einen Seitenumbruch, was ich persönlich höchst selten für sinnvoll halte. Man möchte schließlich keine Seiten erzeugen, die beim Ausdrucken nur die eine Hälfte der Seite bedrucken und dann ein neues Blatt Papier anfangen.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Ein Gedanke zu „Print CSS“

Schreibe einen Kommentar

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