Printlayout mit CSS

Viktor Dite, Autor des Beitrags

Von - Publiziert in Webdevelopment Blog über MySQL & PHP
Dipl. Informatiker und Tech-Blogger seit 2006.


„Mittlerweile gehört ist es bei informativen Webseiten und Portalen Usus, separate Ansichten von einzelnen Seiten anzubieten, um auch beim Drucken ein ansprechendes Layout zur Verfügung zu stellen. Solche Druckansichten erhöhen den Service für den Besucher, der sich sonst umständliches Drucken in verschiedenen Ansichten erspart und z.B. Elemente, die gar nicht notwendig sind, mit ausdruckt.“ [via]

CSS bietet die Möglichkeit, für verschiedene Medientypen unterschiedliche Layouts festzulegen.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Enthält das allgemeingültige Stylesheet Definitionen, die auf einem Ausdruck störend wären, müssen diese im Druck-Stylesheet „print.css“ explizit überschrieben werden.

Anzeige von Links und deren Inhalten

Nehmen wir an, im Quellcode der Webseite wurde u.a. ein Hyperlink angegeben:

Wenn die Webseite ohne weiteres Zutun ausgedruckt wird, würde nur der Text „Link zu HTMLWorld“ angezeigt. Sollte der Leser des Drucks die dazugehörige Internetadresse nicht kennen, macht diese Information nicht viel Sinn.
Eine Abhilfe schafft hier die CSS-Eigenschaft content. Damit kann allgemein vor oder nach bereits bestehenden Inhalten weitere Elemente/weiterer Inhalt eingefügt werden. Ein Beispiel dafür ist das Ziel des Hyperlinks, was dadurch im Ausdruck mit angezeigt wird.
Es ist am sinnvollsten, das Ziel des Hyperlinks direkt nach dem eigentlichen Linktext mit anzuzeigen. Beispiel:

a:link:after { content: " (Link auf <" attr(href) ">) "; }

[via]


Letzte Änderung: