Virgolette CSS: la proprietà quotes, q e blockquote con stile
Guida alle virgolette CSS
Proprietà CSS quotes: q, open-quote e virgolette per lingua
Come funzionano la proprietà CSS quotes, l'elemento q e open-quote / close-quote, con un selettore di lingua dal vivo, livelli di virgolette annidate e pattern di blockquote con stile.
La proprietà CSS quotes sceglie quali virgolette il browser disegna per l'elemento q e per content: open-quote e close-quote. quotes: auto sceglie le virgolette adatte all'attributo lang, un elenco di coppie di stringhe imposta le tue virgolette per ogni livello di annidamento e quotes: none le rimuove. Un blockquote non ha virgolette a meno che tu non le aggiunga.
Valori di quotes
Valore
Effetto
Virgolette adatte alla lingua dell'elemento (impostata con lang)
open-quote e close-quote non disegnano nulla
Una coppia, usata a ogni livello di annidamento
Coppia esterna, poi coppia interna per le citazioni annidate
Le virgolette sono un dettaglio tipografico che la maggior parte dei siti sbaglia: virgolette dritte scritte nei template, segni sbagliati per il francese o il tedesco, oppure un segno decorativo nel blockquote che gli screen reader leggono ad alta voce. Qui la proprietà quotes è mostrata dal vivo in diverse lingue, insieme a pattern puliti per pull quote e testimonianze.
Scegli una lingua nel selettore. L'esempio usa quotes: auto, quindi il tuo browser sceglie le virgolette in base a lang.
Passa alle virgolette personalizzate e scrivi la tua coppia esterna e interna per vedere l'annidamento all'opera.
Copia la regola quotes generata.
Usa i pattern di blockquote qui sotto per testimonianze e pull quote.
Imposta lang sull'elemento html, e su ogni passaggio in lingua straniera, così le virgolette automatiche corrispondono al testo.
Usa l'elemento q per brevi citazioni in linea e blockquote per passaggi più lunghi che formano un blocco a sé.
Quando l'annidamento va più in profondità del tuo elenco di coppie, viene riusata l'ultima coppia.
Usa no-open-quote e no-close-quote per mantenere bilanciati i livelli di annidamento senza disegnare un segno, per esempio tra un paragrafo e l'altro.
Domande frequenti
Come rimuovo le virgolette da un elemento q?
Imposta q { quotes: none; }. Le virgolette provengono dal content predefinito del browser in ::before e ::after, cioè open-quote e close-quote, e none fa sì che non disegnino nulla pur mantenendo il significato dell'elemento.
Perché il blockquote non mostra le virgolette?
I browser aggiungono automaticamente le virgolette solo per q. Un blockquote ha un rientro predefinito ma nessun segno. Aggiungi blockquote::before { content: open-quote; } e un ::after corrispondente, oppure un segno decorativo, se il tuo design lo richiede.
Come uso le virgolette curve in CSS?
Scrivi i caratteri direttamente in un foglio di stile UTF-8, quotes: "“" "”" "‘" "’";, oppure come escape, per esempio "\201C" e "\201D". Gli escape sono utili quando un editor o un passaggio di build rovina i caratteri non ASCII.
Gli screen reader leggono le virgolette generate dal CSS?
Il contenuto generato può essere annunciato dalle tecnologie assistive, quindi tratta le virgolette come testo. Un grande segno decorativo è meglio disegnarlo con un'immagine di sfondo, un SVG con aria-hidden oppure con content e testo alternativo vuoto: content: "“" / "";.
Come funzionano i livelli di annidamento
Ogni open-quote aumenta di uno la profondità di annidamento e ogni close-quote la diminuisce. La profondità zero usa la prima coppia di quotes, la profondità uno la seconda, e così via. Ecco perché in inglese un q dentro un q passa automaticamente dalle virgolette doppie a quelle singole.
Dato che la profondità viene tracciata su tutto il documento, un open-quote non bilanciato lascia ogni citazione successiva un livello troppo in profondità. Abbinali con attenzione negli pseudo-elementi, oppure usa le varianti no- per regolare la profondità senza mostrare nulla.
Virgolette dritte e virgolette tipografiche
I caratteri " e ' della tastiera sono segni da macchina da scrivere. Il testo stampato usa virgolette curve rivolte verso la citazione: “ e ” per le doppie, ‘ e ’ per le singole. Generare le virgolette con il CSS le mantiene coerenti anche quando chi scrive i contenuti usa quelle dritte.
Altre lingue usano forme e posizioni diverse: i caporali « » in francese, le virgolette basse e alte „ “ in tedesco, le parentesi angolari 「 」 in giapponese. quotes: auto con il lang giusto gestisce tutto questo per q senza CSS specifico per ogni lingua.
I caratteri delle virgolette e i loro escape CSS
Virgolette comuni con i loro code point Unicode
Segno
Nome
Escape CSS
Virgolette doppie aperte e chiuse
Virgolette singole aperte e chiuse
Virgolette angolari doppie (caporali)
\AB \BB
Virgolette angolari singole
Virgolette doppie basse (low-9)
Parentesi angolari giapponesi
Virgolette personalizzate per citazioni annidate
Due livelli con gli escape
Il q esterno usa virgolette doppie, il q al suo interno usa virgolette singole. Gli escape producono virgolette curve.
Pattern di blockquote con stile
Pull quote con segno decorativo e didascalia
Il segno grande ha il testo alternativo impostato a vuoto, quindi non viene letto ad alta voce. figure e figcaption collegano la citazione alla sua fonte. I browser che non supportano la sintassi del testo alternativo ignorano quella regola e non disegnano alcun segno.
Blockquote che disegna vere virgolette di apertura e chiusura
open-quote e close-quote partecipano all'annidamento, quindi un q dentro questo blockquote riceve le virgolette interne.