erstellt am 03.06.2008 | 2 kommentare

themen: css

mehr platz zum drucken mit css

beim erstellen des layouts einer web-seite wird vor allem darauf geachtet, dass die bildschirmdarstellung ansprechend ist. leider wird oft vergessen, dass die anwender/innen den inhalt der seite auch ausdrucken wollen. besonders bei längeren artikeln oder wichtigen informationen ist ein ausdruck oft hilfreich.

da aber das layout für den bildschirm und dem interaktiven umgang mit der seite erstellt wurde, muss man für den ausdruck einige anpassungen vornehmen, sonst ist das ergebnis äußerst unzufriedenstellend und auch keine werbung für den betreiber der web-seite. am ausdruck brauche ich keine menü-navigation oder such-felder, und wenn diese links und/oder rechts auch noch platz wegnehmen, bleibt für den eigentlichen inhalt oft nur ein schmaler streifen in der mitte, der sich dafür aber über unzählige seiten hinzieht, bei denen der meiste platz am papier nicht genutzt wird.

im folgenden mache ich ein paar vorschläge, wie mit css (cascading style sheets) bei wenig aufwand ein gutes druckbild erzeugt werden kann.

keine frames

der erste punkt bezieht sich auf die grundlegende architektur der web-seite. dabei sollte die verwendung von frames vermieden werden.
speziell beim drucken führen frames zu problemen: entweder werden alle frames ausgedruckt, was papierverschwendung ist, da navigations-menüs etc. nicht benötigt werden oder die anwender/in muss genau darauf achten, welchen frame sie drucken will.
(zudem sind frames auch in zusammenhang mit suchmaschinen ungeeignet, da oft nur teile einer seite gefunden und angezeigt werden.)

eigenes css für das drucken

nun zu den dingen, die wir mit css erledigen können.
dazu ist es erst einmal nötig, dass wir ein eigenes css-script für den ausdruck erstellen und in die html-seite einbauen. wichtig dabei ist, dass das druck-css nach dem allgemeinen css angegeben wird und für das medium "print" definiert wird:
das druck.css muss nach dem allgemein.css kommen, damit wir dann allgemeine layout-eigenschaften für den ausdruck überschreiben können. eine sauberere aber aufwendigere lösung wäre die aufteilung in 3 css-dateien, eine die die anweisungen für alle medien ("all") beinhaltet, eine die für das layout am bildschirm zuständig ist (media="screen") und eine die den ausdruck definiert.
der einfachheit halber machen wir uns jedoch zu nutze, dass bei mehrmaliger definition einer css-eigenschaft jene verwendet wird, die zuletzt kommt. deshalb kommt druck.css nach allgemein.css und überschreibt nur im falle des druckens die nötigen css-anweisungen.

alles ausser dem eigentlichen inhalt ausblenden

nun zur konkreten arbeit mit css:
als anwender/in möchte ich nur den eigentlichen inhalt der aktuellen web-seite ausdrucken. somit will ich dinge wie navigations-menü, such-felder, news- oder andere hinweise nicht drucken.
das können wir steuern, in dem wir alle bereiche, die nicht zum inhalt gehören, beim drucken nicht anzeigen.
im druck.css definieren wir daher zum beispiel:
wobei sie natürlich die ids oder class-names (ContentLeft, ContentRight, navigation, news) an ihre web-seite anpassen müssen.

content-bereich maximieren

oft genügt es noch nicht, alles rundherum ausblenden. durch ein eventuell fixes layout hat der inhalt noch immer nicht mehr platz. dann ist es nötig, die css-eigenschaften für den content-bereich zu überschreiben. in welcher form hängt natürlich von ihrem layout ab, zum besipiel:

kopfbereich verkleinern

einen kopf (header) sollte die seite natürlich haben. anbieter/innen möchten hier ihr unternehmen präsentieren, anwender/innen möchten wissen, von wem die information stammt.
der kopf muss am papier nicht so aussehen wie am bildschirm und manchmal macht es sinn, wenn wir den kopf-bereich der seite verkleinern, eventuell das logo kleiner ausdrucken, die schriftgröße minimieren.
hier können wir ebenfalls die css-eigenschaften der allgemeinen css-datei überschreiben und so den kopf für den druck anpassen.
... und was sonst noch alles nötig ist, eventuell auch das ausblenden von verschiedenen inhalten im kopfbereich.

keine hintergrundfarbe und -bild

ob der hintergrund mit ausgedruckt werden soll oder nicht lässt sich zwar im browser einstellen, aber warum soll sich die anwender/in darum kümmern müssen, wann sie umstellen muss und wann nicht. aus meiner sicht ist es service am kunden, wenn der ausdruck die farbpatronen der tintenstrahldrucker nicht unnötig leert. daher ausschalten von hintergrundfarbe und auch von hintergrundbildern, sofern sie nicht für den inhalt bedeutend sind.

links / zitate

angeregt durch einen kommentar von "Oliver" hier noch ein paar weitere hinweise:
(an dieser stelle herzlichen dank für das qualifizierte feedback von oliver.)

stellen sie links in der webseite in einer anderen farbe dafür ohne unterstreichung dar, kann man diese bei einem schwaz-weiss-ausdruck nicht mehr erkennen. daher kann es gut sein, diese wieder unterstrichen darzustellen.

des weiteren ist es natürlich am papier nicht möglich, den link anzuklicken. und da man nur den Text sieht, weiss man anhand des ausdrucks nicht mehr die adresse, auf die der link verweist. um die link-adresse auszugeben, bedienen wir uns eines css-pseudoelements namens ":after". damit kann man nach einem html-element automatisch inhalte ausgeben (mit ":before" davor).
bewirkt nun, dass die linkadresse (das attribut "href") nach dem link-text zwischen [ und ] kursiv ausgegeben wird.

für zitate, die sie in dieser form definieren

gibt es die möglichkeit, den urheber bzw. die quelle des zitats auch auszugeben. dazu bedienen wir uns wieder des :after-pseudoelements und schränken den css-selektor auf alle "q" ein, die das attribute "cite" definieren:

kommentare

ich hoffe, die hinweise waren nützlich für sie, ich freue mich über weitere anregungen und vorschläge, die sie als kommentar hinterlassen können.