CSS, HTML & Javascript mit {stil}

quotes – Anführungszeichen und Hochkommas mit CSS

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

Quotes, Hochkommas, Anführungszeichen und Anführungsstriche

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 öffnende und 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 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.

„
ö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, 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.

Suchen auf mediaevent.de