Teil 3: Alternative CSS-Stylesheets
- Alternative CSS-Stylesheets
- Teil 2: Alternative CSS-Stylesheets
- Teil 3: Alternative CSS-Stylesheets
Hoch- und Querformat Das Layout einer Seite ist in den meisten Fällen auf Hochformat optimiert. Lediglich bei sehr breiten Tabellen kann es Sinn machen, das Format zu wechseln, damit Sie auch alle Informationen auf einer Seite darstellen können. Für diese Aktion steht Ihnen in der CSS 2.0 Def...
Hoch- und Querformat
Das Layout einer Seite ist in den meisten Fällen auf Hochformat optimiert. Lediglich bei sehr breiten Tabellen kann es Sinn machen, das Format zu wechseln, damit Sie auch alle Informationen auf einer Seite darstellen können.
Für diese Aktion steht Ihnen in der CSS 2.0 Definition der Befehl size:landscape zur Verfügung, den Sie innerhalb des @page-Bereichs verwenden. Dieser sorgt dafür, dass die so deklarierte Seite im Querformat ausgegeben wird.
Der Befehl fand jedoch bei den Herstellern der Browser - außer Opera - nie wirkliche Unterstützung und wird deshalb ab CSS 2.1 auch nicht mehr unterstützt.
Verlinkungen
Die optimierte HTML-Seite hat - wie Ihnen vielleicht aufgefallen ist - keine Verlinkungen besessen. Das Problem bei diesen Hyperlinks ist die Darstellung innerhalb der Druckausgabe, denn komplett auf diese Informationen möchten Sie, gerade wenn es sich um externe Links handelt, nicht verzichten.
Mit einer einfachen Definition des Anchor-Tags können Sie das Problem elegant umgehen:
a:[href]:after {
content: " <" attr(href) "> ";
font-size: 80%;
color: #555555;
background: #ffffff;
}Mithilfe der after-Pseudoelemente und vorhandener href-Information können Sie nach einem Link eine Inhaltsangabe in eckigen Klammern einfügen, welche Ihnen vom vorhergehenden Link die href-Daten ausgibt. Damit sich der Text von dem normalen Inhalt abhebt, wird er in grauer Schrift und verkleinerter Größe angedruckt.
Visualisierung weiterer Elemente
Die Visualisierung ist jedoch nicht nur auf das Anchor-Tag beschränkt, sondern stellt auch weitere im Quelltext der Seite verborgene Informationen auf Wunsch auf dem Ausdruck dar. In der folgenden Liste haben wir die wichtigsten inklusive ihrer Bedeutung für Sie aufgelistet.
Anchor-Namen: Anchornamen/Sprungmarken, wie top, werden entsprechend auf dem Bildschirm als #top dargestellt.
*[name]:after {
content:" [#"attr(name)"]";
}Objekt-IDs: Der Nachfolger des Objektnamens ab XHTML1.1 erhält die gleiche Darstellung wie sein Vorgänger.
h1[id]:after, p[id]:after {
content:" [#"attr(id)"]";
}Title-Attribut: Haben Sie Elemente mit einem Titel - beispielsweise als Tooltip - versehen, wird dieser zusätzlich ausgegeben.
*[title]:after {
content:" ("attr(title)")";
}Bildbeschreibungen: Informationen aus dem alt-Tag eines Bildes.
img[alt]:after {
content:" ("attr(alt)")";
}Quellen und Zitate
HTML bietet zwei unterschiedliche Formate zur Darstellung von Zitaten: <q>...</q> für kurze Zitate und <blockquote>...</blockquote> für längere Textbereiche. Beiden Tags kann ein Attribut cite zugeordnet werden, das einen Verweis auf die Quelle widerspiegelt, wie beispielsweise
<q cite="Zitat von Oliver Kahn"> Ich
rotiere höchstens, wenn ich Opfer des Rotationsprinzips werde</q>Mithilfe von
*[cite]:after {
content:close-quote" (Quelle:
"attr(cite)")";
}wird die Quellenangabe entsprechend mitgegeben.
Sollten Sie noch gesteigerten Wert darauf legen, dass die Zitate auch mit den korrekten Anführungszeichen ausgegeben werden, benötigen Sie noch ein wenig CSS.
In den Bereich des Druckausgabe-Stylesheets fügen Sie als Erstes die allgemeine Definition für die doppelten und die einfachen Anführungszeichen ein:
* {
quotes: "\201E" "\201C" "\201A"
"\2018";
}Bei den dargestellten Werten handelt es sich jeweils um die entsprechenden Unicode- Zeichen. Legen Sie anschließend fest, dass den Zitaten die öffnenden Zeichen vorangestellt und die schließenden folgen.
q:before, blockquote:before {
content:open-quote;
}
q:after, blockquote:after {
content:close-quote;
}Damit haben Sie eine korrekte Ausgabe - auch beim Druck - erreicht.
IE Workaround
Leider funktioniert der Standard unter Einsatz des after-Pseudoelements nicht im Internet Explorer bis einschließlich Version 7. Einen entsprechenden Workaround inklusive detaillierter Anleitung finden Sie aber im Internet auf der Website von Drunkmonkey in Australien (). Die entwickelte Funktion heißt showHREF() und stellt detailliert das Verhalten des after-Pseudoelements nach.
Weitere Hinweise
Für die Druckausgabe gibt es noch eine Reihe von hilfreichen Seiten, die Sie mit dem dort gesammelten Wissen bei Ihrer Arbeit unterstützen.
Zur richtigen Ermittlung der Schriftarten, die auf den unterschiedlichen Plattformen Windows und Mac von Haus aus zur Verfügung stehen, helfen Ihnen die Seiten von Apple () und Microsoft () weiter.
Einen interessanten Einstieg in die Typographie im Bereich Print finden Sie, falls Sie Ihr Drucklayout noch weiter optimieren möchten, beispielsweise bei screened () oder im Typo Wiki ().
