Print Stylesheets

Ein Print Style ist ein gewöhnlicher CSS Stylesheet, der eine Webseite für den Ausdruck formatieren soll. Eingebunden in der HTML-Datei wird ein solcher Stylesheet mit dem Befehl


<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Damit das funktioniert, muss der "normale" Stylesheet dann auch das Attribut media="screen" bekommen, also


<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />

Sind die zwei Stylesheets auf diese Weise eingebunden, kann jeder Standardkonforme Browser erkennen, daß der eine Stylesheet nur für die Anzeige auf einem Endgerät gedacht ist, und der andere Stylesheet für den Ausdruck bzw die Druckvorschau.

Neben den Textformatierungen, die man ändern sollte (eine schöne Druckschriftart, angepasste Größen für Überschriften, und Absätze und Einzüge), lassen sich auch hervorragend überflüssige Block-Elemente ausblenden. Ihr könnt in einem Print-Stylesheet mit dem kleinen Befehl display: none; ganz einfach alle Header, Werbebanner, Menus, einfach alles, was in einem Ausdruck nur stören würde, ausblenden.

Ein Beispiel könnt ihr euch ansehen, wenn ihr einfach die Druckvorschau für diese Seite hier aufruft... der Header, die Widgets, die Menupunkte, usw sind ausgeblendet und übrig bleibt ein sauber formatierter Text.

Hier ein Beispiel wie ein solcher Print Stylesheet aussehen könnte:

body {
  margin: 0;
  padding: 0;
  font: 12pt Garamond, Palatino, "Times New
  Roman", Times, serif;
  color: black;
  background: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lucida Grande", "Lucida Sans",   
  "Lucida Sans Unicode", "Lucida", Verdana,
  "Bitstream Vera Sans", sans-serif;
  font-weight: bold;
  margin: .75em 0 .5em 0;
  page-break-after: avoid;
}

p {
  margin: 0 0 1em 0;
}

div.menu {
  display: none;
}

div.header {
  display: none;
}

div.footer {
  display: none;
}

Aber das ist natürlich noch nicht alles... Ein großes Problem bei Internet Printouts ist, daß die Links nicht vernünftig angezeigt werden... In einem HTML-Dokument sieht man natürlich nur den Linktitel und kann darauf klicken um die neue Seite aufzurufen. Bei einem Ausdruck fehlt diese Funktion natürlich. Trotzdem sieht man nur den Linktitel und muss also erst wieder die Seite besuchen, um dem Link folgen zu können. Mit dieser kleinen Angabe, könnt ihr in einem standardkonformen Browser erreichen, daß das Link-Ziel hinter dem Link angegeben wird. Und zwar nur bei Ausdruck:


a:link:after, a:link:visited:after {
  content: " (Link auf <" attr(href) ">) ";
  font-size: 76%;
  color: #999;
  background: transparent;
}

a[href^="/"]:link:after {
  content: " (Link auf <http://www.allvintage.net
  " attr(href) ">) ";
}

Die URL eurer Homepage müsst ihr natürlich noch anpassen.

Mit einem derart formatierten Schriftbild, werdet ihr jedem Besucher eurer Seite einen riesen Gefallen tun, und ihr könnt für den Bildschirm designen, wir ihr Lust habt und ohne auf Druckkompatibilität zu achten, da beim Ausdruck sowieso alles neuformatiert wird.