11. Februar 2010
Für Internetausdrucker
Natürlich werden Webseiten auch mal ausgedruckt. Nicht selten erlebt man dabei einige Überraschungen. Navigationen, Suchfelder und Banner haben auf einem Ausdruck nicht viel verloren. Eine dem Medium angepasste Typographie, klare Gliederung der Inhalte werden auch auf Papier geschätzt. Das alles kann ein spezielles Stylesheet für den print – Bereich erreichen. Der Link dazu wird in den Header der Webseite eingebunden.
<link rel="stylesheet" type="text/css" media="print" href="http://DeineWebseite/print.css" />
Die print.css Datei erhält nun die Informationen der Anzeigebreite (100%), floating wird deaktiviert und auch die Typographie wird Seitenweit optimiert. im Printbereich wird die Schriftgrösse in Punkte angegeben (pt).
body {
font-family: Garamond,"Times New Roman", serif;
color: #000;
background: none;
font-size: 12pt;
background:none;
color:#000;
width:100%;
float:none;
margin:0;
}
Alle Elemente die nicht ausgedruckt werden, können mit dem Befehl “display:none” ausgeblendet werden.
#header,#menu,#navigation,#Sidebar,#footer{
display:none;
Im Web nutzen wir ja schon lange “sprechende Links”. Hier benötigen wir aber “schreibende links”. Mit wenigen Code – Zeilen sorgen wir dafür dass die URL’s der Links mit ausgedruckt werden (Geht im IE nicht).
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
a[href^="http://"] {
color:#000;
}
Danach sollten noch die Linkfarben (Kontrast) verändert werden. Natürlich kann man auch noch Überschriften Code, Zitate und weiteres aufhübschen.
a:link,a:visited {
color:#520;
background:transparent;
font-weight:700;
text-decoration:underline;
}
code {
font:10pt Courier, monospace;
}
blockquote {
font-size:10pt;
margin:1.3em;
padding:1em;
}
h1,h2,h3,h4,h5,h6 {
font-family:Helvetica, Arial, sans-serif;
}
h1 {
font-size:16pt;
}
h2 {
font-size:15pt;
}
Dieses css Script kann man sich auch im Stück runterladen. Weitere Informationen um Thema Print Stylesheet gibt es bei Selfhtml oder Chris Coyier. Wie das mit den manuellen Seitenumbrüchen geht sagt uns David Walsh.