# 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.

> Pagina: https://ui.eneawork.it/blog/css-logical-properties
> Markdown: https://ui.eneawork.it/blog/css-logical-properties.md

*2026-11-01*

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.

caniuse riporta 96,95% di supporto globale per le CSS Logical Properties (dati letti dal repository caniuse il 2 novembre 2026). La domanda «Text: right to left (CSS)» vale 13 voti su Stack Overflow (letto lo stesso giorno con la Stack Exchange API): fonte. Il catalogo EneUI ha misurato 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie (/api/stats, 1 novembre 2026).

## La mappa delle sostituzioni

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

## 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.

## FAQ

### 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.