2026-06-03 · Redazione Baduno · 7 blog.readMin · Blog & Conoscenza
Design RTL: cosa cambia quando la direzione di lettura si inverte
L'arabo e l'ebraico si leggono da destra a sinistra – e sovvertono le tacite ipotesi di progettazione. Un report pratico dal nostro sistema di progettazione.
Più di un semplice specchio
L'approccio ingenuo – 'specchiare tutto' – fallisce rapidamente: numeri e marchi latini rimangono da sinistra a destra, i simboli dei lettori multimediali mantengono la loro direzione, i numeri di telefono si rompono. Il design RTL significa decidere per ogni elemento se è logico (seguendo la direzione di lettura) o fisico (con direzione fissa).
CSS: proprietà logiche
La logica CSS moderna rende gestibile l'RTL: margin-inline-start invece di margin-left, inset-inline-end invece di right, text-align:start invece di left. Chi scrive in modo logico fin dall'inizio ottiene la seconda direzione di lettura quasi gratuitamente – chi aggiorna in seguito lotta con centinaia di eccezioni. Questo sito utilizza coerentemente proprietà logiche; ogni versione RTL deriva dallo stesso foglio di stile di quella tedesca.
Tipografia e densità
La scrittura araba non ha lettere maiuscole, ha diverse altezze ascendenti/descendenti e a parità di dimensione appare più piccola e densa. Una buona tipografia RTL richiede font specializzati dedicati, spesso uno o due punti in più e un'altezza di riga più generosa. Anche gli effetti di interlettera, popolari in latino, non funzionano con la scrittura legata.
Test con madrelingua
Nessun automatismo sostituisce lo sguardo di una persona che vive la scrittura: interruzioni di riga in parole composte, numeri nel testo fluente, direzioni miste nei moduli – le classi di errore sono sottili. Il nostro processo di revisione include quindi sempre una revisione visiva RTL, non solo una correzione del testo.
Navigazione: dove la logica si capovolge
In ambienti RTL, le strutture di navigazione devono essere ripensate. Una barra dei menu orizzontale inizia a destra, la prima voce di menu è quella più a sinistra – l'ordine rimane logico da destra a sinistra. I menu a discesa si aprono di default in basso a sinistra anziché in basso a destra, poiché il punto di ancoraggio è sul lato destro. I pannelli laterali che nel layout LTR sono posizionati a sinistra, nel caso RTL si spostano a destra. Attenzione particolare va ai menu hamburger: l'icona stessa (tre linee orizzontali) è neutrale rispetto alla direzione, ma il suo posizionamento (in alto a sinistra vs. in alto a destra) deve essere scambiato. Un errore comune sono i sottomenu che mostrano ancora la direzione LTR perché non sono controllati con proprietà CSS logiche. Nel nostro design system definiamo quindi i componenti di navigazione completamente con inset-inline-start/end, in modo che passino automaticamente tra LTR e RTL. Esempio pratico: una breadcrumb navigation in modalità RTL mostra la pagina corrente a sinistra e la home page a destra – anche le frecce di separazione devono cambiare direzione. Qui utilizziamo CSS-content con frecce incorporate che usano un'entità diversa a seconda del valore dir.
Direzioni miste: numeri e caratteri
Numeri, numeri di telefono, indirizzi email e nomi di marca latini mantengono la loro direzione LTR, anche quando il testo circostante è RTL. Questo porta a sezioni bidirezionali in cui la direzione di lettura cambia a metà frase. L'algoritmo Unicode bidirezionale (Bidi) gestisce di default tali testi misti, ma è necessario assicurarsi che la commutazione di direzione sia corretta. Utilizzare l'attributo dir a livello dell'elemento misto o caratteri come LRM (Left-to-Right Mark) e RLM (Right-to-Left Mark). Esempio: in una frase ebraica "Telefono: 01234 56789" la sequenza numerica deve essere letta da sinistra a destra. Senza un markup corretto, il browser potrebbe spezzare la sequenza o visualizzarla in modo errato. Nei form è essenziale che le etichette siano a destra e gli input a sinistra, poiché l'utente inizia a leggere da destra. Il nostro approccio: per ogni elemento di testo con materiale latino incorporato, inseriamo nel template RTL un wrapper <span dir="ltr"> con un LRM finale, in modo che il carattere RTL successivo si posizioni correttamente alla fine.
L'arabo e l'ebraico si leggono da destra a sinistra – e sovvertono le tacite ipotesi di progettazione. Un report pratico dal nostro sistema di progettazione.
Icone: direzionali o logiche?
Icone e pittogrammi spesso portano direzioni implicite: le frecce avanti puntano a destra, le frecce indietro a sinistra. Queste devono essere specchiate nelle interfacce RTL, altrimenti la navigazione risulta controintuitiva. Tuttavia, non tutte le icone dipendono dalla direzione: un triangolo play rimane sempre uguale (perché rappresenta un'azione fisica), così come un'icona email o telefono. La regola pratica: la direzione logica (sequenza temporale, direzione di lettura, direzione di navigazione) deve essere specchiata; il significato fisico o simbolico no. Nello sviluppo utilizziamo trasformazioni CSS per le icone: scaleX(-1) per tutti gli SVG logicamente direzionali, controllato da una classe [dir=rtl] .icon--directional. In questo modo evitiamo asset duplicati. Attenzione: le frecce del carosello che puntano a destra devono puntare a sinistra in modalità RTL, poiché la pagina "successiva" ora si trova a sinistra. Lo stesso vale per le barre di avanzamento: il progresso deve aumentare da destra a sinistra. Nel nostro design system, tali componenti sono implementati con proprietà logiche (inline-size invece di width), in modo che il riempimento si leghi automaticamente all'inizio della barra di avanzamento.
Immagini: cosa rispecchiare, cosa ridisegnare?
Grafici e illustrazioni spesso contengono simboli culturali o dipendenti dalla direzione: orologi che girano in senso orario (nel contesto RTL l'immagine specchiata appare normale), strette di mano, linee del tempo. Non tutte le immagini devono essere completamente specchiate – un movimento specchiato delle lancette potrebbe essere percepito come errato, poiché la realtà fisica rimane intatta. Ma una linea del tempo da sinistra a destra dovrebbe, nel contesto RTL, andare da destra a sinistra. Loghi e immagini di marca di solito rimangono inalterati, poiché sono soggetti a un'immagine fissa. La sfida è fornire automaticamente le immagini corrette. Salviamo per ogni grafico un equivalente RTL come risorsa separata o utilizziamo trasformazioni CSS per casi semplici. In scenari complessi (es. infografiche con testo) è necessaria una riprogettazione manuale. Il nostro flusso di lavoro: il grafico designer contrassegna ogni immagine come 'senza direzione', 'specchiabile' o 'individuale' nel CMS. La consegna avviene tramite una condizione che legge l'attributo dir dell'elemento padre. Esempio: un'illustrazione di una libreria con libri in caratteri latini dovrebbe essere specchiata in modo che i dorsi appaiano a destra – può sembrare sorprendente a prima vista, ma è coerente.
SEO e hreflang: marcatura specifica per RTL
Per i motori di ricerca è essenziale un corretto markup della lingua e della direzione. Oltre all'attributo lingua (lang), l'attributo dir deve essere impostato su ogni pagina affinché il browser e il motore di ricerca interpretino correttamente la direzione di lettura. Nelle pagine RTL multilingue, il markup hreflang è particolarmente critico: una pagina araba (ar) deve fare riferimento correttamente alle sue controparti in tedesco o inglese. Voci hreflang errate portano a indicizzazioni sbagliate, poiché Google non deduce automaticamente la direzione di lettura. Inoltre, si consiglia di considerare sitemap separate per versioni LTR e RTL per rafforzare i segnali. Un errore comune è l'uso di tag generici senza considerare la direzione di scrittura. Noi puntiamo su una generazione dinamica di hreflang che, dal database linguistico, ricava sia i codici di lingua che quelli regionali. Per i dialetti arabi è necessaria una differenziazione regionale, poiché consumatori e algoritmi hanno aspettative diverse. Inoltre, utilizziamo il tag canonical per evitare incongruenze tra contenuti specchiati e non specchiati. Il nostro flusso di lavoro verifica automaticamente se l'attributo dir nell'intestazione HTML è coerente con le indicazioni hreflang. Un testo arabo senza dir="rtl" può essere visualizzato in modo errato dai browser, aumentando così la frequenza di rimbalzo. Le prestazioni SEO sono quindi influenzate non solo dai testi, ma anche dal corretto markup della direzione di lettura.
Accessibilità: sfide RTL per le tecnologie assistive
Le esigenze degli screen reader e di altre tecnologie assistive cambiano con la direzione di lettura. Screen reader come JAWS o VoiceOver si aspettano l'attributo dir per determinare l'ordine di lettura corretto. Se manca, potrebbero leggere contenuti multilingue nell'ordine sbagliato. Anche i punti di riferimento ARIA rimangono gli stessi, ma la posizione nel DOM dovrebbe idealmente seguire la direzione di lettura: il menu principale dovrebbe stare prima del contenuto principale nel codice sorgente – per RTL significa il lato destro per primo. Un altro punto sono gli ordini di focus: gli indici di tabulazione nelle pagine RTL devono scorrere logicamente da destra a sinistra. Utilizzate elementi HTML nativi che adattano automaticamente la navigazione tramite tastiera. I testi alternativi delle immagini dovrebbero essere specifici per lingua e riflettere la prospettiva della cultura di destinazione. Esempio: un'immagine che mostra una stretta di mano in arabo dovrebbe essere descritta come "due mani che si incrociano", poiché la connotazione culturale è diversa. Raccomandiamo di condurre audit di accessibilità sia in vista LTR che RTL. Ciò include la verifica dei contrasti, che possono essere diversi con la tipografia RTL. Il nostro team utilizza strumenti automatizzati in combinazione con test manuali effettuati da parlanti nativi per garantire un'esperienza utente inclusiva.
blog.faqT
Devo specchiare tutte le immagini quando creo una versione RTL?
No. Solo le immagini con una chiara direzione di lettura, come linee temporali, frecce o diagrammi sequenziali, dovrebbero essere specchiate. Loghi, ritratti, grafici con oggetti fisici (orologio, mappamondo) rimangono invariati, altrimenti il significato verrebbe alterato. Decidere caso per caso.
Come posso testare l'RTL in modo più efficiente durante lo sviluppo?
Utilizzare gli strumenti di sviluppo del browser per impostare l'attributo dir sull'elemento html su "rtl" e verificare ogni componente per un corretto allineamento. Estendere il processo di code review con un controllo RTL dedicato da parte di madrelingua, che copra disturbi visivi e flussi di testo bidirezionali errati.
