quotes – Hochkommas und Anführungszeichen mit CSS

Quotes, Hochkommas, Anführungszeichen und Anführungsstriche

Die CSS quotes ist eine Liste von öffnenden und schließenden Anführungszeichen. So können spezielle Anführungszeichen für verschiedene Sprachen oder die Eigenschaft content gewählt werden.

Anführungszeichen sind eine Kunst. Sie schwächen ein boshaftes Wort direkt wieder ab oder zeigen ein ironisches Wortspiel an, damit der Leser die Ironie auch wirklich erkennt. Sie sind aber auch die Marker für wörtliche Rede und für Zitate.

Quotes

Mit der Eigenschaft quotes lassen sich z.B. die Klammern für Skript-generierte Inhalte dynamisch einsetzen, oder typografische deutsche (»«) und schweizer («») Anführungszeichen je nach Ursprungsland anzeigen.

<style>
blockquote p { quotes: "»" "«"; }
</style>
…
<blockquote>
   <p>Ein Kamel ist ein Pferd, 
      das von einem Ausschuss entworfen wurde.</p>
</blockquote>

Jedes Anführungszeichen hinter quotes: muss in öffnende und schließende Hochkommas (doppelte oder einfache) gesetzt werden und darf keine Leerzeichen enthalten. Wenn Leerzeichen enthalten sind, werden sie ebenfalls dargestellt.

Ein Kamel ist ein Pferd, das von einem Ausschuss entworfen wurde.

Anführungszeichen je nach Angabe der Sprache im HTML-Tag

<html lang="de"> oder <html lang="ch"> ?
html[lang="de-DE"] q{ quotes: '»' '«'}
html[lang="ch-CH"] q{ quotes: '«' '»'}

CSS open-quotes • close-quotes • no-open-quotes • no-close-quotes

CSS quotes kann Hochkommas mit open-quote und close-quote zudem vom restlichten Text abheben, z.B. durch eine andere Farbe, Schrift oder Schriftgröße.

.blockquote p:before { 
   content: open-quote;
   color: darkorange;
   font: 1.5em/150% Georgia, serif
}

.blockquote p:after { 
   content: close-quote;
   color: green;
   font: 1.5em/150% Georgia, serif
}

no-open-quotes und no-close-quotes unterdrücken die Ausgabe von Anführungszeiten, sie zählen aber die Verschachtelung weiter.

Verschachtelte Anführungszeichen / Hochkommas

Wenn Hochkommas durch HTML <q> ineinander verschachtelt werden (z.B. für ein Zitat innerhalb wörtlicher Rede), legt CSS quotes die Darstellung der paarweise öffnenden und schließenden Hochkommas fest.

CSS quotes listet die Hochkommas paarweise: Die beiden ersten Zeichen umschließen den Text, die nächsten zwei Zeichen gelten q-Tags, die innerhalb von q-Tags liegen. Keine Kommas dazwischen, sondern Leerzeichen!

                   +--- äußeres öffnendes Anführungszeichen
                   |   +--- äußeres schließendes Anführungszeichen
                   |   |
      q { quotes: "„" "“" "‚" "‘" }
                           |   |
inneres Hochkomma unten ---+   |
     inneres Hochkomma oben ---+
Dies sind öffnende und dies sind schließende Anführungszeichen

quotes für escape quotes

In Scripts oder Programmen und bei regulären Ausdrücken können derart viele öffnende und schließende Hochkomma-Paare vorkommen, dass einfache und doppelte Hochkommas nicht reichen – dann muss die dritte Ebene »escaped« werden.

q.script { quotes: '"' '"' "'" "'" '/"' '/"'}
<a href=# onclick=DoEdit(Preliminary Assessment Mini); return false;>edit</a>

Quelle Javascript escape quotes auf Stackoverflow

Einfach Anführungszeichen

Unsere Tastaturen haben keine klassischen doppelten Anführungszeichen „ “ auf Lager. Nur den vorausschauenden Textverarbeitungsprogrammen verdanken wir, dass sie sich in die heutige Zeit gerettet haben.

In den Editoren der Content Management Systeme gab es lange Zeit nur Hochkommas aus der Schatzkiste der Programmierer. Wer Wert auf echte kernige Anführungszeichen legt, muss Klavier auf seiner Tastatur spielen. Ab Version 4.2.3 liefert die Übersetzungsdatei bei deutscher Spracheinstellung saubere typografische Anführungszeichen und Hochkommas.

öffnende Anführungszeichen
unten
&bdquo; (U+201E)
⌥ + ^
Alt + 0132
schließende Anführungszeichen
oben
&ldquo; (U+201C)
⌥ + 2
Alt + 0147
einfaches öffnendes Hochkomma
unten
&sbquo; (U+201A)
⌥ + S
Alt + 0130
einfaches schließendes Hochkomma
oben
&rsquo; (U+2018)
⌥ + #
Alt + 0145

Unten sollen deutsche Anführungszeichen übrigens unten wie eine 99 aussehen, oben wie eine 66. Jedenfalls so ähnlich, denn viele Schriften halten die Anführungszeichen sehr gerade.

HTML hat ein eigenes Tag für Hochkommas: <q>. Etwas CSS dazu, dann bringt es typographische Anführungszeichen je nach Ursprungsland.

Und was ist mit dem Apostroph? Läßt man in den meisten Fällen am besten weg. In 66% aller Fälle ist es sowieso nicht anbracht und in 33% aller Fälle ist es einfach falsch. Bleiben die Sprachen, in denen ein Apostroph gebraucht wird: No, we can’t.