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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…