Attributo dir fondamentale
L'attributo dir con il valore 'rtl' è la base per ogni web design RTL. Viene solitamente impostato sul tag <html> o <body> e influenza l'allineamento del testo, l'ordine predefinito delle celle della tabella e la direzione delle proprietà CSS come 'text-align'. Senza questo attributo, i contenuti rimangono allineati a sinistra, risultando innaturali per le lingue RTL. Inoltre, è necessario sovrascrivere 'dir' a livello di contenitore quando si verificano direzioni miste. Un attributo dir mancante o errato porta a layout difficili da leggere e dovrebbe quindi essere prioritario.
Layout specchiato e proprietà CSS logiche
Invece di utilizzare proprietà fisiche come 'left' e 'right', usate proprietà CSS logiche come 'margin-inline-start' e 'padding-inline-end'. Queste si adattano automaticamente alla direzione di scrittura, evitando sovrascritture manuali. Un layout specchiato significa che la barra di navigazione inizia a destra e il contenuto a sinistra. Con valori logici come 'float: inline-start' o 'text-align: start' si ottiene questo risultato senza media query. Le moderne proprietà CSS Grid e Flexbox come 'justify-content: flex-start' funzionano correttamente in base all'attributo dir. Testate sempre con contenuti reali, poiché le proprietà logiche non sono interpretate allo stesso modo da tutti i browser.
Numeri e latino incorporato
Nei testi RTL, i numeri e le lettere latine incorporate rimangono allineati da sinistra a destra. Questo comporta sfide, poiché possono disturbare la direzione di lettura. Utilizzate l'attributo 'unicode-bidi' o 'direction: ltr' per tali elementi, per garantire una rappresentazione coerente. Per i formati di data o numero, è consigliabile adattare l'ordine alla cultura RTL. Fate attenzione anche al layout dei moduli, dove i campi di input per i numeri dovrebbero rimanere allineati a sinistra. Una gestione attenta di questa direzione mista previene interruzioni visive e migliora la leggibilità.
Caratteri e tipografia
La scelta del carattere è cruciale: arabo, persiano ed ebraico richiedono font con supporto per i glifi corrispondenti. Opzioni popolari sono 'Noto Naskh Arabic', 'Vazir' per il persiano e 'Noto Sans Hebrew'. Definite dei fallback, ad esempio 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Assicuratevi di avere dimensioni del carattere e interlinea adeguate, poiché i caratteri RTL sono spesso più stretti o complessi. Evitate il corsivo, poiché non esiste in molte scritture arabe. Testate la visualizzazione su diversi dispositivi per garantire che i font siano caricati correttamente e leggibili.
Icone e specchiatura
Le icone che indicano una direzione (ad esempio frecce, simboli avanti/indietro) devono essere specchiate nei layout RTL. Questo si ottiene con trasformazioni CSS come 'transform: scaleX(-1)' o utilizzando set di icone che supportano automaticamente RTL (ad esempio Font Awesome con l'attributo 'dir'). I simboli senza riferimento direzionale (ad esempio casa, impostazioni) rimangono invariati. Assicuratevi che la specchiatura non alteri la semantica. Testate tutte le icone nella vista RTL, poiché specchiature involontarie possono compromettere l'usabilità.
