RTL significa da destra a sinistra. Solo alcune lingue al mondo usano la direzione del testo RTL, ma queste lingue riguardano oltre un miliardo di persone. Aggiungere il supporto RTL al tuo tema è semplice e può aumentarne notevolmente il mercato.
Ecco due pagine, una con direzione RTL e una con direzione LTR (normale):
| Inglese – LTR | Ebraico – RTL |
|---|---|
 |
 |
Puoi vedere come tutto nella pagina RTL appaia “capovolto” orizzontalmente. È come guardare la “normale” pagina LTR attraverso uno specchio. Creare questa immagine speculare in realtà è piuttosto facile. La direzione “dir” nei CSS farà la maggior parte del lavoro e dovrai solo correggere alcuni punti.
Caricare un file CSS diverso per le lingue RTL
WordPress sa quali lingue hanno un flusso RTL e ti facilita la personalizzazione del loro layout. Crea un nuovo file rtl.css e mettilo nella directory principale del tuo tema.
WordPress caricherà il file rtl.css dopo aver caricato il normale styles.css, quindi il file CSS RTL deve solo sovrascrivere gli attributi che devono cambiare. Questo significa che il file rtl.css di solito è piuttosto piccolo, per la maggior parte dei temi.
Impostare la direzione della pagina su RTL
L’attributo “direction” nei CSS indica al browser la direzione della pagina. Per le lingue RTL, devi impostarlo su “rtl”. C’è un altro attributo “magico” che dovresti impostare per una corretta visualizzazione RTL. Si chiama “unicode-bidi”. Questo attributo “magico” è piuttosto semplice da capire, quando sei abituato a scrivere in RTL. Controlla il modo in cui i caratteri vengono visualizzati all’interno della riga.
Per una corretta visualizzazione RTL, aggiungi quanto segue al selettore .body:
{
direction:rtl;
unicode-bidi:embed;
}
E hai finito! Il tuo tema ora viene visualizzato in RTL. O quasi. Queste due istruzioni renderanno corretto l'aspetto della maggior parte della pagina. Ora, devi gestire le eccezioni.
Capovolgere la direzione del testo, i float e i clear
Ogni punto del CSS in cui imposti la direzione del testo e gli elementi float richiede un’attenzione manuale.
Trova tutti i selettori per text-align, float e clear. Se uno di questi specifica una direzione, invertila da “right” a “left”. Ricorda l'immagine speculare che stiamo cercando di ottenere e sarà più facile capire questa trasformazione.
Grafiche che implicano una direzione
Un’altra cosa a cui prestare attenzione sono le grafiche con un significato di “direzione”. Ad esempio, se stai creando uno slideshow, potresti avere delle frecce per gli elementi successivi e precedenti. Ricorda che il tuo sito apparirà attraverso uno specchio nelle lingue RTL, quindi dovresti capovolgere anche le grafiche direzionali. Se stai usando una freccia che punta a destra per “successivo” in LTR, dovresti fornire una freccia che punta a sinistra per “successivo” in RTL.
Selezione di font personalizzati
Le lingue RTL non hanno gli stessi font delle lingue LTR. Se stai usando dei font particolari e il layout del tuo tema si basa su di essi, dovresti trovare dei font sostitutivi per queste lingue. Se scegli un font che non esiste in una lingua RTL, il browser tornerà a quello che conosce. È meglio specificare dei font alternativi esistenti che ti piacciono.
Se usi font web standard, non avrai problemi.
Come testare il tuo tema in RTL
Quando sviluppi il tuo file CSS RTL, è una buona idea testare sempre quello che stai facendo.
- Cambia la lingua nel file wp-config.php con quella lingua. Se stai usando WPML, ti basta aggiungere una lingua RTL al tuo sito.
Aggiungere lingue RTL - Traduci i testi hard-coded del tuo tema (almeno quelli nel front-end) in quella lingua. WPML ti permette di farlo usando il modulo Traduzione stringhe.
Tradurre i testi del tema - Ottieni dei contenuti di esempio in quella lingua. Per modificare facilmente in RTL nell’area di amministrazione di WordPress, vai al tuo profilo, scorri fino all’impostazione della lingua dell’area di amministrazione e imposta la lingua in modo che sia la stessa della lingua di modifica.
Modificare i contenuti in modalità RTL
Non conosci nessuna lingua RTL? Usa semplicemente Google Traduttore. La traduzione sarà per lo più senza senso, ma per scopi di sviluppo CSS va bene.
Ora, esamina i diversi tipi di contenuto del tuo sito. Assicurati di includere articoli, pagine, la homepage e qualsiasi contenuto personalizzato che crei.
Per ottenere risultati migliori, trova qualcuno che parli quella lingua e chiedigli di fare un controllo per te. Il tuo amico che parla la lingua RTL individuerà il restante 5% dei problemi che ti sfuggiranno. Questo è un vantaggio in più, quindi non interrompere i tuoi sforzi con l’RTL se non conosci nessuno che ti aiuti con i test. Non appena rilascerai la versione abilitata per RTL del tuo tema, riceverai molti feedback dai tuoi clienti. Se fai il 95% del lavoro, saranno felici di contribuire con correzioni per il restante 5%.
Materiale bonus: l’area di amministrazione del tuo tema nelle lingue RTL
Il requisito di base per avere un tema compatibile con RTL è che il front-end (i contenuti pubblici) venga visualizzato correttamente nelle lingue RTL. Questa è la vera base, senza la quale nessuno può usare il tuo tema per creare siti nelle lingue RTL.
Oltre a questo, molti utenti vorranno avere l’area di amministrazione di WordPress nella loro lingua. Questo significa anche vedere le schermate di amministrazione del tuo tema con orientamento RTL.
Il modo più semplice per ottenere questa compatibilità RTL per le schermate di amministrazione del tuo tema è usare le classi CSS standard di WordPress per gli elementi della GUI. È vero, questo significa che non puoi usare effetti CSS particolari per ravvivare la tua GUI. Ma significa anche che la tua GUI si integra perfettamente nell’area di amministrazione di WordPress e viene visualizzata correttamente in LTR / RTL.
Se devi usare il tuo CSS personalizzato per le schermate di amministrazione, controlla come appare in una lingua RTL. Le stesse regole che segui per il CSS del front-end si applicano anche al back-end. Inverti gli allineamenti, i float e i clear; evita il posizionamento assoluto e fai attenzione alle immagini.
Un ottimo riferimento: il tema predefinito di WordPress
Per tua informazione, i temi predefiniti di WordPress sono tutti perfettamente adattati per le lingue RTL. Apri il tema predefinito e cerca il file rtl.css. Vedrai quali modifiche ha apportato al CSS per il tema predefinito. Di solito, queste modifiche sono piuttosto piccole e facili da seguire.