CSS – Logické vlastnosti

Směr písma se v různých jazycích liší. My píšeme zleva doprava, jinde to může být zprava doleva nebo shora dolů. Určité charakteristiky na tom mohou záležet.

Řekněme, že za textové odkazy chci připojovat ikony. To znamená, že potřebuji za odkazem vynechat kus volného místa a do něj umístit ikonu. Ovšem „za odkazem“ pro nás znamená vpravo od něj, zatímco při psaní zprava doleva to bude vlevo, zatímco při zápisu shora dolů pod ním.

Aby se usnadnilo fungování ve vícejazyčném prostředí, byly do CSS přidány tak zvané logické vlastnosti, jejichž chování závisí na směru písma. Jejich základem jsou dva logické směry:

• inline je směr řádků, u nás vodorovně,
• block je na něj kolmý směr, ve kterém se řadí bloky (odstavce), v našem případě svisle.

Místo width můžete pro šířku použít inline-size (velikost ve směru řádků) a místo height poslouží block-size. Pro písmo psané shora dolů si svou roli prohodí a inline-size bude rozměr ve svislém směru, zatímco block-size se stane rozměrem vodorovným.

Analogicky jsou pro stanovení pozice k dispozici pojmy:

• start je na začátku; u nás ve vodorovném směru vlevo, ve svislém nahoře,
• end je na konci; vodorovně vpravo a svisle dole.

Jejich kombinací vzniknou naše obvyklé směry:

Například vynechání mezery 0.75rem pod odstavcem při použití logických vlastností zajistí:

p {
    margin-block-end: 0.75rem;
}

O vynechání zmíněného volného místa pro ikonu za odkazem by se postaralo pravidlo:

a {
    padding-inline-end: 2em;
}

Kompletní přehled těchto logických vlastností poskytuje stránka CSS logical properties and values.

Obecně se doporučuje dávat jim přednost před left, rigth, top a bottom. Jsou sice delší, ale univerzálnější.

Nicméně pokud nemáte ambice vyvíjet CSS s globálním dosahem a budou vám stačit jazyky používané v našem okolí, dokážete docela dobře žít bez nich.