Kaptel 14: Nicht-Bildschirm-Ausgaben
Insgesamt gibt es die Mediatypen:
all: Alle Medien
aural: Audio-Wiedergabe (Screen Readers, Synthesizer)
braille: Blinden-Lesegerät
embossed: Blinden-Drucker
handheld: Handys, Digital Assistent
print: Printausgabe
projection: Digitaler Projektor
screen: Bidschirm
tty: Teletype Printer
tv: Fernsehen
Die meisten dieser Ausgabetypen werden von den gängigen Browsern nicht unterstützt.
Gängige Typen sind: all, screen und print. Opera unterstützt handheld und projection.
Die Media spezifische Ausgabe von Stylesheets ist in CSS auf zwei verschiedene Arten möglich:
Eingebunden:
<link rel ="stylesheet" type="text/css" media="print" href="article_print.css">
Als Seitenstile:
<style type="text/css" media:="projection">
Mit @Import:
@import url(visual.css) screen, projection
@import url(print.css) print
Wenn keine Media-Angabe gemacht wird, so gilt das CSS für alle Mediatypen.
Bei unterschiedlichen Stylesheets, müssen sie für jeden Mediatyp einzeln eingebunden werden.
In seitenbezogenen Stylesheets kann der Media-Type direkt als Block eingesetzt werden:
<style type="text/css">
body{background: white;color:black}
@media screen{
body{xyz; }
h1{xyz}
}
@media print{
body{yxz}
}
</style>
Seitenbezogene Ausgabetypen
Dies betrifft alle Ausgabentypen, die seitenbezogen erfolgen (Druckausgaben und Projektionen mit Slides). Screenausgaben erfolgen demgegenüner kontinuierlich (scrollable)
Druckausgabe
Die Differenzen zwischen Screen und Printausgaben betreffen vor allem die Schriftgestaltung und der Einbezug von Hintergründen.
Print Stile benutzen eher: Serifenschriften statt gerade Schriften, typografische, absolute Schriftgrössen wie pt, pica, inches, cm anstatt relative wie ex, em, Prozente oder Pixel (px).
Schwarze Schrift auf weissem Hintergrund wird für die Druckausgabe vorgezogen (und schont die Tintenpatronen).
Beispiel: *{color:black !important; background:white !important}
Es wird erst ab CSS3 möglich sein, bestimmte Druckgeräte (Farbe) zu adressieren.
Spalten und unnötige Seitenelemente werden mit display: none unsichtbar gemacht oder ungefloatet präsentiert.
Definition der Seitengrösse (size)(in CSS 2.1.nicht mehr enthalten)
Das Page-Box-Model kennt einen Papierrand, eine Page-Box umfasst den Randabstand und einen eigentlichen Seitenbereich.
Seit CSS 2.1. ist es nur noch möglich, die margins zu definieren.
Die Seitenbezogenheit wird mit @page{diverse Angaben} definiert.
Size wurde jedoch in den Browsern nicht umgesetzt und entfällt. In der Page-Box werden relative Grössenwerte wie em und ex, die einen Bezug zur Schriftgrösse haben, nicht interpretiert.
Diese Eigenschaft dient einzig dazu, den Elementen bestimmte allgemeine Site-Eigenschaften zuzuordnen
Diese Seiteeigenschaften sind:
:first:Die erste Seite einer Druckausgabe
:left :Die linke Seite der Druckausgabe
:right:Die rechte Seite.der Druckausgabe
Beispiel: @page {margin:3cm} für die normale Seitenausgabe
@page :first {margin-top:6cm} für den Rand der ersten Seite der Druckausgabe
Seitenumbrüche (page-breaking)
Page-break lässt Angaben zu, wann eine Seite umbrochen oder nicht umbrochen werden soll.
'auto'-wert: Der Page-break wird vom Browser bestimmt.
Beispiel: always
h1 {page-break-after: always} Nach jedem h1-Tag erfolgt ein Seitenumbruch
h2 {page-break-before: always} Vor jeden h2-Tag erfolgt ein Seitenumbruch
h2 {page-break-before: left} //h2 wird immer für die linke Seite umgebrochen, d.h. erscheint nur auf linken Seiten.
h3 {page-break-after: avoid //Hält h3 Elemente und ihren Text möglichst zusammen.
Verhinderung von Seitenumbrüchen in bestimmten Elementen (page-break-inside)
Damit ist es möglich, die Umbrechung der Seite innerhalb bestimmter Elemente zu unterbinden. Das ist jedoch mehr ein Wunsch als eine Tatsache.
Beispiel: div#neben {page-break-inside: avoid} Im Div-Element der CSS-Klasse "neben" sollen page-breaks wenn möglich nicht stattfinden.
'Hurenkinder' und 'Schusterjungen' (orphans, widows)
Gibt die minimale Anzahl von Zeilen eines Blockelementes in denen kein Zeilenumbruch erfolgen soll. (Verhindert, dass nur eine Restzeile eines Absatzes auf die neue Seite kommt).
Beispiel: p {widows : 4} Wenn weniger als vier Zeilen auf der neuen Seite übrigbleiben, wird das gesamte Element, aus welcher der Zeilenblock besteht, auf die neue Seite verlagert.
Best practices für Seitenumbrüche
Mache sowenig künstliche Seitenumbrüche wie möglich.
Versuche allen Seiten, die nicht künstlich umbrochen werden, eine möglichst gleiche Seitenlänge zu geben.
Verhindere Line-Breakings in Tabellen und umrandeten Blöcken.
Vermeide Zeilenumbrüche in float-Elementen.
Sich wiederholende Seitenelemente
Running heads, welche auf jeder Seite an einer bestimmten Stelle erscheinen sollen, werden gemäss folgender Notation erstellt:
Beispiel: div#runhead {position:fixed;top:0 right:0} Dies wird auf jeder Seite ganz oben wiederholt, wenn ein paged Medium angegeben wird. Das Element darf allerdings nur einmal vorkommen. (Die position:fixed wird von MSIE 6 nicht unterstützt.)
Projektions Stile
Slide-Shows werden bisher nur von Opera unterstützt.
Sprachausgaben (aural Style)
Die Sprachausgabe mit Styleheets wird bisher in keinem Browser unterstützt.
Weiter zu Anhang: Attribut-Referenz (Propertys)