Druckvorschau, CSS und die Nutzer

14 Kommentare

Seit sehr langer Zeit setze ich hier im Weblog eine CSS-Datei fĂŒr die Druckausgabe, hier der Code aus dem entsprechenden Bereich:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Das Ergebnis ist jedem halbwegs erfahrenem Webworker klar. Der Browser liest beide CSS-Dateien ein [1] und je nach dem im welchen Modus man sich befindet (z.B. Druckvorschau) wird die entsprechende CSS-Datei eingesetzt. Somit kann man z.B. fĂŒr die Druckausgabe eine optimiertes Dokument ausgeben lassen. Hier in diesem Weblog blende ich so gut wie alles was nicht direkt zum Inhalt gehört aus. Einfach mal im Browser die Druckvorschau aufrufen oder auf den Druckvorschau-Link klicken.

Das Problem ist aber hierbei, dass viele Nutzer und unter anderem auch recht erfahrene Nutzer (da war ich vor einiger Zeit sehr ĂŒberrascht) nicht davon ausgehen, dass es eine CSS-Datei fĂŒr die Druckausgabe gibt und diese Lösung auch schlichtweg nicht kennen. Die Suchen krampfhaft nach einem “Drucken” oder “Druckvorschau”-Link auf der Website. Die entsprechenden MenĂŒpunkte im Browser sind entweder völlig unbekannt oder einfach “aus den Augen, aus dem Sinn”.

Was kann man den nun tun? Eine sehr einfache Lösung ist es einen Javascript-Link einzubauen:

<a href="javascript:window.print()">Drucken</a>

Diese Lösung hat zwei Nachteile. Bei ausgeschaltetem Javascript ist nix … ist logisch. Zudem ruft dieser Link nur den Druck-Dialog auf. Das ist nicht sonderlich hilfreich, denn man will vorher auch sehen was man druckt. Eine Javascript-Lösung zum Aufruf der Druckvorschau gibt es, allerdings funktioniert es nur im Internet Explorer … also recht Witzlos.

Was könnte man jetzt machen um eine browserĂŒbergreifende “Druckvorschau” zu realisieren und fĂŒr die sehr erfahrenen Nutzer die CSS-datei fĂŒr die Druckausgabe unangetastet zu belassen:

<?php if (isset($_GET['d']) && $_GET['d'] == 'druckvorschau') { ?>
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<?php } ?>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Der obere Codeschnipsel (gefunden bei maratz) realisiert genau das. Sollte der SchlĂŒssels d des assoziativen Arrays $_GET den Wert druckvorschau haben, dann wird das Druck-CSS als das Haupt-CSS eingebunden. Ist dies nicht der Fall dann wird die “normale” CSS-Datei eingebunden. Hierbei handelt sich um kein Hexenwerk sondern es reicht folgenden Link an der entsprechenden Stelle einzubinden:

<a href="?d=druckvorschau">Druckvorschau</a>

Wenn man diesen Verweis aufruft bzw. anklickt, dann wird der SchlĂŒsselwert-Paar d=druckvorschau abgegeben und die eigentliche CSS-Datei wird ersetzt und man bekommt im Browser das Dokument so zu sehen, wie es dann auch gedruckt werden soll.

Man könnte sich hier fragen, warum ich die print.css außerhalb der Abfrage noch einmal einbinde und zwar im media="print"-Modus. Das hat zwei GrĂŒnde. Zum einen fĂŒr die Nutzer die direkt ĂŒber den den Druck-Dialog oder die Druckvorschau des Browser gehen. Aber auch wenn man aus der “kĂŒnstlichen” Druckvorschau druckt. In beiden FĂ€llen sucht der Browser nach einer eventuellen CSS-Datei fĂŒr die Druckausgabe. WĂŒrde ich diese nicht wie oben einbinden, wĂŒrde der Browser das Dokument so drucken lassen als ob kein CSS eingebunden ist.

Das ist allerdings nicht der Sinn der Sache weil ich mit der print.css bestimmte Ziele verfolge u.a. nicht-relevante Bereiche ausblenden.

[1] Mir ist durchaus bewusst, dass man die CSS-Dateien schonender in Bezug auf Server-Abfragen einbinden kann.

Diesen Beitrag teilen:

Verwandte BeitrÀge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse FachbĂŒcher und Fachartikel publiziert.

Schlagwörter:

14 Kommentare

  1. Hallo,

    habe auch letztens mit einigen Drucktechniken rumprobiert. Und dabei ist mit auf einem Großteil der durchforsteten Seiten aufgefallen, dass gar keine DruckStylesheets zur VerfĂŒgung stehen.

    Leider können sich so die standardisierten Funktionen nicht durchsetzen, weil beim grĂ¶ĂŸten Teil der Webseiten nur MĂŒll gedruckt wird. Und es nicht sonderlich “sauber” aussieht.

    Ich denke man sollte dem Druckstylesheet viel mehr Aufmerksamkeit widmen. Deshalb schonmal vielen Dank fĂŒr diesen kleinen Work-Around. Dies könnte viele Nutzer und Webseitenbetreiber etwas sensibilisieren.

    Viele GrĂŒĂŸe,

    Martin

  2. Das ist natĂŒrlich eine sehr elegante Lösung, die alle Varianten abdeckt. Vielleicht werde ich das noch einbauen, weil es schlanker ist. Allerdings mĂŒsste ich dazu natĂŒrlich erst noch die print.css basteln…
    Momentan nutze ich das Plugin wp-print, das genau diese Aufgabe erfĂŒllt und auch noch mit einem Hinweis/Button in den Beitrag eingefĂŒgt werden kann.

  3. Guten Morgen perun, wie wunderbar. Ich habe seit geraumer Zeit nach einer derart eleganten Lösung gesucht. In diesem Zusammenhang habe ich auch schon mal ein bisschen mit dem Tauschen von Druck- und Bildschirmstylesheet herum gespielt, aber ohne wirklich Erfolg zu haben. Danke fĂŒr diesen Tipp.

  4. Ich hab nochmal ein bisschen mit den Styles experimentiert und die Druckvorschau aufgepeppelt. In diesem Zusammenhang habe ich auch endlich mal ein anstĂ€ndiges Druckstylesheet hinterlegt, das hatte ich schon ewig vor. Danke also fĂŒr diesen anstoßenden Stein.

  5. Ich halte von speziellen Print-Links realtiv wenig, das ist so sinnvoll wie wenn man einen Reload-Button oder Vor-/ZurĂŒck-Buttons auf der Seite nachbildet. Funktionen die ein Browser zur VerfĂŒgung stellt, sollten auch benutzt werden.

    Sollte es nicht die Aufgabe des Theme-Designers sein einen Print-Stylesheet mitzuliefern?

  7. Diese Methode ist zwar nicht schlecht, dennoch benötigt man dazu PHP. Wenn ich jetzt aber eine Druckvorschau auf einer HTA-Seite einbinden will, die ja bekanntlich clientseitig ausgefĂŒhrt wird und somit PHP nicht benutzen kann, brĂ€uchte man eine andere Möglichkeit. Mit VBScript könnte man zum Beispiel alle Windows-User abdecken. Ich bin leider noch auf der Suche, wie man es da macht.

  9. Der Druckvorschau-Link funktioniert.
    Es wird eine neue Webseite geöffnet mit dem Inhalt, so wie das in der print.css festgelegt wurde (z.B. Kopfbereich, Navigation, rechte Spalte werden ,SchriftgrĂ¶ĂŸe in pt usw.).
    Frage: Und woher weiß der unbedarfte DAU, fĂŒr den dieser Druckvorschau-Link gedacht ist, wie er diese Seite drucken kann?
    Man mĂŒsste ihm auf dieser Druckvorschau-Webseite wohl noch einen Druck-Link servieren?

    Selbst bei den “Silver-Surfern” dĂŒrfte es sich rumgesprochen haben, wie man eine Seite ausdruckt (Datei/Drucken) und dass man sich vorher unbedingt die Druckvorschau (Datei/Druckvorschau) ansehen sollte.
    Denn leider fehlt immer noch viel zu oft eine vernĂŒnftige Printversion fĂŒr die Webseiten.

    Ich halte von zusĂ€tzlichen Druckbuttons gar nichts – es ist gefĂ€hrlich, darauf zu klicken, man weiß nie, was genau passiert, mitunter geht gleich das Drucken los, ohne dass man vorab weiß, was und wie gedruckt wird.

    Die Bezeichnung Druckvorschau-Link ist okay, da weiß man, woran man ist. Und die hier vorgestellte Lösung ist die einzige passable Lösung, die ich beim googeln gefunden habe, wenn es denn unbedingt eine zusĂ€tzliche Druckvorschau sein muss.

  10. Sehr interessante Lösung. Werde dies bei einem kommenden Projekt einsetzen.
    Jedoch sollte man nicht zu sehr ĂŒber Javascript schimpfen. NatĂŒrlich besteht die Möglichkeit, dass ein User Javascript ausgeschaltet hat, jedoch wird einem beim Betrachten von Statistiken klar, dass dies nur ein höchst geringer Anteil ist.

    Ob nun die Printvorlage mit CSS oder Javascript umgesetzt ist, spielt auf Firmenwebsites keine Rolle. Viel wichtiger ist jedoch, dass eine zusÀtzliche Möglichkeit des Ausdruckens geschaffen wird. Browser-FunktionalitÀt hin oder her, die wenigsten Benutzer verwenden diese.

  11. Herzlichen Dank fĂŒr diese tolle und verstĂ€ndlich beschriebene Lösung! Nach so etwas habe ich schon lĂ€nger gesucht. 🙂

  12. Ich finde die hier beschriebene Lösung sehr gut, zumal ich persönlich von Druckansichten sehr viel halte, wenn ich mir zum Beipspiel diesen Tip hier ausdrucken möchte, ohne gleich sinnlose Dinge zu drucken oder gar Farbe zu verschwenden.
    Ich habe diese Lösung fĂŒr meine Seite eingesetzt und einen entsprechende Stylesheet dazu gelegt. Optimal!

  13. […] Das Druckvorschau-Plugin konnte ich entsorgen. Die Druckvorschau funktioniert jetzt im Browser genauso wie über den Link im Fuß jedes Eintrages, ganz ohne Plugin oder JavaScript, nur mit einem kleinen PHP-Schnippsel und den Stylesheets, die sowieso schon vorhanden sind, dank dieses genialen Tipps. […]

Kommentare sind geschlossen.