CSS quotes: Hochkomma oder Anführungszeichen?
Hochkommas und Anführungszeichen sind eine Kunst. Anführungszeichen 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.
In der Literatur, in Briefen, für Zitaten und wörtliche Rede werden Anführungszeichen verwendet – Paare von öffnenden und schließenden Hochkommas: Wie Dürrenmatt schon sagt „Ergreife die Feder müde“ …. Programmiersprachen und auch HTML hingegen nutzen symmetrische Hochkommas, um Zeichenfolgen abzugrenzen: class="wrapper". Ein schließendes Anführungszeichen mag aussehen wie ein Hochkomma “ ", aber führt zu einem Fehler im Programm und im HTML-Markup.
“ "
Ein anderer Font stellt den Unterschied deutlicher heraus.
“ "
Dank UTF-8 können wir alle Zeichen direkt und ohne eine Kodierung wie in den Frühzeiten des Webs («) nutzen.
Quotes
CSS quotes setzt z.B. die Klammern für Skript-generierte Inhalte dynamisch ein oder rendert typografische deutsche (»«) bzw. schweizer («») Anführungszeichen je nach Ursprungsland.
<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
}
Zitate, die über mehrere Zeilen laufen, stechen im Text besser heraus, wenn sie sich mit HTML blockquote vom umgebenden Text als leicht eingerückter Absatz abheben.
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 und Anführungszeichen 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 Anführungszeichen und 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öffnendeundschließendeAnfü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: '"' '"' "'" "'" '/"' '/"'}
#onclick=
DoEdit(>edit</a>Preliminary Assessment); return false;Mini
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 Anführungszeichen aus der Schatzkiste der Programmierer. Wer Wert auf echte kernig-typografische Anführungszeichen legt, muss Klavier auf seiner Tastatur spielen. Ab Version 4.2.3 von WordPress liefert die Übersetzungsdatei bei deutscher Spracheinstellung saubere typografische Anführungszeichen und Hochkommas.
unten
oben
unten
oben
Unten sollen deutsche Anführungszeichen übrigens unten wie eine 99, oben wie eine 66 aussehen. Jedenfalls so ähnlich, denn viele Schriften halten die Anführungszeichen sehr gerade.
HTML hat ein eigenes Tag für Anführungszeichen: <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.