Eigene Druckvorschau erstellen

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 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.

Alternative Stylesheets

© Archiv

Das Logo lässt sich mit wenigen Zeilen Code gegen eine Schwarz-Weiß-Variante austauschen.

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.

Alternative Stylesheets

© Archiv

Informationen über die installierten Schriften innerhalb der einzelnen Windows-Betriebs-systeme finden Sie auf der Microsoft-Website.

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 ().

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".