Webstandard & Webdesign - CSS, HTML

 

Webseiten ausdrucken? Webstandards bieten Alternative!

CSS bietet die Möglichkeit, Stylesheets für unterschiedliche Ausgabemedien zu definieren. Auf einfache und unkomplizierte Art und Weise können die Dateien mittels entsprechender CSS Dateien für das jeweilige Ausgabemedium präsentiert werden. Diese Anwendung für den Monitor ( media=screen ) dürfte ebenfalls den meisten bekannt sein. Ab und zu gibt es hier, den ein oder anderen doch etwas längeren Artikel. Nicht jeder möchte diesen bspw. inklusive Kommentare online lesen, sondern sich ausdrucken. Nach geraumer Zeit die mein Weblog nun online ist, habe ich mich mal an die Arbeit gemacht und die Styles für eben die Printvariante zu bearbeiten. Das Ausgabemedium PRINT und eine zusätzlich Datei ( print.css ) sorgen für einen hoffentlich übersichtlichen Ausdruck der Artikel, welcher mittels der Accesskeybelegung: Alt + p ebenfalls unkompliziert und ohne Barrieren aufgerufen werden kann. Der ein oder andere wird jetzt denken, hey warum so einen Aufwand? Wozu gibt es Screen grab! Oder andere Browser-Extensions. Vollkommen OK, wer es installiert hat, soll es nutzen. Aber nicht alle User installieren Erweiterungen für den Browser bzw. können damit umgehen. Und da wir keine Barrieren schaffen, sondern sie beseitigen wollen, gibt es für alle anderen die übliche Art und weise des Druckens ;o)

Herangehensweise

Natürlich sollte man sich vorher Gedanken machen, was man alles auf der Printversion darstellen möchte und was ebenso wichtig ist, nicht darstellen muss. Eine ganze Seite ( siehe Grafik rechts ) mit bspw. Navigationsspalten, Werbung, grosse Header- oder Footerbereiche und eine Contentspalte werden ohne entsprechendes Print-Stylesheet schlecht dargestellt. Dies ist für den potentiellen Leser der Artikel unkomfortabel und wird mehr oder weniger dazu führen, dass der Leser sich auf dieser Seit höchstwahrscheinlich eher seltener etwas ausdrucken wird. Aber was möchte der User drucken und dann lesen? Die Navigation mit Ihren Navigationspunkten dürfte daher ebenso wenig interessant sein, wie Links die zu Validierungsseiten führen etc. Trackbacks, Permalinks oder Formularelemente ( so fern nicht Bestandteil eines Formulardruckes ) etc dürften ebenso wenig dazu gehören. Deshalb habe ich mich dafür entschieden diese, auszublenden. Ich hoffe das liegt im Interesse der Drucker und Leser?

Man hätte es sich einfach machen können und sämtliche Styles mittels display: none; ausblenden können. Aber eine wirklich gute Alternative ( siehe Grafik links ) ist das nun wirklich nicht. Ein Buch oder eine Zeitschrift greift auch auf typographische Mittel zurück, um bestimmte Inhalte besonders zu präsentieren. Deshalb wurden Überschriften, Absätze und Links neu definiert. Die beste Maßeinheit für Schriften ist beim Druck bekanntermaßen der Punkt oder Pica. Zur Positionierung kann unter anderem cm oder in ( Zoll ) eingesetzt werden. Points sind für Definition innerhalb eines Webbrowser irrelevant, hier sollten px, em oder % benutzt werden.

Probleme & Berücksichtigungen bei Print Styles

Es gibt mehrere Dinge die bei der Realisierung von Druck-Styles berücksichtigt werden sollten. Beispielsweise kann über den Browser das Drucken von Hintergrundgrafiken und -farben nicht erlaubt werden. Deshalb wird oft geraten darauf zu verzichten die Druckversion ( siehe Grafik mittig ) mit Grafiken zu bestücken, es geht in den meisten Fällen ja um den Inhalt der Gelesen soll. Die Seitenränder einer Seite deren Kopf- und Fußzeilen, in denen die Browser den Titel der Seite und die URL der Seite unterbringen, liegen leider nicht im Bereich vom CSS. Zum anderen gibt es Browser wie den Mozilla, der leider über ein unübersehbaren Bug bezüglich des Druckens verfügt. Wenn die Styles mit float definiert werden, beendet der Browser einfach den Druck der Seiten nach genau einem Blatt. Wenn man diesen Browser also berücksichtigen möchte: unbedingt auf den Einsatz von gefloateten Elementen verzichten!

Ein weiteres nicht gerade unwichtiges Thema sind Links. Man druckt sich eine Seite aus und die Links sind farblich hervorgehoben, nur der Linkpfad ist natürlich nicht mehr vorhanden, da dieser nicht mit ausgedruckt wird. Viele interessante Hinweise zu anderen Webseiten sind damit für den Druckenden verschwunden. Dafür gibt es eine Alternative die es möglich macht, nach dem Link den Pfad bspw. in Klammern auch dem Leser zur Verfügung zu stellen. Die CSS-Property kann folgendermaßen übergeben werden.

Code-Beispiel
a:link:after { content: " (" attr(href)")"; /* Definitionen für Linkverweis */ }

Diese sollten so gewählt werden das sie sich optisch von anderen Links oder Acronymen unterscheiden. Zum Schluss des Druckes habe ich noch eine Linie vom Footerelement hervorgehoben, dass auch optisch den Schluss des Artikels oder eines Druckes sichtbar macht. Wenn die Linie erscheint, weiß man das man die gesamten Seiten gedruckt hat und nicht welche fehlen ;o)

Zusammenfassung:

• Hintergrundgrafiken und Farbverläufe ausblenden
• weißer Hintergrund und dunkle Schriftfarben wählen (Überschriften, Acronyme und Links inklusive Linkverweise sollten verschiedene Farben im Vergleich zum Text bekommen )
• Ausblenden unnötiger Seitenbereiche (Navigation, Suche, Formulare für Kommentare etc.)
• Verzicht von float Anweisungen
• Einheit der Schriften mit pt definieren
• Wiedererkennungswerte ( Schriftarten, Farben, kleines Logo etc. ) zum Onlineauftritt wahren

Weitere Informationen in Bezug auf CSS und Print finden Interessierte auf folgenden Seiten, denn es ist noch wesentlich mehr möglich, als das was oben beschrieben wurde. Leider interpretieren auch hier die Browser viele Eigenschaften unterschiedlich oder gar nicht ;o(

Linkliste:

• CSS3
• CSS2
• www.intensivstation.ch
• www.style-sheets.de