Sonderzeichen vor Links einfügen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Vor Links soll beim Ausdrucken eines Dokuments ein Sonderzeichen, z.B. », eingefügt werden.

Lösung

Wie bereits im Rezept Nach einem Link den URI anzeigen gezeigt wurde, verwenden Sie im Stylesheet für die Druckausgabe das Pseudoelement :after, um den URI nach dem tatsächlichen Link einzufügen:

p a:after {
 content: attr(href) ;
}

Dieses Konzept erweitern wir hier, um vor dem URI das Sonderzeichen darzustellen:

p a:before {
 text-decoration: underline;
 content: " \00BB " attr(href);
}

In der Druckausgabe wird der Link nun folgendermaßen dargestellt:

Linkdarstellung in Druckausgabe

Diskussion

Vergessen Sie nicht, dem hexadezimalen Wert einen Backslash (\) voranzustellen. Damit das Zeichen im Browser nicht als einfacher Text angezeigt wird, müssen Sie ihm einen Backslash (\) voranstellen. Der korrekte Wert für » lautet "00BB". Ohne den Backslash sähe die Darstellung so aus:

Falsche Linkdarstellung

Aufgrund der CSS-Syntax können Sie für die Eigenschaft content keine HTML-Entities (hier: » bzw. ») verwenden. Stattdessen wird der hexadezimale Wert des entsprechenden Unicode-Zeichens mit einem vorangestellten Backslash benutzt.

Diese Sonderzeichen können natürlich nicht nur für die Druckausgabe, sondern für alle Medientypen verwendet werden. Probieren Sie das ruhig einmal in Ihrer Webseite. Damit die Ausgabe auch im Browser dargestellt wird, muss der Medientyp all oder screen lauten.

Momentan werden durch Pseudoelemente erzeugte Inhalte nur von Firefox, Netscape 6+, Safari und bedingt auch von Opera unterstützt. Im Internet Explorer funktioniert diese Technik leider nicht.

Siehe auch

Weitere Erläuterungen zu Sonderzeichen in CSS.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln