CSS Quotes: die Eigenschaft quotes, q und gestaltete Blockquotes
Anleitung zu CSS Quotes
CSS-Eigenschaft quotes: q, open-quote und Anführungszeichen je Sprache
So funktionieren die CSS-Eigenschaft quotes, das q-Element und open-quote / close-quote, mit einem Live-Sprachumschalter, verschachtelten Zitatebenen und gestalteten Blockquote-Mustern.
Die CSS-Eigenschaft quotes legt fest, welche Anführungszeichen ein Browser für das q-Element und für content: open-quote und close-quote zeichnet. quotes: auto wählt Zeichen passend zum lang-Attribut, eine Liste von String-Paaren legt eigene Zeichen pro Verschachtelungsebene fest, und quotes: none entfernt sie. Ein blockquote bekommt keine Zeichen, solange du sie nicht hinzufügst.
Werte von quotes
Wert
Wirkung
Zeichen passend zur Sprache des Elements (gesetzt mit lang)
open-quote und close-quote zeichnen nichts
Ein Paar, das auf jeder Verschachtelungsebene verwendet wird
Äußeres Paar, dann inneres Paar für verschachtelte Zitate
Anführungszeichen sind ein typografisches Detail, das die meisten Websites falsch machen: gerade Anführungszeichen in Templates, die falschen Zeichen für Französisch oder Deutsch oder ein dekoratives Blockquote-Zeichen, das Screenreader laut vorlesen. Hier siehst du die Eigenschaft quotes live in mehreren Sprachen, dazu saubere Muster für Pull Quotes und Kundenstimmen.
Wähle im Umschalter eine Sprache. Das Beispiel nutzt quotes: auto, dein Browser wählt die Zeichen also anhand von lang.
Wechsle zu eigenen Zeichen und gib dein eigenes äußeres und inneres Paar ein, um die Verschachtelung in Aktion zu sehen.
Kopiere die erzeugte quotes-Regel.
Nutze die Blockquote-Muster unten für Kundenstimmen und Pull Quotes.
Setze lang auf dem html-Element und auf jeder fremdsprachigen Passage, damit automatische Anführungszeichen zum Text passen.
Nutze das q-Element für kurze Zitate im Fließtext und blockquote für längere Passagen, die einen eigenen Block bilden.
Wenn die Verschachtelung tiefer geht als deine Liste von Paaren, wird das letzte Paar wiederverwendet.
Nutze no-open-quote und no-close-quote, um Verschachtelungsebenen ausgeglichen zu halten, ohne ein Zeichen zu zeichnen, zum Beispiel über mehrere Absätze hinweg.
Häufige Fragen
Wie entferne ich die Anführungszeichen von einem q-Element?
Setze q { quotes: none; }. Die Zeichen stammen aus dem Standard-content von ::before und ::after des Browsers, also open-quote und close-quote, und none sorgt dafür, dass diese nichts zeichnen, während die Bedeutung des Elements erhalten bleibt.
Warum zeigt blockquote keine Anführungszeichen?
Browser fügen Zeichen automatisch nur bei q hinzu. Ein blockquote ist standardmäßig eingerückt, aber ohne Zeichen. Füge blockquote::before { content: open-quote; } und ein passendes ::after hinzu, oder ein dekoratives Zeichen, wenn dein Design eines vorsieht.
Wie verwende ich typografische Anführungszeichen in CSS?
Schreib die Zeichen direkt in ein UTF-8-Stylesheet, quotes: "“" "”" "‘" "’";, oder als Escapes wie "\201C" und "\201D". Escapes sind praktisch, wenn ein Editor oder Build-Schritt Nicht-ASCII-Zeichen verunstaltet.
Lesen Screenreader Anführungszeichen aus CSS vor?
Generierter Inhalt kann von Hilfstechnologien vorgelesen werden, behandle die Zeichen also als Text. Ein riesiges dekoratives Zeichen zeichnest du besser mit einem Hintergrundbild, einem SVG mit aria-hidden oder mit content und leerem Alternativtext: content: "“" / "";.
So funktionieren Verschachtelungsebenen
Jedes open-quote erhöht die Verschachtelungstiefe um eins, jedes close-quote senkt sie. Tiefe null nutzt das erste Paar in quotes, Tiefe eins das zweite und so weiter. Deshalb wechselt ein q innerhalb eines q im Englischen automatisch von doppelten zu einfachen Zeichen.
Weil die Tiefe über das ganze Dokument verfolgt wird, lässt ein unausgeglichenes open-quote jedes spätere Zitat eine Ebene zu tief stehen. Setze sie in Pseudo-Elementen sorgfältig paarweise ein oder nutze die no-Varianten, um die Tiefe unsichtbar anzupassen.
Gerade im Vergleich zu typografischen Anführungszeichen
Die Zeichen " und ' auf der Tastatur sind Schreibmaschinenzeichen. Gedruckter Text nutzt geschwungene Zeichen, die zum Zitat hin zeigen: “ und ” für doppelte, ‘ und ’ für einfache. Wenn du die Zeichen mit CSS erzeugst, bleiben sie einheitlich, auch wenn Redakteure gerade Zeichen tippen.
Andere Sprachen nutzen andere Formen und Positionen: Guillemets « » im Französischen, unten und oben „ “ im Deutschen, Eckklammern 「 」 im Japanischen. quotes: auto mit dem richtigen lang erledigt das für q ohne CSS pro Sprache.
Anführungszeichen und ihre CSS-Escapes
Häufige Anführungszeichen mit Unicode-Codepoints
Zeichen
Name
CSS-Escape
Doppeltes Anführungszeichen links und rechts
Einfaches Anführungszeichen links und rechts
Doppelte Winkelanführungszeichen (Guillemets)
\AB \BB
Einfache Winkelanführungszeichen
Doppeltes tiefes Anführungszeichen (Low-9)
Eckklammern
Eigene Zeichen für verschachtelte Zitate
Zwei Ebenen mit Escapes
Das äußere q nutzt doppelte Zeichen, das q darin einfache. Die Escapes erzeugen typografische Anführungszeichen.
Gestaltete Blockquote-Muster
Pull Quote mit dekorativem Zeichen und Bildunterschrift
Das große Zeichen hat einen leeren Alternativtext und wird deshalb nicht vorgelesen. figure und figcaption verbinden das Zitat mit seiner Quelle. Browser ohne die Syntax für Alternativtext überspringen diese Regel und zeichnen kein Zeichen.
Blockquote, das echte öffnende und schließende Zeichen zeichnet
open-quote und close-quote nehmen an der Verschachtelung teil, daher bekommt ein q innerhalb dieses blockquote die inneren Zeichen.