Co jsou logické vlastnosti CSS a proč jsou důležité pro internacionalizaci?

Question

Accepted Answer

**Logické vlastnosti** popisují rozvržení v podmínkách **směru toku obsahu** (začátek/konec, inline/blok) místo fyzických směrů (vlevo/vpravo/nahoře/dole). To umožňuje jedné šabloně stylů, aby se automaticky přizpůsobila jazykům psaným zprava doleva (arabština, hebrejština) nebo shora dolů. ## Fyzické versus logické ```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; } ``` ## Dvě osy - **inline** — směr, kterým teče text (vodorovný v angličtině; osa "čtení"). - **block** — směr, kterým se skládají řádky (svislý v angličtině; osa "odstavce"). ```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 */ ``` ## Proč je to důležité pro i18n S fyzickými vlastnostmi znamená podpora arabštiny psaní celé druhé sady zrcadlených stylů (`margin-left` → `margin-right` atd.) za `[dir="rtl"]`. S logickými vlastnostmi **stejné CSS prostě funguje** — nastavte `dir="rtl"` na html a `margin-inline-start` se automaticky obrátí na pravou stranu: ```html ``` ## Mimo RTL Logické vlastnosti také zvládají svislé režimy psaní (např. některá východoasijská sazba) a dělají `margin-inline: auto` čistým způsobem, jak vycentrovat bez ohledu na směr. ## Proč to je důležité Pro jakýkoli produkt, který se spouští v několika jazycích, logické vlastnosti eliminují potřebu udržovat zrcadlené RTL šablony stylů — jedna sada pravidel se přizpůsobí směru psaní. I pro weby pouze s LTR jsou to čistší mentální model (začátek/konec, inline/blok) a v moderním CSS jsou to stále více doporučovanou výchozí hodnotou.