Capitolo 17
La citazione
Dare la parola a un altro sembra questione di due virgolette. Ma quali virgolette, in che lingua, con quale fonte, e con quanta enfasi: ogni scelta cambia chi sta parlando, e quanto ci si fida di lui.
Il capitolo scorso era ancora dentro la pagina, fra peso e misura; questo si ferma su un gesto editoriale antichissimo e quasi mai fatto bene: dare la parola a qualcun altro. «Quando si cita, come la si presenta?» La domanda sembra banale — si mettono due virgolette e via — ma sotto ci sono almeno quattro decisioni separate, ognuna con la sua trappola. Quali virgolette, perché la convenzione cambia con la lingua. Quale tag, perché citare adesso parole altrui non è la stessa cosa che ripescare una frase del proprio testo. Quale fonte, e dove metterla. Quanta enfasi dare, perché una citazione può essere un sussurro in mezzo alla riga o un monumento a inizio capitolo.
La citazione è il punto in cui la tipografia smette di essere decorazione e diventa semantica: il segno tipografico, qui, dice chi sta parlando. Una virgoletta dritta tradisce un testo battuto a macchina; un <cite> messo sul nome della persona invece che sul titolo dell’opera tradisce chi non conosce la regola; un blocco in due lingue senza lang corretto tradisce lo screen reader e la sillabazione. Sono errori invisibili a chi non li sa nominare, e tutti insieme fanno sembrare una pagina meno seria senza che si capisca perché — esattamente come nel capitolo sulla micro-tipografia.
Cinque dimostrazioni, cinque modi di presentare la parola di un altro. E come sempre niente librerie: l’HTML conosce già <blockquote>, <cite>, <q>, e il CSS sa annidare le virgolette nella lingua giusta con la proprietà quotes. Il nostro lavoro è vestirli senza tradire la semantica che si portano dentro.
Il pull quote, che non cita nessuno
Il primo non è nemmeno una citazione vera, ed è il fraintendimento più comune. Il pull quote è una frase del testo stesso, ripescata e ingrandita per dare ritmo alla lettura: non porta attribuzione, perché la fonte è la pagina che hai sotto gli occhi.
Tutto quello che succede senza che l’utente se ne accorga è la vera potenza dell’interfaccia.
Pull quote tipografico · fuori griglia, virgoletta sporgente
È grande, esce dalla colonna di prosa, e la virgoletta d’apertura sporge oltre il margine sinistro (hanging punctuation fatta a mano con un margine negativo): così il bordo del testo resta otticamente dritto invece di sembrare rientrato. È il dettaglio che separa un pull quote composto da uno semplicemente incollato. Niente <blockquote> qui, ed è una scelta semantica precisa: non è parola di un altro, è materiale editoriale interno — usarne uno sarebbe mentire allo screen reader.
La virgoletta enorme è aria-hidden: è puro ornamento, e il testo si legge benissimo senza. Il colore d’accento è il secondo segnale, non il primo — la scala e la posizione sporgente dicono già «citazione» a chi non distingue i colori. E niente motion: un pull quote si presenta fermo, non si anima. Serve a far respirare la lettura, non a chiedere attenzione.
La citazione con la fonte, fatta bene
Qui si dà la parola a un altro per davvero, e la semantica conta fino all’ultimo tag. La regola HTML è precisa e quasi sempre sbagliata: <blockquote> avvolge solo le parole citate, l’attribuzione sta fuori, e <cite> è per il titolo dell’opera — non per il nome della persona.
La perfezione si raggiunge non quando non c’è più niente da aggiungere, ma quando non c’è più niente da togliere.
Blockquote con attribuzione · cite per l’opera, non per chi parla
Il <blockquote> contiene la sola frase di Saint-Exupéry; l’«— Antoine de Saint-Exupéry, Terra degli uomini» vive in un <figcaption> fuori dal blocco, perché non è una cosa che lui ha detto: è il nostro commento su chi l’ha detta. E l’errore più diffuso lo evitiamo qui: <cite> avvolge il titolo dell’opera, non il nome della persona — per questo il titolo è in corsivo e il nome no. L’cite=“URL” sul blockquote dà la fonte leggibile dalla macchina, invisibile ma onesta verso chi legge il markup.
Il filetto a sinistra è il segno «questo è di un altro»: forma più colore, mai colore da solo, così chi non vede l’accento legge comunque il rientro e la barra. Le virgolette attorno alla frase non sono scritte a mano nel testo — le mette il CSS via quotes e open-quote/close-quote, coerenti con la lingua del blocco. Scriverle a mano sarebbe il modo più sicuro di sbagliarle quando cambia la lingua.
La citazione dentro la riga, annidata
Citare dentro una frase sembra il caso più semplice, e nasconde due raffinatezze che quasi nessuno cura: il tag giusto è <q>, non virgolette battute a mano — e <q> sa fare una cosa che a mano è impossibile, annidare i livelli.
Il direttore tagliò corto: la regola è una sola, e me la ripeteva mio nonno:
Non c’è altro da aggiungere. misura due volte, taglia una.
Citazione inline · virgolette annidate, consapevoli della lingua
Una <q> dentro un’altra <q>: il browser mette i segni da solo e usa automaticamente il livello giusto — in italiano i caporali «» al primo livello e le curve singole ‘’ al secondo. Non scriviamo una sola virgoletta nel markup: le risolve il CSS dalla proprietà quotes. Provare a comporle a mano sarebbe l’errore garantito, perché l’annidamento corretto va calcolato, non indovinato.
E qui sta il bug silenzioso più comune: quali segni metta <q> dipende dalla lingua dichiarata. Senza il lang giusto, il browser userebbe la sua convenzione di default — spesso quella inglese «”», anche su testo italiano. Qui il blocco porta lang=“it” e la proprietà quotes con i caporali fuori e le curve dentro; la versione inglese cambia in doppie curve fuori, singole dentro. La convenzione cambia con la lingua, e fingere che sia universale è il primo errore.
La citazione celebrativa, col capolettera
Quando una citazione deve aprire qualcosa — un capitolo, una sezione, un momento solenne — il gesto editoriale è il capolettera: la prima lettera ingrandita che affonda di alcune righe. Dà peso senza una parola in più, e la sua onestà sta tutta nel grado di supporto del browser.
Mentre l’interfaccia lavora in silenzio, l’utente è libero di essere altrove con la mente: è lì, in quell’assenza di attrito, che vive la cura.
Citazione con capolettera · initial-letter + fallback first-letter
La proprietà giusta è initial-letter: 3: dice «questa lettera vale tre righe» e il browser calcola da solo l’affondamento e l’allineamento alla baseline. Ha supporto reale soprattutto su Safari. Per tutti gli altri c’è il fallback universale, ::first-letter con float e una scala grande: meno preciso sulla baseline, ma robusto ovunque. Dove initial-letter è supportata vince via @supports, altrove regge il float. Miglioramento progressivo, non una promessa che il browser non può mantenere.
Resta un <blockquote> vero, con la fonte in <cite>: il capolettera è vestito, non semantica. Per questo la lettera ingrandita è ancora dentro il testo, non un glifo separato: lo screen reader legge «Mentre», parola intera, non «M» seguita da «entre». È la stessa disciplina di tutto il playground — l’effetto visivo non deve mai rompere quello che il controllo, o qui il testo, significa davvero.
La citazione tradotta, con due lingue
L’ultimo caso è quello in cui si cita qualcuno che parlava un’altra lingua: si dà l’originale e la traduzione. La domanda di design è quale dei due sia il primario — e qui la lasciamo decidere al lettore, con un toggle che scambia l’enfasi senza toccare il contenuto.
Originale · francese On ne voit bien qu’avec le cœur. L’essentiel est invisible pour les yeux.
Traduzione · italiano Non si vede bene che col cuore. L’essenziale è invisibile agli occhi.
Citazione tradotta · originale + traduzione, lang corretto su ciascuna
L’originale francese e la traduzione italiana stanno affiancati; il <button> con aria-pressed scambia solo la gerarchia visiva — chi è grande e opaco, chi è piccolo e attenuato — non il testo. La gerarchia passa per scala più opacità, non solo colore, e la transizione usa le durate-token: con prefers-reduced-motion commuta secca, stesso stato finale senza il viaggio. È un controllo vero, quindi tastiera e anello di focus arrivano gratis.
La parte non negoziabile è il lang su ciascun blocco: fr sull’originale, it sulla traduzione. Serve allo screen reader, che cambia pronuncia; alla sillabazione, che vuole il dizionario giusto (la lezione del capitolo 08); e alle virgolette, perché la proprietà quotes segue la lingua — così il francese prende i caporali con lo spazio fine, l’italiano i caporali asciutti, l’inglese le doppie curve. Un solo blocco con due lingue mescolate le sbaglierebbe entrambe, in silenzio.
Cinque modi di dare la parola a un altro, un’unica intuizione: la citazione è il punto in cui il segno tipografico smette di essere ornamento e dichiara chi sta parlando. Il pull quote che cita la pagina stessa, il blockquote che attribuisce con la fonte giusta nel tag giusto, la <q> che annida le virgolette nella lingua corretta, il capolettera che apre con solennità, le due lingue affiancate con ciascuna il suo lang. Nessuno di questi dettagli si nota quando è fatto bene — si nota solo che la pagina sa tenere insieme voci diverse senza confonderle. Presentare la parola di un altro, alla fine, è soprattutto una questione di rispetto: per chi ha parlato, per la lingua in cui l’ha fatto, e per il lettore che deve capire al volo di chi è quella frase.
Il prossimo capitolo resta sul margine fra il testo dell’autore e quello del lettore, ma abbassa ancora la voce: la nota a margine. «Come si dialoga col proprio lettore senza interrompere il filo?» — l’aside, il footnote, la postilla che aggiunge senza spezzare, e dove la si mette quando lo schermo è troppo stretto per stare davvero «a margine».