CSS, HTML und Javascript mit {stil}

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.

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 Benutzer anzeigen.

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

Jedes Anführungszeichen 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, 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 ---+   |
     äußeres 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