CSS / HTML
Richtige Anführungszeichen setzen
(msc) Das Internet ist typografische Steinzeit. Kaum ein Webdesigner, der auf Details wie korrekte Anführungszeichen achtet. Dabei wäre es doch so einfach – niemand müsste sich den Tastaturcode für Guillemets oder den HTML-Namen merken (« steht für «, » für »). HTML kennt nämlich das Element q. Es steht für «Quote» und wird vom Browser mit Anführungszeichen umschlossen. Die folgende Anweisung im Stylesheet führt dazu, dass Zitate automatisch mit den richtigen Anführungszeichen gesetzt werden.
q {Quotes: «\00AB» «\00BB»;}
q:before { content:open-quote; }
q:after { content:close-quote; }
\00AB und 00BB repräsentieren das öffnende und das schliessende Guillemet, jeweils als Unicode-Angabe.
Nun werden Anführungszeichen automatisch richtig codiert. Die folgende Zeile <p>Hans sagt <q>Hallo</q> erscheint im Browser wie folgt:
![[Aus technischen Gründen, d.h. weil im Stylesheet nicht zwei unterschiedliche Deklarationen für die Quotes erfolgen können, erscheint dieses Beispiel hier als Grafikl.]](https://archiv.matthiasschuessler.ch/wp-content/uploads/fk/2005/pix/Hans-sagt-Hallo.gif){kind=small}
Im Stylesheet kann man als Quotes auch Bilder zuordnen, die dann als an- und abführendes Zitatesymbol verwendet werden. Die Bilder werden wie üblich über ein URL-Statement zugewiesen:
q:before{content:url(quoteopen.gif);}
q:after{content:url(quoteclose.gif);}
Wie es aussieht, hängt von der grafischen Gestaltung der Anführungszeichen ab. Als Beispiel eine Variante mit klotzigen Anführungszeichen:
Hans sagt Hallo
Besonders gut eignet sich ein Stylesheet mit individuellen Anführungszeichen für eine Zitate-Seite. Auf dieser kann man nebst dem Quote-Tag auch blockquote verwenden. Dieses Tag setzt einen Textblock vom Rest des Dokuments ab und rückt das Zitat links und rechts um einige Pixel ein.
Die Darstellung ist übrigens nur in einem Nicht-Microsoft-Browser korrekt.