Cosa sono le proprietà logiche CSS e perché sono importanti per l'internazionalizzazione?

Question

Accepted Answer

Le **proprietà logiche** descrivono il layout in termini della **direzione di flusso del contenuto** (inizio/fine, inline/block) invece di direzioni fisiche (sinistra/destra/alto/basso). Questo consente a un unico foglio di stile di adattarsi automaticamente alle lingue scritte da destra a sinistra (arabo, ebraico) o dall'alto verso il basso. ## Perché è importante Con le proprietà fisiche, supportare l'arabo significa scrivere un intero secondo insieme di stili specchiati (`margin-left` → `margin-right`, ecc.) dietro `[dir="rtl"]`. Con le proprietà logiche, il **CSS funziona semplicemente** — imposta `dir="rtl"` su html e `margin-inline-start` si capovolge automaticamente sul lato destro: ```html ``` ## Oltre RTL Le proprietà logiche gestiscono anche le modalità di scrittura verticale (ad es. alcuni layout tipografici dell'Asia orientale) e rendono `margin-inline: auto` un modo pulito per centrare indipendentemente dalla direzione. ## Fisico vs logico ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## I due assi - **inline** — la direzione in cui scorre il testo (orizzontale in inglese; l'asse di "lettura"). - **block** — la direzione in cui le righe si impilano (verticale in inglese; l'asse di "paragrafo"). ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` Per qualsiasi prodotto che viene fornito in più lingue, le proprietà logiche eliminano la necessità di mantenere fogli di stile RTL specchiati — un unico set di regole si adatta alla direzione di scrittura. Anche per i siti solo LTR, sono un modello mentale più pulito (inizio/fine, inline/block), e sono sempre più lo standard consigliato nei CSS moderni.