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.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
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
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.
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.
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.
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?
[…] In den Folien 21-24 widmete ich mich der Druckausgabe, der Druckvorschau und einem Mini-Styleswitcher der auf die CSS-Datei für die Druckausgabe zurückgreift. Darüber habe ich bereits im Dezember schon einen Beitrag verfasst: Druckvorschau, CSS und die Nutzer. […]
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.
[…] CSS [media=”print”] Druckvorschau basti HTML/CSS […]
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.
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.
Herzlichen Dank für diese tolle und verständlich beschriebene Lösung! Nach so etwas habe ich schon länger gesucht. 🙂
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!
[…] 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. […]
[…] Ihr könnt es Euch gerne mal anschauen: Druckvorschau. Eine gute Anleitung zum Thema findet Ihr hier. Seiten, die für das Drucken nicht optimiert sind, könnt Ihr übrigens mit einer […]