Technikwürze

Druck-Stylesheets total

Technikwürze 133

Meta: S3 · E6 · Typ full · Veröffentlicht · Aktualisiert

Moderation: Sascha Postner

Gäste: Peter Rozek

Zusammenfassung

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.

Inhalt

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-Pseudölemente

  • 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

Druckversion auf den Seiten der Moderatoren

Sonstige Beispiel

Artikel

Kommentare (20)

  • Peter Peter

    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.

  • Manko10 Manko10

    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.

  • Der Caspers Der Caspers

    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/

  • Dirk Dirk

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

    • Peter Peter

      @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.

  • Jan Jan

    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?

  • Marcel Schwarzenberger Marcel Schwarzenberger

    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

    • Peter Peter

      @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.

  • Conrad Conrad

    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

  • Sebastian Sebastian

    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.

  • Peter Peter

    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

By submitting your data, you agree that all entered data may be saved and displayed as a comment.