Webseiten werden in der Regel für die Ausgabe auf einem Bildschim gestaltet. Doch mit Webstandards muss die Darstellung beim Drucken nicht zu kurz kommen. Peter Rozek und Sascha Postner diskutieren die Möglichkeiten und Hürden bei der Arbeit mit Druck-Stylesheets.

Diese Folge jetzt anhören

Das Thema

Media Typen

Zunächst müssen die speziellen Druck-Stylesheets eingebunden werden (Codebeispiele finden sich in Peter Rozeks Artikel).

  • Über eine separate CSS-Datei mit dem Mediatyp print
  • Mit nur einer CSS-Datei über @media print oder import url(print.css) (Beachten: Druckstylesheets werden auch mitgeladen, wenn die Seite auf dem Bildschirm ausgegeben wird).

Entfernen von Inhaltselementen

Welche Inhaltselemente gehören in die Druckausgabe?

  • In erster Linie der eigentliche Content.
  • Navigation, Suchmasken, Werbebanner brauchen nicht dargestellt werden. Entfernen über die Deklaration display: none;.
  • Letztlich sollte man im Einzelfall entscheiden.

Wichtig für ein gutes Printstylesheets ist die Beachtung von Standards. Bereits beim Aufbau eines gut strukturierten Webdokuments ist die Vergabe von standardisierten ID-Klassen sinnvoll:
Header, Content, Footer, Sidebar, Search, Branding, Keyvisual, Banner etc.

Gestaltung von Elementen

  • Standardschriftgröße auf 12pt setzen – absolute Größe für die Druckversion. Pixel als Größenangabe zu verwenden liegt zwar nahe, ist aber nicht zu empfehlen.
    • Einfaches Beispiel: Bei einem 1200 dpi -Drucker würde z. B. eine 12 Pixel große Schrift 0.01 Zoll groß gedruckt werden.
  • (Hintergrund-)Farben anpassen und gegebenenfalls Blocksatz einsetzen.
  • Seitenbreite und Abstände für ein gutes Schriftbild wählen. Dabei möglichst cm oder mm nutzen.
  • Links sollte man je nach Bedarf unterstreichen, fett drucken oder farblich anpassen.

CSS-Pseudoelemente

  • Mit den Pseudoelementen :after und :before können Elemente via CSS nur für die Printausgabe angezeigt werden. So kann man beispielsweise Linkziele, Titel, Zitatquellen oder Alterativtexte von Grafiken ausgeben. (Codebeispiele finden sich in Peter Rozeks Artikel)
  • Nachteil: IE bis zur Version 7 unterstützt dies nicht.
  • Zusätzlich gibt es noch CSS-Regeln, die nur rudimentär oder gar nicht unterstützt werden. Dazu gehören beispielsweise @page für das Seitenlayout und orphans / widows zur Vermeidung von Schusterjungen und Hurenkindern.
  • page-break-before und page-break-after funktioniert hingegen sogar im Interne Explorer 4+.

Alternativen bzw. Erweiterungen

Der Artikel Improving Link Display for Print zeigt wie mit JavaScript eine Druckausgabe erstellt werden kann, die mit Verweisen und Zitaten umgeht, wie wir es aus ein Buch oder Fachartikel her kennen.

  • Links und Zitate werden als Fußnote gekennzeichnet,
  • in der Druckausgabe werden die Fußnoten in einer geordneten Liste angezeigt und stören somit nicht den Lesefluss
  • Funktioniert auch mit dem IE 6, ist aber natürlich auf aktiviertes JavaScript angewiesen.

Beispiele

Die Biene Preistäger 2008

  • Hauptbahnhof Wien
    Leider etwas klein und deutlich zu wenig Platz genutzt.
  • Darmkrebs
    Im Gegensatz zum Hauptbahnhof Wien, wird der gesamte Platz genutzt. Druckausgabe sieht OK aus.
  • Gemeinde Schönefeld
    Schöne Druckversion. Besonders positiv: Schriftgröße in pt (Punkt) und Abstände in cm angegeben.

Druckversion auf den Seiten der Moderatoren

Sonstige Beispiel

Artikel

Diese Folge jetzt anhören

Tags: ,

Dieser Beitrag wurde am Montag, 20. April 2009 um 00:00 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von Peter Peter
    am 20. April 2009, 07:41 Uhr

    Meinen Artikel zu den Druckstylesheets habe ich mittlerweile aktualisiert und auch online gestellt. Kleine Anmerkung noch, Five Simple Steps war kein Biene Preisträger ;-)
    Sorry, war leider ein Fehler in meinem Nauskript. Falls jemand bei den Biene Preisträgern nach Five Simple Steps sucht, und sich wundert, darf sich gerne bei mir beschweren.

  • Avatarbild von Sascha Postner Sascha Postner
    am 20. April 2009, 08:19 Uhr

    @Peter: Habe den Fehler korrigiert! :)

  • Avatarbild von Manko10 Manko10
    am 20. April 2009, 12:56 Uhr

    windows? Das heißt widows. :-D
    @page muss ich mir aber mal genauer ansehen, das habe ich bisher immer sehr vernachlässigt, weil die Browserunterstützung für Print-Stylesheets einfach katastrophal ist.

  • Avatarbild von Der Caspers Der Caspers
    am 20. April 2009, 20:03 Uhr

    Copyright-Hinweise im Ausdruck per :before bzw. :after einzubauen macht bei mir ganz komische Sachen in Safari und Chrome, vgl. http://www.flickr.com/photos/tomascaspers/3459505247/ bzw. http://www.flickr.com/photos/tomascaspers/3459628391/

  • Avatarbild von Dirk Dirk
    am 21. April 2009, 10:24 Uhr

    Hinweis: Der Footer wird bei YAML seit 3.1 in der Voreinstellung nicht mehr ausgeblendet, genau wegen der angesprochenen, evtl. vorhandenen Copyright-Hinweise.

  • Avatarbild von Peter Peter
    am 21. April 2009, 10:49 Uhr

    @Dirk, Ich hatte in Bezug auf YAML die Dokumentation Drucklayout gelesen und dort wird empfohlen die Fußzeile auszublenden.

    “Die Angaben der Fußzeile, Werbung in den Randspalten oder eine Suchmaske sind auf Papier nutzlos.”

    Vielleicht sollte man den Punkt in der Doku noch anpassen.

  • Avatarbild von Jan Jan
    am 23. April 2009, 08:32 Uhr

    Ich mache es immer so, dass ich ein Stylesheet für alle Medientypen habe und darunter dann spezielle Regeln für den Media-Typ print notiere, sodass beim Drucken zum Beispiel Navigation und Werbung ausbelendet wird.

    Sollte man beim CSS für alle Medientypen media all nutzen oder das media-Attribut dann einfach weglassen?

  • Avatarbild von Peter Peter
    am 25. April 2009, 07:51 Uhr

    @jan

    wenn Du alle Mediatypen ansprechen willst solltest Du “all” schreiben.

  • Avatarbild von Marcel Schwarzenberger Marcel Schwarzenberger
    am 25. April 2009, 08:45 Uhr

    Ich habe keine Ahnung, wie man Druck-Stylesheets erstellt. Das ist auch nicht meine Aufgabe – eher schon das: Es reicht mir zuweilen nicht, Webtext als digitale Datei zu speichern, sondern ich muss ihn auch ausdrucken.

    Was brauche ich? Idealerweise sämtliche Daten, die es mir auch später erlauben, auf einen Blick den Ausdruck einzuordnen: Autor / exakte (!) Domain / Titel des Beitrags. Und ob das als Footer kommt oder wo die Infos stehen, ist mir beinahe wurscht.

    Natürlich möchte ich vor allem platzsparend ausdrucken. Irgendwelche Frames sind mir nicht wichtig. Am liebsten habe ich einen möglichst unformatierten Text. Dafür nehem ich gern einen extra Schritt in Kauf: “gehe auf Printversion” Wenn man eine solche Printversion hat – dann kann man das sicher auch als Serife darstellen. Aber serifenlos oder nicht – auch das ist mir egal. Verdana ist gut lesbar, Problem aber: Die Übertragung als Printversion ist ziemlich raumgreifend, Verdana wird immer als ziemlich große Schrifttype übersetzt.

    Fazit: Liebe Designer, macht euch nicht so viele Sorgen um Serife ode rnicht, lasst die Nutzer platzsparend ausdrucken und sorgt dafür, dass Text und Webseite hinreichend identifiziert werden können anhand des Ausdrucks

  • Avatarbild von Peter Peter
    am 26. April 2009, 10:12 Uhr

    @Marcel Schwarzenberger
    Was Du einforderst, soll eine Druckversion auch leisten. Ob man hier mit Serifen oder serifenlosen Schriften ist nachgelagert.

    Wichtig ist: Titel, Autor, eigentlicher Inhalt und Domain. Wenn der Webdesigner die Grundprinzipien einer Druckversion umsetzt, sollten die oben genannten Grundinformationen auch in der Druckversion erscheinen.

    Das ein Designer natürlich versucht ist auch das Erscheinungsbild der Druckversion zu beeinflussen, hängt natürlich auch mit seinem Beruf (Berufung) zusammen. Bei Digitalen Medien und dazu zählt auch die Druckversion einer Website, sollte immer der Nutzer die Freiheit haben, individuelle Anpassungen vorzunehmen.

    Wenn der Webdesigner, über die Druckstylesheets den Rahmen für den Ausdruck vorgibt, kann der Nutzer die Ausgabe über die Browsereinstellung Anpassungen. Ob Querformat, Skalierung.

  • Avatarbild von Conrad Conrad
    am 26. April 2009, 16:26 Uhr

    Zum Testen: Im ersten Schritt kommentiere ich immer das Screen-CSS aus und stelle das zukünftige Print-CSS auf media=“print”, so spart man sich das “File -> Print preview”, sondern hat die Druckansicht als Standard im Browser.

    Gibts auch als Funktion in der developer toolbar, aber den Klick kann man sich so sparen.

    Danach dann Print Preview nutzen. Danach dann noch echt drucken (meiner Erfahrung nach stimmt die Druckvorschau (Windows) nicht immer). Zum Bäume sparen natürlich ein pdf ;-)
    Auf dem mac kann man sich das pdf drucken sparen, dort erzeugt die preview ja schon eins.

    Grüße, Conrad

  • Avatarbild von Sebastian Sebastian
    am 30. April 2009, 11:14 Uhr

    Interessanter als das erzwingen von Seitenumbrüchen finde ich das verhindern selbiger: Mit “page-break-after: avoid” kann man z.B. verhindern das Überschriften vom zugehörigen Text getrennt werden.

  • Avatarbild von Peter Peter
    am 8. Mai 2009, 06:51 Uhr

    Ihr wisst schon dass es in Deutschland kein Copyright gibt. Was ihr vermutlich meint ist das Uhrheberrecht und die Lizenz. Ersteres gebührt dem Autor auch ohne Hinweise am Ende der Seite, letztes sollte jedoch unbedingt angegeben werden. Zur weiteren Information: http://chaosradio.ccc.de/cr93.html

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.