Questo post sul blog ti guiderà attraverso i passaggi fondamentali per implementare efficacemente il supporto alle lingue RTL (da destra a sinistra) nella tua applicazione web.
Logto è la scelta migliore per la soluzione di gestione delle identità e degli accessi dei clienti (CIAM). È open-source e supportato da una comunità vivace. Recentemente, la nostra comunità (grazie a @zaaakher) ha contribuito alla traduzione in lingua araba sia per la Logto Admin Console che per l'esperienza di accesso Logto, rendendola più accessibile agli utenti di lingua araba.
Tuttavia, comprendiamo che avere solo una traduzione non è sufficiente. Dobbiamo assicurarci che anche il layout dell'interfaccia utente sia ottimizzato per le lingue da destra a sinistra (RTL). In questo tutorial, parleremo delle sfide comuni nella compatibilità con RTL e di come affrontarle nella tua applicazione web.
In un'applicazione web da sinistra a destra (LTR), il layout è progettato per iniziare dal lato sinistro dello schermo. Il contenuto fluisce da sinistra a destra e la barra di scorrimento si trova sul lato destro dello schermo. Al contrario, un'applicazione web RTL inizia dal lato destro dello schermo. Il contenuto fluisce da destra a sinistra e la barra di scorrimento si trova sul lato sinistro dello schermo.
Prendendo come esempio uno screenshot della Logto Console:
Quando si converte un'applicazione web LTR per renderla compatibile con RTL, potresti incontrare le seguenti sfide:
Ecco alcuni suggerimenti e trucchi che abbiamo applicato per rendere Logto compatibile con RTL:
dir="rtl"Applica l'attributo HTML dir="rtl" all'elemento radice della tua applicazione web, se la lingua corrente è l'arabo o qualsiasi altra lingua RTL.
Questo aiuta il browser a capire che il contenuto deve essere visualizzato in modalità RTL e regolerà automaticamente le prime tre sfide (allineamento del testo, direzione del contenuto e posizione della barra di scorrimento). Tuttavia, se stai usando una barra di scorrimento personalizzata, potresti dover regolare la posizione manualmente.
Quando la lingua è RTL, possiamo usare il CSS transform: scaleX(-1); per capovolgere le icone orizzontalmente. Ecco un esempio scritto in React e TypeScript:
Con questo componente, puoi avvolgere il componente icona e capovolgerà automaticamente l'icona in modalità RTL.
Usa la funzione JavaScript toLocalString per localizzare date, orari e numeri. Per esempio:
Puoi anche scegliere di utilizzare una libreria come date-fns per gestire la localizzazione di date e orari.
Per i numeri, puoi anche usare il metodo toLocaleString, ma con l'opzione ar-u-nu-arab per visualizzare i numeri arabi orientali.
Spiegazione
Potresti aver bisogno di regolare la spaziatura, il posizionamento, il border-radius e altri stili CSS di conseguenza. Ecco alcuni casi comuni:
Invece di scrivere margin-left, margin-right, padding-left, e padding-right, puoi usare margin-inline-start, margin-inline-end, padding-inline-start, e padding-inline-end per gestire entrambe le modalità LTR e RTL.
Quando usi il posizionamento assoluto, puoi usare inset-inline-start e inset-inline-end invece di left e right.
Quando usi il border-radius, puoi usare border-start-start-radius, border-start-end-radius, border-end-start-radius, e border-end-end-radius per gestire entrambe le modalità LTR e RTL.
Potrebbero esserci ancora alcuni casi particolari che non puoi gestire con i metodi sopra. In tali casi, puoi usare la pseudo-classe :dir() per applicare stili diversi in base alla direzione del testo.
In questo tutorial, abbiamo discusso le sfide nell'implementazione di una UI amica di RTL, e abbiamo condiviso come le abbiamo affrontate nella Logto Console e nell'esperienza di accesso Logto. Applicando i suggerimenti e i trucchi sopra menzionati, puoi anche rendere la tua applicazione web più accessibile agli utenti delle lingue RTL.