Proprietà logiche nei layout RTL
Crei un layout realmente bidirezionale che si adatti automaticamente all'arabo e all'ebraico usando le proprietà logiche.
Proprietà logiche nei layout RTL è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 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 CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Configurare RTL in HTML
Dichiarate RTL in HTML con l'attributo dir e il lang corrispondente:
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
dir="rtl" in CSS
Potete anche impostare la direzione in CSS, una soluzione utile per i test o per sezioni parzialmente RTL:
<div dir="rtl">هذا العنصر باتجاه RTL</div>
Testare l'alternanza LTR/RTL
Un test rapido: aggiungete dir="rtl" a <html>. Con le proprietà logiche, il layout dovrebbe rispecchiarsi correttamente. Con le proprietà fisiche, vedrete che cosa deve essere corretto.
Cosa si adatta automaticamente
Quando si imposta dir="rtl", questi elementi si invertono automaticamente grazie alle proprietà logiche:
- Allineamento del testo (start/end)
- Margini e spaziature interne (inline-start/end)
- Bordi (inline-start/end)
- Elementi flottanti (inline-start/end)
- Posizionamento (inset-inline-start/end)
Cosa NON si adatta automaticamente
Anche usando le proprietà logiche, in RTL è necessario prestare attenzione a quanto segue:
- Immagini di sfondo con contenuti direzionali
- Icone SVG il cui significato dipende dalla direzione (frecce, chevron)
- Trasformazioni come
translateX(): usitranslateX(calc(-1 * var(--offset)))con un flag di direzione - Posizionamento assoluto con valori in pixel espliciti
Specularità delle icone SVG
CSS offre un modo semplice per invertire le icone direzionali nei layout RTL:
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
Variabile CSS sensibile alla direzione
Un trucco con le variabili CSS per gestire valori sensibili alla direzione:
<div dir="rtl" class="drawer">Drawer</div>
Esempio pratico di RTL
Un componente card che usa proprietà logiche:
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size e RTL
Alcuni font arabi appaiono più grandi o più piccoli alla stessa dimensione in pixel dei caratteri latini. Se necessario, definisca font-size in base al sistema di scrittura:
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
Strumenti di test
I DevTools del browser possono emulare i layout bidirezionali. Usi anche l'albero dell'accessibilità di Chrome per verificare che l'ordine di lettura segua l'ordine logico anziché quello visivo per gli screen reader.
Checklist RTL del mondo reale
Checklist per la revisione RTL:
- Tutti i margini e le spaziature interne usano proprietà logiche
- Tutti i bordi usano inline-start/end
- L'allineamento del testo usa start/end
- Le icone direzionali vengono invertite con scaleX(-1)
- Le posizioni assolute usano inset-inline-* quando necessario
- I contenitori scorrevoli scorrono dal bordo corretto
Verifica rapida
Quale trasformazione CSS rappresenta il modo più semplice per invertire un'icona SVG a forma di freccia direzionale nei layout RTL?
Riepilogo
Imposti dir="rtl" sull'elemento html per il layout RTL. Le proprietà logiche adattano automaticamente margini, spaziature interne, bordi e allineamento. I pixel usati nelle trasformazioni e nel posizionamento assoluto richiedono comunque una gestione manuale per RTL. Inverta le icone direzionali con scaleX(-1). Esegua i test attivando e disattivando dir="rtl" sull'elemento radice.
Impara CSS con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Proprietà logiche nei layout RTL» è gratuita?
Sì — il testo completo di «Proprietà logiche nei layout RTL» è 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 CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Proprietà logiche nei layout RTL»?
Crei un layout realmente bidirezionale che si adatti automaticamente all'arabo e all'ebraico usando le proprietà logiche. Eserciti CSS 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 CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS 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 4 di 4.
Quanto tempo richiede la lezione «Proprietà logiche nei layout RTL»?
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 CSS Academy?
Sì. Ogni lezione CSS 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
- Perché le proprietà logiche: internazionalizzazione
- Direzioni block e inline
- Margin, padding e border logici
- Proprietà logiche nei layout RTL