Archiv:

Latest photoblog

photoblog

Blog » Ruck zuck zum Druck

Ruck zuck zum Druck

Der Eine oder Andere möchte sich ja zwecks Archivierungszwecken doch gerne einmal interessante Internetseiten ausdrucken. Leider bieten aber auch heute noch nur die wenigsten Webauftritte speziell für den Druck angefertigte Stylesheets. Dies jedoch ist, seitdem gängige Browser CSS im mehr oder weniger großen Umfang unterstützen, problemlos möglich. Die wesentlichen Schritte zum einfachen, aber dennoch effektiven Druckstylesheet sind dabei nicht einmal schwer umzusetzen oder mit einem hohem Aufwand verbunden.

So ist es bei der Einbindung in ein Dokument möglich, ein Stylesheet zum Beispiel nur für den Druck zu definieren. Oder nur für den Bildschirm. Dazu muss lediglich das media-Attribut für das Stylesheet angeführt werden:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

Stylesheets, welche kein media-Attribut erhalten, gelten dabei für alle Ausgabegeräte. Testen lassen sich alle Änderungen die für die Druckversion vorgenommen wurden im Übrigen direkt im Browser, ohne einen Testausdruck, bequem über die Druckvorschau.

Grundlegendes zum Druck-Stylesheet

Macht eine Angabe in Zentimetern oder Millimetern am Bildschirm weniger Sinn, so wird ihr im Druck eine besondere Aufmerksamkeit zuteil. In der Druckausgabe eines Dokuments können, bzw. sollten natürlich Werte wie cm, mm, in, pt oder pc für Abstände, Höhen- oder auch Breitenangaben benutzt werden.

Ferner sollte im Print-Stylesheet alles für gute Lesbarkeit vorbereitet werden. Ein gutes Beispiel hierfür sind Hintergrundbilder. In der Regel werden diese von Browsern von Haus aus nicht mit gedruckt. Je nach Browsereinstellung kann das aber schon einmal vorkommen. Hintergründe verbrauchen unnötig Toner und lassen mitunter die Lesbarkeit sehr leiden. Um dies zu vermeiden sollte der Hintergrund daher zuerst einmal für alle Elemente auf Papierweiß gesetzt werden:

* {background: white;}

Wie schon bei Breiten- und Höhenangaben des Dokuments sollte auch bei der Größenangabe für Schrift umgedacht werden. Denn auf dem Papier kommt es weniger auf Pixel oder relative Angaben, die auf Einstellungen des Browsers beruhen an. Stattdessen kann hier getrost auf gängige Werteinheiten wie Punkt und Pica zurückgegriffen werden. Ein Punkt entspricht dabei der üblichen Größe von 1/72 Zoll, ein Pica entspricht 12 Punkt. Als kleinste im Druck noch lesbare Schriftgröße gilt eine Größe von 6pt, dennoch sollte man bei der Wahl des Schriftgrades natürlich ein wenig großzügiger sein, und sich bei den 6pt nur auf generell sehr viel weniger wichtige Rand- oder Fußnoten beschränken.

Weitere Schritte

Hat man die oben beschriebenen, grundlegenden Schritte abgearbeitet, kann es nun ins Detail gehen. Das Wichtigste ist es, sich zu Anfang erst einmal Gedanken zu machen, welche Elemente und Informationen der User auf dem Ausdruck wirklich benötigt. So ist eine Navigation auf einer Internetseite eine echt nützliche Sache, auf dem Papier hilft sie jedoch recht wenig. Stattdessen sollte man sich überlegen, ob es nicht viel eher nötig ist, die entsprechende Seitenrubrik auf dem Ausdruck zu kennzeichnen, und wenn ja, wie man das am besten anstellt. Geht man von einer gängigen Listennavigation aus bei dem der aktive Punkt als eben dieser gekennzeichnet ist:

<ul id="navigation">
  <li><a href="#">Beispiel</a></li>
  <li><a href="#">Punkt 2</a></li>
  <li class="aktiv"><a href="#">Rubrik 3</a></li>
  <li><a href="#">Test</a></li>
</ul>

so lassen sich mit der folgenden Notation im Druckstylesheet die inaktiven Menüpunkte sehr leicht ausblenden:

#navigation li {
    display: none;
}
#navigation li.aktiv {
    display: inline;
}

Stehen bleibt in diesem Fall nur der Menüpunkt, der mit der Klasse .aktiv gekennzeichnet ist. Dieser Menüpunkt lässt sich nun beliebig weiter formatieren und beispielsweise durch Positionierung (position) am Rand des Ausdrucks platzieren. Damit der User auch später noch weiß worum es sich auf dem Ausdruck bei »Rubrik 3« handelt, kann man dies optional mittels :before Pseudoelement kennzeichnen. Etwa:
#navigation .aktiv:before {content: "Aktive Rubrik » ";}

Fehlerfrei funktioniert dies allerdings erst in neueren Gecko- oder KHTML-Browsern die sich an die Vorgaben des W3C halten, wie zum Beispiel dem Mozilla Firefox oder dem Safari Browser auf dem Mac.

Natürlich lassen sich mit dieser Methode nicht nur Navigationen oder Unternavigationen im Druck ausblenden. Auch Werbebanner, Animationen, irrelevante Formulare oder Bildelemente können so mit einfachsten Mitteln vom Ausdruck ausgeschlossen werden. Notwendig ist dazu einfach, das jeweilige Element in der print.css, mit einem .element {display: none;} zu versehen.

Eine andere, weniger elegante Lösung kann sein, nicht zu druckende Elemente mit einer Klasse class="screenonly" zu versehen, welche im Print-Stylesheet ebenfalls mit .screenonly {display: none;} notiert wird. Allen Teilen des Dokuments, die für den Benutzer nur am Bildschirm zu sehen sein sollen, können von nun an mit <e class="screenonly"> für die reine Bildschirmausgabe gekennzeichnet werden. Ob diese Variante semantisch absolut Korrektheit ist, darüber lässt sich an dieser Stelle philosophieren.

Feintuning

Neben der Navigation kann natürlich auch der Fließtext Hyperlinks enthalten mit denen man auf einem späteren Ausdruck nicht mehr viel anfangen kann – solange man sich nicht ausreichend darum kümmert. Links lassen sich dabei nach dem gleichen Prinzip wie man einen aktiven Menüpunkt hervorhebt, ebenfalls kennzeichnen. Sinnvoll ist an dieser Stelle ein Hinweis, dass es sich um einen externen Link handelt, sowie, denn sonst bringt auch der Hinweis nicht viel, der Link an sich:
a:after {content: " - Externer Link: " attr(href);}

Ein Konstrukt wie <a href="http://www.drweb.de">Dr. Web</a> erscheint somit auf dem Ausdruck wie folgt: Dr. Web – Externer Link: http://www.drweb.de.

Arbeitet man diese Liste strukturiert ab, so sollte man dem User bereits ein großes Stück entgegen gekommen sein, was den Informationsgehalt auf dem Ausdruck und auch den Verbrauch an Toner und Papier angeht. Weitere Möglichkeiten bieten sich ab Level 3 der Cascading Stylesheets, womit es möglich sein wird, Umbrüche, Hurenkinder und Schusterjungen zu kontrollieren und sinnvoll zu steuern. Die Unterstützung seitens der Browser in diesem Punkt ist jedoch aktuell nicht bzw. nur sehr rudimentär gegeben.

Dieser Artikel erschien am 07.03.2006 bei Dr.Web + (kostenpflichtig)

16 Kommentare zu “Ruck zuck zum Druck”

  1. Grafik: GravatarHeiko:

    Endlich hast Du es veröffentlicht, jetzt kann ich ENDLICH fragen ob Du (oder natürlich jemand anderes) eine Idee hast wie man Kopf- und Fusszeilen auf den gedruckten Seiten hinbekommen könnte! (Bei mehrseitigen Dokumenten natürlich, bei einer Seite würd ich einfach oben ein Div einblenden lassen).

  2. Grafik: GravatarJan MC:

    Absolut zum Heulen, dass der IE die Angabe
    a:after {content: “ – Externer Link: “ attr(href);}
    nicht interpretiert; wäre eigentlich voll genial

  3. Grafik: GravatarSilentWarrior:

    Quizfrage: Was soll die Angabe * {background: white;} bewirken? Entweder, man macht ein separates Print- und Screensheet, dann braucht man die Angabe nicht, oder aber man will bereits definierte Hintergrundbilder entfernen, dann nützt die Angabe aber wegen der Spezifität nix mehr bzw. wird ignoriert. (Glaube ich jedenfalls, lasse mich gerne eines besseren belehren.) Insofern müsste man dann schon für jedes einzelne Element das Hintergrundbild entfernen bzw. überschreiben.

    Umbrüche, Hurenkinder und Schusterjungen zu kontrollieren und sinvoll zu steuern

    Extrem geil! Darauf freue ich mich schon, wusste das bisher noch gar nicht.

  4. Grafik: GravatarManuel:

    Eigentlich hast Du recht. Ich glaube ich bin bei dem Artikel davon ausgegangen das man Stylesheets hat die für alle Medien gelten sollen. Dafür sollte man mittels * {background: white !important;} bzw none !important den Hintergrund zurücksetzen.

    Nunja.

  5. Grafik: Gravatarralph:

    @silentwarrior

    es ist schon sinnvoll, den hintergrund als weiss zu deklarieren für den druck, denn jeder browser druckt eine seite leider anders aus und nicht immer zu meiner zufriedenheit ;)

    @manuel

    man kann ja dem user auch mit hilfe einer überschrift, die im media: „screen“; unsichtbar ist, mitteilen, wo er gerade ist – im druck.

    das problem, was ich eher habe ist, dass der user das dokument gar nicht ausdrucken will, sondern es auch in ruhe offline lesen kann, so dass hier bilder angebracht sind, die aber im druck, wie bereits von dir angesprochen, zu höheren druckkosten führen – verzwickte angelegenheit ;)

    RALPH

  6. Grafik: GravatarDennis Blöte:

    Guter Artikel – schöne Zusammenfassung, danke :)

  7. Grafik: GravatarKonstantin:

    Hui, und hier gibt’s beim Ausdrucken erst mal zwei Seiten lang bunte Icons, wahlweise auch den Text überlagernd.

  8. Grafik: GravatarmyMagent Blog » Blog Archiv » Webseiten für den Ausdruck optimieren:

    […] Ein ganz subtiler Mehrwert für Internetseiten ist die Aufbereitung für die Druckausgabe mittels geeigneter Stylesheets. Björn Seibert war so nett, die gute Einführung in das Thema von Manuel Bieh aus dem Netz zu fischen. Zum Artikel Ruck zuck zum Druck […]

  9. Grafik: GravatarThemenmixer:

    Aber warum verzichtest du trotz des schönen Artikels auf selbige Einstellungen?
    Ich habe gerade im Firefox die Seitenansicht auf dieser Site gestartet und mich erwartete das Grauen!

    PS: Wirkt denn der Trick mit der Trackback-URL im Textarea gut gegen Trackbackspam?

    Ciao
    Jörg

  10. Grafik: GravatarManuel:

    Ach herrje. Jetzt seh ich erstmal was Ihr alle meint. Ich hatte das Blog garnicht überprüft mit dem Druckstylesheet. Die restlichen Seiten ausserhalb des Blogs funktionieren Einwandfrei. Ich werd mich mal drum kümmern.

    Das mit der Trackbackurl in der Textarea wirkt leider Null gegen Spam. Aber Dank SpamKarma2 und Akismet kommt an Spam eigentlich nichts an, bzw zumindest nichts durch.

  11. Grafik: GravatarOrlando:

    Schön, dass du deine Vorschläge auch im Weblog umgesetzt hast. Der Medientyp »print« wird viel zu oft vernachlässigt und ist in der Praxis wichtiger als »handheld«.

    Einige weitere Spezialitäten für Printstylesheets habe ich 2003 in diesem Artikel zusammengefasst: http://aktuell.de.selfhtml.org/tippstricks/css/drucklayout/ Viel geändert hat sich hinsichtlich der Browserunterstützung seitdem leider nicht, daher auch die Screenshots.

  12. Grafik: GravatarTechnikwürze » Technikwürze 47 - Drucken von Webseiten:

    […] Ruck zuck zum Druck • Webseiten ausdrucken? Webstandards bieten Alternativen • Print-friendly CSS and Usability • […]

  13. Grafik: GravatarJens Meiert:

    Alternative Herangehensweise und weitere Informationen, da bin ich so frei: Druck-Stylesheets: Die absolute Grundlage.

  14. Grafik: GravatarBeitrge aus dem BLOGhuschen ausdrucken - Gabis BLOGhaeuschen:

    […] bei Manuel Bieh gibt es einen ausführlichen Artikel zum Druck-Stylesheet, auch wenn einige der tollen Tipps im […]

  15. Grafik: GravatarDrucken von Webseiten - State of the Art:

    […] Ruck zuck zum Druck (Manuel Bieh) […]

  16. Grafik: GravatarDrucksachen – Print-CSS | Webzeugkoffer Webdesign:

    […] Ruck zuck zum Druck (Manuel Bieh) […]

Die Trackback-URL lautet