Zitate hervorheben

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Durch die Verwendung großer und fett gedruckter Anführungszeichen soll ein Zitat hervorgehoben werden, wie in folgender Abbildung gezeigt.

Abbildung: Das Zitat mit Stildefinitionen.

Lösung

Versehen Sie das Zitat als Erstes mit dem korrekten Markup-Code (siehe nächste Abbildung):

Abbildung: Das Zitat in der Standarddarstellung.

Dann definieren Sie die nötigen CSS-Regeln für die Darstellung des Zitats:

Schließlich verwenden Sie die Pseudoelemente :before und :after, um die Anführungszeichen und einen Gedankenstrich von einem em Breite vor dem Namen der zitierten Quelle einzufügen:

Diskussion

Anhand von Pseudoelementen sind Browser in der Lage, Stile auf Teile einer Webseite anzuwenden, die mit standardmäßigem HTML nicht erreicht werden können. So können Sie über Pseudoelemente beispielsweise die erste Zeile eines Absatzes ansprechen oder – wie in diesem Rezept – automatisch erzeugte Inhalte vor und nach einem bestimmten Element einfügen.

In dieser Lösung umgeben wir das Zitat mit typografischen (runden) Anführungszeichen. Das linke Anführungszeichen wird beispielsweise folgendermaßen deklariert:

Sollen über die Eigenschaft content erzeugte Inhalte in das Dokument eingefügt werden, müssen diese mit einfachen oder doppelten Anführungszeichen umgeben werden. Wenn wir einfache Anführungszeichen für das Zitat benutzen wollten, hätten wir auch schreiben können:

Für "normale" doppelte Anführungszeichen sähe die Regel dagegen so aus (aus Gründen der Lesbarkeit haben wir vor und nach dem einzufügenden Zeichen jeweils ein Leerzeichen eingefügt):

Da die für dieses Rezept verwendeten runden Anführungszeichen aber nicht Teil des ASCII-Standardzeichensatzes sind, verwenden wir hier die hexadezimale Entsprechung, um Missverständnisse der Browser zu vermeiden.

Da alles, was zwischen den Anführungszeichen steht, automatisch erzeugt wird, müssen wir den hexadezimalen Wert mit einem Backslash schützen.

Eine weitere Möglichkeit, Anführungszeichen einzufügen, besteht darin, der Eigenschaft content das Schlüsselwort open-quote beziehungsweise close-quote als Wert mitzugeben:

Bitte beachten Sie, dass die Schlüsselwörter open-quote und close-quote gegenwärtig nur von Mozilla und Opera unterstützt werden. Außerdem werden vom Internet Explorer für Windows und Macintosh die Pseudoelemente :before und :after nicht unterstützt.

Siehe auch

Das Rezept Nach einem Link den URI anzeigen zum Einfügen von URLs in Ausdrucke von Webseiten mit Hilfe von Pseudoelementen und die CSS2-Spezifikation zum Thema Anführungszeichen und erzeugte Inhalte.