Stylesheets für den Druck

Kleiner Browsertest: Welcher Browser kann schon drucken?

Aber dies ist nur eine der Fragestellungen rund um den Druck. Bevor Sie Stylesheets für den Druck einfügen, testen Sie in den relevanten Browsern, ob die Stile für den Druck korrekt interpretiert, – insbesondere aber korrekt ignoriert werden, wenn der Drucker die @page-Regel nicht unterstützt.

Die folgenden Stile können lokal in einem <style>-Tag oder global in einer Stylesheetdatei angelegt werden:

@media screen
{ 
  p {font-family: verdana,sans-serif; font:14px/150%; color: darkgray}
}
@media print
{ 
  p { font: 14px/130% georgia, times, serif; 
      color:black; 
      margin: 0px 0px; 
      text-align: justify}
  hr { page-break-after: always }
  hr:before { content: "Ende Kapitel " counter(kapitel) " "; 
  /* Bei jedem Seitenumbruch eins nach oben zählen */
  counter-increment: kapitel; }
}
@media screen,print
{ 
  h1 {color: darkgray; font: 15px/200% helvetica; margin-bottom: 3em}
 }
 @page { size: 14cm 14cm; marks: crops; orphans: 4; widows: 4 }
 @page:first { margin-top: 6cm; margin-left: 1cm; margin-right: 4cm }
 @page:left { margin-top: 1cm; margin-right: 1cm; margin-left: 4cm }
 @page:right { margin-top: 1cm; margin-left: 1cm; margin-right: 4cm }

Die Datei drucken.html ist bereits entsprechend ausgestattet. Sie stellt einen Text auf dem Monitor in anderen Schriften dar und soll am Ende jedes Kapitels einen Seitenumbruch einfügen. Wenn der Browser Stile für dynamisch generierte Inhalte unterstützt, werden die Kapitel am Ende durchnummeriert.

Zurzeit hebt sich bei diesem Druckertest nur ein Browser vom Feld ab: Opera beherrscht mit Abstand das Thema Drucken am besten.

Wenn das Stylesheet für den Druck die Monitordarstellung gefährdet ...

Zu einem Problem werden Regeln und Stile für den Druck, wenn sie vom Browser nicht als solche erkannt werden und die Darstellung auf dem Monitor verfälschen. Eine kleine Tabelle gibt Auskunft darüber, welche Browser durch Regeln für den Druck die Bildschirmdarstellung nicht mehr korrekt rendern.

Begleitmaterial zu den Beispielen

aus Kapitel 6 und das iframe-Beispiel aus Kapitel 7.7

Vorab: Stylesheets in Macromedia Dreamweaver anlegen

Beispiel 6.1: Stile für Schriftgestaltung

Beispiel 6.3: Ein einfaches CSS-Layout

Beispiel 6.4: Einfach nur Stylesheets

Zu Kapitel 7.7:
Der kleine Bruder des Framesets: iframes

Drucken mit Stylesheets Regeln für den Druck und Beispieldatei