Što su CSS logička svojstva i zašto su važna za internacionalizaciju?

Question

Accepted Answer

**Logička svojstva** opisuju raspored u smislu **smjera toka sadržaja** (početak/kraj, inline/blok) umjesto fizičkih smjerova (lijevo/desno/gore/dolje). To omogućava jednom stilskom listu da se automatski prilagodi jezicima napisanim s desna na lijevo (arapski, hebrejski) ili od vrha prema dnu. ## Fizičko nasuprot logičkom ```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; } ``` ## Dvije osi - **inline** — smjer toka teksta (vodoravno na engleskom; os "čitanja"). - **blok** — smjer slaganja redaka (okomito na engleskom; os "paragrafa"). ```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 */ ``` ## Zašto je ovo važno za i18n Sa fizičkim svojstvima, podrška za arapski znači pisanje cijelog drugog skupa zrcalnih stilova (`margin-left` → `margin-right`, itd.) iza `[dir="rtl"]`. Sa logičkim svojstvima, **isti CSS se jednostavno koristi** — postavite `dir="rtl"` na html i `margin-inline-start` se automatski prebacuje na desnu stranu: ```html ``` ## Izvan RTL-a Logička svojstva također rukuju vertikalnim režimima pisanja (npr. neki istočnoazijski tipografski) i čine `margin-inline: auto` čistim načinom centriranja bez obzira na smjer. ## Zašto je to važno Za bilo koji proizvod koji se isporučuje na više jezika, logička svojstva uklanjaju potrebu za održavanjem zrcaljenih RTL stilskih listova — jedan skup pravila prilagođava se smjeru pisanja. Čak i za LTR stranice to je jasniji mentalni model (početak/kraj, inline/blok), i sve više su preporučena zadana vrijednost u modernom CSS-u.