Perché le proprietà logiche: internazionalizzazione
Comprenda perché le proprietà CSS fisiche compromettono i layout RTL e come le proprietà logiche risolvono il problema.
Perché le proprietà logiche: internazionalizzazione è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Il problema delle proprietà fisiche
Il CSS tradizionale usa direzioni fisiche: top, right, bottom, left. Sono adatte per le lingue con scrittura da sinistra a destra (LTR), come l'inglese, ma non funzionano correttamente per le lingue da destra a sinistra (RTL), come l'arabo e l'ebraico, o per i sistemi di scrittura verticale, come il giapponese tradizionale.
Fisico e logico a confronto
Confrontate:
- Fisico: top, right, bottom, left — fisso rispetto allo schermo
- Logico: block-start, block-end, inline-start, inline-end — relativo alla modalità di scrittura
Assi block e inline
Ogni sistema di scrittura ha:
- Asse block: la direzione in cui si impilano i blocchi di testo (verticale nella scrittura LTR/RTL, orizzontale nella scrittura verticale)
- Asse inline: la direzione in cui scorre il testo all'interno di una riga (orizzontale nella scrittura LTR/RTL, verticale nella scrittura verticale)
Layout LTR e RTL
In LTR (inglese): inline-start = sinistra, inline-end = destra. In RTL (arabo): inline-start = destra, inline-end = sinistra. Le proprietà logiche si adattano automaticamente, senza media query o JavaScript.
Il costo reale delle proprietà fisiche
Un sito scritto usando proprietà fisiche richiede un foglio di stile separato per le sovrascritture RTL oppure sovrascritture per ogni proprietà di margine, padding, bordo, posizione e allineamento del testo che deve cambiare lato. Questo raddoppia il lavoro di manutenzione.
La modalità di scrittura modifica gli assi
Quando viene impostato writing-mode: vertical-rl (giapponese/coreano verticale), l'asse block diventa orizzontale e l'asse inline diventa verticale. Le proprietà logiche si adattano automaticamente.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Adozione nel CSS moderno
Tutti i principali browser supportano le proprietà logiche. La specifica CSS ora raccomanda di usare proprietà logiche per qualsiasi proprietà relativa a una direzione che potrebbe cambiare con la modalità di scrittura o la direzione.
Impatto pratico
Un'unica base di codice che utilizza correttamente le proprietà logiche supporta LTR, RTL e la scrittura verticale senza duplicazioni. Il CSS segue semplicemente i valori di direction e writing-mode dell'elemento radice.
dir="rtl" in HTML
Impostate la direzione di scrittura in HTML, non solo in CSS:
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Adozione progressiva
Non è necessario riscrivere tutto il CSS in una volta. Iniziate a usare le proprietà logiche per i nuovi componenti. Con il tempo, effettuate il refactoring delle proprietà fisiche nei componenti che fanno parte di aree sensibili all'internazionalizzazione.
Proprietà CSS direction
La proprietà CSS direction (ltr o rtl) influenza la direzione del flusso inline. Funziona insieme a writing-mode per definire il contesto completo del sistema di scrittura dell'elemento.
Verifica rapida
Perché le proprietà CSS fisiche come margin-left causano problemi nei layout RTL?
Riepilogo
Le proprietà logiche CSS usano il modello block/inline invece delle direzioni fisiche top/right/bottom/left. Questo permette a un unico foglio di stile di funzionare con sistemi di scrittura LTR, RTL e verticali. Le proprietà direction e writing-mode definiscono il contesto a cui le proprietà logiche si adattano automaticamente.
Domande Frequenti
La lezione «Perché le proprietà logiche: internazionalizzazione» è gratuita?
Sì — il testo completo di «Perché le proprietà logiche: internazionalizzazione» è 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 «Perché le proprietà logiche: internazionalizzazione»?
Comprenda perché le proprietà CSS fisiche compromettono i layout RTL e come le proprietà logiche risolvono il problema. 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 1 di 4.
Quanto tempo richiede la lezione «Perché le proprietà logiche: internazionalizzazione»?
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