Blockquotes in CSS
Blockquotes kann man mit CSS auf verschiedene Arten stylen. Dazu gibt es eine Reihe von Tips im Web. Wie aber bekommt man sprachabhängig einfach nur die typographisch korrekten Anführungsstriche an den Anfang und das Ende des Blockes? Auch hier hilft das Beispiel in der CSS-TR nicht viel weiter.
Die einfache Lösung findet sich in den CSS dieses Weblogs:
blockquote {font-style: italic;}
blockquote p {display: inline;}
blockquote:before {content: "\201E";}
blockquote:after {content: "\201C";}
Nachteil diese Lösung ist, daß sie nur mit einzelnen Absätzen funktioniert. Werden mehrere Absätze in einem Blockquote zusammengefaßt, so geht die Absatzformatierung verloren.
Für die Debian-Homepage habe ich eine bessere Lösung gefunden:
blockquote p:first-child:before {content:"\201E";}
blockquote.quote p:after {content: ""; }
blockquote.quote p.last:after {content: "\201C";}
Dabei muß der letzte Absatz des Zitates mit der Klasse "last" versehen werden. Diese läßt die schießenden Anführungstriche genau am Ende des letzen Absatzes erscheinen. Für die anderen Absätze werden die schließenden Anführungsstriche explizit unterdrückt.
Mit den IE7-Scripts von Dean Edwards funktioniert das dann auch im IE.
Zitate, CSS und IE
Auf meiner normalen Homepage Witch habe ich eine Reihe von CSS-Tests gesammelt, unter anderem eine Lösung für das Styling von Q-Tags für Zitate.
Wer sich die Seite mit dem Internet-Explorer ansieht, wird aber keine Anführungstriche sehen, nicht einmal einfache ungestylte. Ursache: IE versteht offenbar das Q-Tag überhaupt nicht. Jegliche Versuche, typographische Anführungsstriche bleiben zudem wegen eines bekannten Selektor-Bugs im IE aussichtslose Unterfangen.
Dean Edwards hat für IE einen Satz von Skripten namens IE7 entwickelt, die das Problem über Javascript lösen. Die Skripte können in die Seiten über "Contitional Comments" eingebunden werden und werden dann nur vom IE geladen. Das Ergebnis für die oben angegebene Seite kann man auf der zweiten Zitat-Seite begutachten.
Die Styles für die Q-Tags befinden sich übrigens direkt in den Seiten und sind mit diversen Browsern unter Linux und OS X getestet. Das dürfte vielleicht für diejenigen interessant sein, die festgestellt haben, daß sowohl der Vorschlag in der CSS-TR als auch viele Tips auf diversen CSS-Webseiten nicht mit allen Browsern funktionieren.