Sviluppo web
Proprietà logiche per layout internazionali
margin-inline-start al posto di margin-left: un solo foglio di stile regge italiano, arabo ed ebraico. La mappa delle sostituzioni e ciò che resta fisico.
In sintesi
- Le proprietà logiche seguono l'asse inline e block: un CSS serve sia LTR sia RTL.
- box-shadow, transform e background-position restano fisici: non hanno una versione logica.
- Mescolare `margin-left` e `margin-inline-start` produce differenze solo in RTL, quindi i test vanno fatti in RTL.
Le proprietà logiche sostituiscono sopra, sotto, destra e sinistra con inizio e fine dell'asse di scrittura. Un solo foglio di stile copre italiano, arabo ed ebraico, senza una seconda versione RTL da mantenere.
La mappa delle sostituzioni
| Fisica | Logica | Cambia con |
|---|---|---|
| margin-left | margin-inline-start | Direzione del testo |
| margin-top | margin-block-start | Modalità di scrittura |
| padding-bottom | padding-block-end | Modalità di scrittura |
| left | inset-inline-start | Direzione del testo |
| width | inline-size | Direzione del testo |
| border-top-left-radius | border-start-start-radius | Entrambi gli assi |
L'asse inline è quello in cui scorre il testo, l'asse block è quello in cui vanno a capo le righe. In italiano l'asse inline è orizzontale, in giapponese verticale: la stessa proprietà logica copre i due casi.
Una card che funziona in RTL
.card {
padding-inline: 1.25rem;
padding-block: 1rem;
border-inline-start: 3px solid var(--accent);
text-align: start;
}
.card__icon {
margin-inline-end: 0.75rem;
float: inline-start;
}Con dir="rtl" sull'elemento radice il bordo si sposta a destra e l'icona passa dall'altra parte, senza una regola in più. Con le proprietà fisiche servirebbe un foglio RTL separato, o una classe condizionale per ogni lato.
Il test che smaschera il resto
# trova le proprietà fisiche rimaste nel CSS
grep -rnE "(margin|padding)-(left|right)|inset-(left|right)|(^|[^-])left:" --include="*.css" src/
# controlla il layout con la direzione invertita
grep -rn "dir=\"rtl\"" src/Cosa resta fisico
box-shadownon ha versione logica: l'offset sull'asse x resta fisico e va specchiato a mano in RTL.transform: translateX()e gli angoli di rotazione non si ribaltano con la direzione.background-positionin percentuale resta ancorata al lato fisico del contenitore.- Le icone direzionali (frecce, chevron, freccia indietro) vanno specchiate con
transform: scaleX(-1).
Il record che uso come esempio
Per le icone direzionali il catalogo ha una griglia navigabile: /icons con record come icon-search. Le card che ospitano quei contenuti sono in card, i pannelli di configurazione in settings.
Il catalogo EneUI indicizza 12.808 icone e 1.556 blocchi da 1.472 librerie (1 novembre 2026). Verificare una specchiatura su un record reale richiede meno tempo che discuterne in astratto.
Il limite noto
Il costo non è la sintassi, è il CSS che hai già: un reset che scrive margin-top e padding-left riporta il layout sul lato fisico e vince sulla classe logica per ordine e specificità. In RTL il risultato è un layout incoerente, senza un errore che lo segnali.
Per la struttura di pagina che ospita questi componenti vedi Grid con aree nominate. Per le lingue e gli hreflang c'è errori hreflang comuni; il confronto tra utility e CSS Modules è in Tailwind vs CSS Modules.
Domande frequenti
Devo riscrivere tutto il CSS esistente?
No. Conviene convertire prima i componenti che devono funzionare in più lingue; il resto può restare fisico finché non arriva un mercato RTL.
Funzionano con Flexbox e Grid?
Sì. Margini, padding, inset e inline-size valgono in qualsiasi layout, e text-align: start sostituisce left senza cambiare il resto.
Serve cambiare lang o solo dir?
Servono entrambi. lang dichiara la lingua per pronuncia e sillabazione, dir dichiara la direzione del testo: per arabo ed ebraico imposta dir="rtl".
Come gestisco le icone in RTL?
Specchia solo quelle direzionali con transform: scaleX(-1). Ingranaggi, utenti e simboli non direzionali restano identici.
Che succede nei browser più vecchi?
Ignorano la dichiarazione logica e usano il valore precedente, se c'è. Scrivi la proprietà fisica prima di quella logica quando il degrado deve essere controllato.