Teil 2: Alternative CSS-Stylesheets
- Alternative CSS-Stylesheets
- Teil 2: Alternative CSS-Stylesheets
- Teil 3: Alternative CSS-Stylesheets
Für das Löschen aller Zuweisungen definieren Sie unter dem Medientyp print einfach die minimalen Formatierungsanweisungen im Body-Bereich zu. Dies sind die Hintergrundfarbe, der Innenabstand und die Standard- Schriftart....
Für das Löschen aller Zuweisungen definieren Sie unter dem Medientyp print einfach die minimalen Formatierungsanweisungen im Body-Bereich zu. Dies sind die Hintergrundfarbe, der Innenabstand und die Standard- Schriftart.
<style type="text/css" media="print">
body {
background: #FFFFFF;
padding: 0 20px;
font: 12pt/18pt "Times New
Roman", Times, serif;}</style>Der Hintergrund wird für die Druckausgabe auf die Farbe Weiß gesetzt, als Innenabstand werden nach oben 0 Pixel sowie nach links und recht jeweils 20 Pixel definiert.
Die Schriftgröße soll 12 Punkte betragen - mit einem Zeilenabstand von 18 Punkten - und als Schriftart soll präferiert Times New Roman, ansonsten Times und wenn auch diese nicht installiert ist, eine Schrift mit Serifen verwendet werden.
Bilder-Update
Wie Sie in der Vorschau bereits gesehen haben, erscheint das Logo in Farbe. Für den Ausdruck möchten Sie sicherlich nicht auf das Logo oder gegebenenfalls ein Bild, das an dieser Stelle steht, verzichten, es reicht in den meisten Fällen jedoch auch eine Schwarz-Weiß-Version als Alternative.
Die Darstellung des farbigen Bildes erfolgt auf der normalen Seite über den folgenden DIV-Tag:
<div class="logo_box"><a href="#"><img src="pic1.png" alt=
"Logo" width="150" height="52" /></a></div>An dieser Stelle wird das Bild geladen und die Höhe und Breite zugewiesen. Für das Bild mit den Graustufen wird ein ähnlicher Tag angelegt, jedoch mit einer eigenständigen Klasse verbunden:
<div class="logo_print"><a href="#"><img src="pic1_sw.png"
alt="Logo" width="150" height="52" /></a></div>Die Aussteuerung der Anzeige übernehmen Sie in den jeweiligen Bereichen der Stylesheet- Definition. Innerhalb der Bildschirmanzeige weisen Sie der Klasse logo_print das Attribut display: none; zu und für die Druckausgabe soll die Klasse logo_box nicht zur Anzeige kommen.
Die Klasse logo_print ist sehr einfach aufgebaut und sorgt lediglich dafür, dass genügend Abstand zwischen Logo und Text vorhanden ist.
.logo_print {
padding: 2em 0 3em;
}Falls Sie sich wundern, weshalb das Logo noch einen blauen Rahmen besitzt: dieser stammt aus der Verlinkung der Grafik und wurde innerhalb der Bildschirmausgabe über das Stylesheet
a img {
border: 0;
}entfernt. Kopieren Sie diese Einstellungen und zusätzlich auch noch die Definitionen für die ID inhalt in den allgemeinen Teil und der blaue Rahmen ist verschwunden.
Feinarbeit
Die Inhalte des Texts werden bereits ordentlich dargestellt und könnten in dieser Form auch ausgedruckt werden. Gerade die Überschriften und der Abstand zwischen den einzelnen Absätzen lassen jedoch noch deutlich zu wünschen übrig. An dieser Stelle sollten Sie noch einmal Ihre Style-sheets optimieren.
Wenn Sie sich die Definitionen der Überschriften h1 und h2 betrachten, sehen Sie gewisse Widersprüche zu den zuvor getroffenen Annahmen für die Druckausgabe. Es soll sich um eine Schriftart mit Serifen handeln und bei der Farbwahl beschränkt sich die Auswahl auf Schwarz und Weiß.
Unter diesen Voraussetzungen sehen dann die Definitionen für die beiden Überschriften im Bereich print folgendermaßen aus:
h1 {
font-size: 18pt;
margin-bottom: 10pt;
}
h2 {
font-size: 14pt;
margin-top: 21pt;
margin-bottom: 4pt;
}Auf direkte Zuweisungen von Schriftarten wurde verzichtet, da diese direkt aus der Definition des body-Bereichs gezogen werden. Mit den Innenabständen wird dafür gesorgt, dass nach oben und unten ausreichend Platz vorhanden ist. Bei der Druckausgabe wird anstelle der Maßeinheit Pixel auf Punkte zurückgegriffen, da dies für die Interpretation der Drucker genauer ist.
Manuelle Seitenumbrüche
Damit ist die Optimierung der Druckausgabe für unser Beispiel abgeschlossen. Im Bereich der Aufbereitung gibt es jedoch noch eine Reihe weiterer hilfreicher Tricks, die Sie beachten sollten.
Die Formatierungen der Texte sind wieder zur Zufriedenheit hergestellt, lediglich der Umbruch der Seite ist noch nicht optimal gelöst. Dieser wird mitten in einem Abschnitt durchgeführt, was sowohl optisch als auch inhaltlich unschön erscheint.
CSS erlaubt Ihnen jedoch, mithilfe zweier page-break-Befehle selbst zu entscheiden, an welcher Stelle ein Seitenumbruch durchgeführt werden soll.
Die beiden Befehle zum manuellen Umbruch einer Seite lauten page-break-before und page-break-after. Die Eigenschaften der beiden Befehle unterscheiden sich nur in dem Umstand, dass es sich einmal um den Umbruch vor und einmal nach der angegebenen Textstelle handelt.
• always: Der Seitenumbruch wird immer vor / nach dem Element durchgeführt. • avoid: Der Seitenumbruch wird nie vor / nach dem Element durchgeführt. • left: Wird eine Klassifikation nach linken und rechten Seiten eingesetzt, so wird ein Umbruch eingeführt und es geht auf der nächsten linken Seite weiter. • right: Wie left, nur geht es in diesem Fall auf der nächsten rechten Seite weiter.inherit: Es findet eine Vererbung vom übergeordneten Element statt. • auto: Bei der Normaleinstellung wird kein expliziter Seitenumbruch gesetzt und durchgeführt.
Im aktuellen Beispiel soll vor der dritten H2-Überschrift ein Seitenumbruch eingeführt werden. Dazu wird der Überschrift die Klasse break_before zugewiesen.
<h2 class="break_before">headline</h2>Die Definition der Klasse erfolgt nur für die Stylesheets der Druckausgabe, da Sie ja auf dem Bildschirm für diese Stelle keinen Seitenumbruch planen.
.break_before {
page-break-before: always;
}Wenn Sie einen weiteren Seitenumbruch an späterer Stelle benötigen, müssen Sie lediglich dem HTML-Element die Klasse break-before zuweisen.
