Print CSS
Cascading Style Sheets Print CSS
Einige Elemente einer Webseite sind auf Papier überflüssig. Suchfeld oder Navigationsleiste sowie Werbebanner sind nur einige davon. Zudem werden längere Texte in der Regel lieber auf Papier gelesen. Es gibt viele Gründe Webseiten auszudrucken. Zeitungen bieten längst spezielle Printversionen zu den Artikeln an. Diese erfordern aber meist eine Serverseitige Verwaltung der Inhalte (Content Management System). Die Druckversion muss zudem extra vom Server angefordert werden, das führt zu mehr Traffic, und lohnt sich meist nur für grosse Sites. Mit einem Print CSS und einem neuern Browser, gibts eine einfachere, schnellere Möglichkeit Websites für den Druck gut aussehen zu lassen, die zudem keinen Traffic generiert. Hier die Schritte zu einem print.css
media=”print” (media-Attribut )
Das Bildschirm-Stylesheet muss es auf “screen” gesetzt werden,
das Druck-Stylesheet auf “print”. Siehe auch CSS einbinden.
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”>
font und background-color (Schrift- und Hintergrundfarbe)
Serifen Schriften eigenen sich in der Regel besser als Laufschrift für den Ausdruck. Titel können in anderen Standartschriften dargestellt werden. Die Schriftgrösse sollte für den Drucker auf points eigestellt werden. Die Schriftfarbe sollte schwarz und die Hintergrundfarbe transparent sein.
body { background-color: transparent; font-size: 12pt; font-family:’Times New Roman’,Times,serif; color:#000000; }
display (Navigationen ausblenden)
Beim Ausdruck sind Hintergrundbilder sowie Werbebanner und search Buttons unerwünscht. Lesbarkeit und Tintenverbrauch sind 2 der Gründe. Elemente (div) können mit display:none; ausgelendet werden.
#navi { background-color:transparent; padding-top: 10px; display:none;}
padding und margin (Ränder)
Wenn padding und margin auf 0px eingestellt sind, wird sichergestellt, dass der Text die ganze Breite des Papiers nutzt. Beim Bildschirm wäre das sinnlos.
#content { background-color:transparent; padding: 0px; margin: 0px; }
a:visited:after (Links)
Damit ein Link auch im ausdruck Sinn macht setzt man mit den Pseudo-Element:after und der Eigenschaft:content die komplete URL des Hyperlins neben den Verweis. Diese Eigenschaft geht zur zeit im Mozilla und im Safari, sollte aber dafür auch eingesetzt werden.
a:after, a:link:after { color: #000000; background-color:transparent; content: ” * Link ” attr(href) “* “; } }
a:visited:after { color:#000000; background-color:transparent; content: ” * Link ” attr(href) “* “; }
page-break (Seitenumbruch)
Mit page-break-after:always; kann man einen Seitenumbruch erzwingen. Mit avoid verhindert man einen Seitenumbruch.
page-break-after:always; page-break-before:always; page-break-after:avoid; page-break-before:avoid;
Mehr Informationen zum Thema:
- Hintengrundbilder Cascading Style Sheets Hintergrundbilder Der Hintergrund eines Elements kann als Farbe oder als Hintergrundbild festgelegt werden. Mit CSS kann man Hintergrundbilder horizontal oder vertikal repetieren, oder gar einzeln plazieren. Hintergründe...
- CSS einbinden Stylesheets können im Kopf der HTML- Datei definiert werden, als externe Datei verlinkt oder importiert werden. Man kann Styles auch direkt im betreffenden <Tag> angeben. Dies ist allerdings nur für...
- Cascading Style Sheets vererbung Cascade Stylesheet bietet eine weitere wichtige Eigenschaft, die Cascade (stufenförmiger Wasserfall; wasserfallähnliches Feuerwerk; Anordnung von hintereinander geschalteten Bauteilen). Sie beschreibt, in welcher Reihenfolge Style-Angaben überschrieben werden. Die Regeln werden in...