Interfacce da destra a sinistra che sembrano native

Chi legge in arabo si accorge in un attimo se un’interfaccia è stata tradotta invece che pensata per lui. Il testo va da destra a sinistra, ma le frecce puntano ancora dalla parte sbagliata, i numeri saltano qua e là e la tipografia sembra presa in prestito.

Sviluppiamo piattaforme in francese, inglese e arabo, comprese le nostre. Ecco cosa serve perché la versione araba sembri nata così, e non convertita.

Il layout si specchia, i contenuti no

In un’interfaccia da destra a sinistra si ribalta tutto il layout: la navigazione parte da destra, l’ordine di lettura scorre verso sinistra, e verso sinistra procede anche l’avanzamento. Però non tutto si capovolge.

• Loghi e marchi restano nella loro forma originale. Un logotipo in caratteri latini resta esattamente com’è.
• I numeri si scrivono comunque da sinistra a destra, anche dentro un testo arabo.
• Codice, indirizzi email e URL restano da sinistra a destra.
• I controlli multimediali, come il tasto play e la barra di avanzamento, di solito mantengono la loro direzione, perché rappresentano il tempo e non l’ordine di lettura.

Le icone direzionali sono la parte più delicata. Una freccia che significa «avanti» in arabo deve puntare a sinistra. Una freccia che significa «scarica» punta in basso in ogni lingua. Si decide icona per icona, e a volte la scelta giusta è togliere del tutto la freccia.

Proprietà logiche, ovunque

La decisione che rende di più si prende il primo giorno di progetto: mai scrivere left o right nel CSS. Al loro posto si usano le proprietà logiche, che seguono da sole la direzione di lettura.

/* physical: breaks in Arabic */
.card { margin-left: 24px; text-align: left; }

/* logical: correct in every language */
.card { margin-inline-start: 24px; text-align: start; }

Con margin-inline-start, padding-inline-end, inset-inline-start e text-align: start, un unico foglio di stile serve entrambe le direzioni. A quel punto basta impostare dir="rtl" sulla pagina per specchiare l’intera interfaccia.

Introdurle dopo significa rivedere ogni componente. Partire così non costa nulla.

La tipografia non si traduce

L’arabo è una scrittura a lettere legate, con proporzioni tutte sue. Prendere un design pensato per l’alfabeto latino e cambiare soltanto il font raramente basta.

• Scegliete con cura un carattere arabo che si abbini al vostro font latino per peso e tono, invece di accontentarvi di quello che propone il sistema.
• Aumentate l’interlinea. Le lettere arabe si estendono di più sopra e sotto la riga.
• Niente spaziatura negativa. Lettere ravvicinate, eleganti in latino, spezzano i legami tra le lettere arabe.
• Attenzione al corsivo. L’arabo non ha un vero corsivo. Se il vostro design lo usa per dare enfasi, scegliete un altro espediente, per esempio un peso più leggero.

Numeri, date e testo misto

Le interfacce reali mescolano le lingue di continuo: una frase in arabo con il nome di un’azienda in caratteri latini, un prezzo, un numero di telefono. L’algoritmo bidirezionale del browser gestisce quasi tutto da solo, ma ha bisogno di un aiuto.

Marcate i contenuti inseriti dagli utenti con dir="auto", così ogni valore prende la direzione del proprio testo. Formattate date e numeri con gli strumenti di internazionalizzazione della piattaforma, evitando di farlo a mano. E decidete presto se usare le cifre arabe occidentali o quelle orientali, poi applicate la scelta in modo coerente.

Animazioni che hanno senso

Anche le animazioni hanno una direzione. Un pannello che in inglese entra da destra, in arabo deve entrare da sinistra. Una barra di avanzamento si riempie da destra. Le sottolineature si disegnano dall’inizio della riga, che qui sta a destra. Quando il movimento segue la direzione di lettura, l’interfaccia trasmette calma. Quando non la segue, sembra estranea.

Test con madrelingua

Nessuna checklist sostituisce un madrelingua alle prese con il prodotto. Prima del lancio, fate svolgere compiti reali a persone di lingua araba e osservate dove esitano. I problemi che trovano in un’ora, altrimenti, emergerebbero dopo settimane.

Se state progettando una piattaforma che deve funzionare in arabo, francese e inglese, parlatecene. Sviluppiamo tutte e tre le lingue fin dall’inizio.