dir=rtl per il testo da destra a sinistra
Abilitare il layout RTL per l’arabo, l’ebraico e altre lingue RTL
dir=rtl per il testo da destra a sinistra è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Funzione di dir
L'attributo dir dichiara la direzione di base del testo di un elemento. dir="ltr" (da sinistra a destra, la direzione predefinita per la maggior parte delle lingue) oppure dir="rtl" (da destra a sinistra, per arabo, ebraico, persiano e urdu).
Impostare dir su html per un intero sito RTL
Per i siti in arabo, ebraico, persiano e urdu, imposti dir="rtl" sull'elemento radice. In questo modo si inverte il flusso predefinito di ogni blocco: il testo viene allineato a destra, gli elenchi rientrano a destra, le barre di scorrimento si spostano a sinistra e i layout si rispecchiano automaticamente con il CSS moderno.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Testo bidirezionale
Il testo con direzioni miste (arabo con nomi di brand inglesi incorporati) segue automaticamente l'Unicode Bidirectional Algorithm. La direzione di base (indicata da dir) controlla la disposizione dei segmenti unidirezionali a livello di riga; le singole sequenze di caratteri seguono la direzione naturale dei rispettivi script.
Proprietà logiche CSS
Il CSS moderno usa proprietà logiche che si adattano alla direzione: margin-inline-start (a sinistra in LTR, a destra in RTL), padding-inline-end, border-inline-start. Sostituire left/right con start/end permette di usare un unico foglio di stile per entrambe le direzioni.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox e Grid si adattano automaticamente
La direzione delle righe di Flexbox rispetta dir: in RTL, gli elementi scorrono da destra a sinistra. Anche le colonne del template della griglia si invertono. Ciò significa che la maggior parte dei layout realizzati con flex o grid funziona in RTL senza CSS specifico per la direzione: i layout moderni sono indipendenti dalla direzione.
Icone che devono rispecchiarsi
Le icone direzionali (freccia indietro, freccia avanti, annulla/ripristina) devono rispecchiarsi in RTL. Usi il CSS transform: scaleX(-1) all'interno di [dir="rtl"], oppure fornisca varianti SVG RTL separate. Le icone non direzionali (ricerca, impostazioni, ingranaggio) rimangono invariate.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Allineamento del testo
Preferisca text-align: start a text-align: left: start corrisponde a sinistra in LTR e a destra in RTL. Lo stesso vale per end. L'allineamento consapevole della direzione elimina una categoria di bug quando si aggiunge il supporto RTL.
Override di dir per elemento
Imposti dir="auto" su un elemento per lasciare che il browser rilevi la direzione in base al primo carattere con direzionalità forte: <p dir="auto">{user.name}</p> gestisce i nomi inviati dagli utenti, che possono essere arabi, inglesi o misti, senza casi speciali.
Incorporamento bidi
Gli elementi bdi (isolamento bidirezionale) e bdo (override bidirezionale) offrono un controllo dettagliato sul modo in cui l'algoritmo bidi tratta un testo specifico: sono utili quando si deve riprodurre alla lettera l'input dell'utente o forzare una direzione particolare per un frammento di codice all'interno di un testo scorrevole.
Campi dei moduli
Gli input ereditano dir dal loro elemento padre. Per il testo fornito dagli utenti, la cui direzione può variare (per esempio in un'app di chat con utenti multilingue), imposti dir="auto" sui singoli input, così ognuno viene visualizzato correttamente in base al proprio contenuto.
Testare i layout RTL
I browser permettono di visualizzare un'anteprima RTL impostando temporaneamente document.documentElement.dir = "rtl" nella console degli strumenti per sviluppatori. Controlli l'orientamento delle icone, il padding e i margini, la posizione della barra di scorrimento e che nessun elemento usi left/right hardcoded quando dovrebbe usare start/end.
La direzione CSS differisce da quella del layout
La proprietà CSS direction e l'attributo HTML dir producono lo stesso effetto sulla maggior parte dei layout. Preferisca l'attributo HTML perché le tecnologie assistive, i mailer e gli altri consumer lo leggono, mentre la proprietà CSS influisce solo sul rendering nei browser.
Verifica delle conoscenze
Perché, quando si supportano le lingue RTL, si preferiscono proprietà logiche CSS come margin-inline-start a margin-left?
Riepilogo
dir="rtl" su <html> inverte la direzione di base per i siti in arabo, ebraico, persiano e urdu. Le proprietà logiche CSS (margin-inline-start, padding-block-end) si adattano automaticamente. I layout Flexbox e grid si rispecchiano senza modifiche. Rispecchi le icone direzionali, usi text-align: start/end e usi dir="auto" per i contenuti utente di direzione sconosciuta.
Domande Frequenti
La lezione «dir=rtl per il testo da destra a sinistra» è gratuita?
Sì — il testo completo di «dir=rtl per il testo da destra a sinistra» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «dir=rtl per il testo da destra a sinistra»?
Abilitare il layout RTL per l’arabo, l’ebraico e altre lingue RTL Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «dir=rtl per il testo da destra a sinistra»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L’attributo lang e gli screen reader
- dir=rtl per il testo da destra a sinistra
- Gli elementi bdi e bdo
- charset e gestione Unicode: caratteri speciali