Pokud jste již používali Flexbox a/nebo Grid, jistě jste si všimli, že místo hodnot jako align:top nebo align:left používají hodnoty start a end. To je proto, že tyto nové návrhy již byly vytvořeny s přihlédnutím na logické vlastnosti místo dříve používaných fyzických vlastností.

A stejně jako Flexbox a Grid dochází k postupnému zavádění logických vlastností u dalších definic jako je padding, margin, text-align, atd.

Úvod: Fyzické vs. Logické

Původní návrh CSS byl určen pro západní země, které čtou text zleva doprava a zhora dolu. Proto nebyl problém používat hodnoty jako vlevo a nahoře, protože každý věděl, která strana označuje začátek a která konec textu.

S postupným rozšířením internetu a webů do Asie začali vyvstávat problémy s tím, že v západní Asii a severní Africe se texty (v arabštině) čtou a píší zprava doleva, ve východní Asii se zase řádky čtou shora dolu a v japonštině se dokonce odstavce a stránky posouvají zprava doleva.

Zprvu to nebyl problém, protože stránky v arabštině dělali Arabové a stránky v japonštině Japonci, takže těm odlišné pojetí vlevo a nahoře nedělalo problém… a nebo si prostě zvykly na to, že se stránka scroluje shora dolu místo zprava doleva.

Dnes ale díky internacionalizaci není výjimkou, že jeden programátor (například Čech) udělá jednu stránku, které se pak přeloží do angličtiny, ruštiny, arabštiny a japonštiny a již při návrhu je potřeba počítat s tím, že v každém jazyce může být rozložení stránky jiné. V důsledku pak může dojít k tomu, že v japonštině bude patička stránky u levého okraje a bude tedy potřeba použít margin-left místo margin-bottom pro její umístění (vytvoření místa na konci stránky).

A zde právě přichází změna chápání CSS z fyzických (tedy vlevo a nahoře) na logické (začátek textu, konec stránky, atd.) vlastností.

Důležité ale je si uvědomit, že v současné době (2018/2019) stále probíhá převod CSS z fyzických na logické vlastnosti a tak zatímco některé jsou již plně podporovány ve všech prohlížečích (již zmíněný Flexbox a Grid), tak jiné ještě nemají ani návrh změn (draft) a níže uvedené je víceméně jen logická spekulace.

Block vs. Inline

Jak tedy bude nově CSS označovat dříve používané vlevo a nahoře?

Jednoduše tak, že se použijí již známé hodnoty z vlastnosti display, kde block dříve znamenalo uspořádání prvků (odstavců) zhora dolu a inline uspořádání (textu) zleva doprava. Pro oba směry se pak použijí hodnoty start a end, které budou relativní vzhledem k současnému toku textu a odstavců.

Pro stávající západní uspořádání tedy platí:

• nahoře => block-start
• dole => block-end
• vlevo => inline-start
• vpravo => inline-end

Naopak pro japonské uspořádání stránky bude platit:

• block-start = vpravo
• block-end = vlevo
• inline-start = nahoře
• inline-end = dole

Díky tomu může určit, že třeba odsazení textu od začátku odstavce bude 1em nezávisle na tom, zda se řádky ubírají zleva doprava nebo shora dolu.

V situacích, jako je text-align, kdy jsou hodnoty předem vázané na určitý směr toku, se budou používat pouze hodnoty start a end a jejich význam bude určen jinou vlastností.

Směr toku

Kvůli určení směru toku stránky přináší CSS nové vlastnosti (ve skutečnosti byly již prvně navrženy již v roce 2003 a tak částečně fungují od IE6).

Vlastnost writing-mode určuje, v jakém směru se bude posouvat stránka a kde je tedy „nahoře“ (v novém pojetí tedy začátek stránky). Podporována je v Edge (tedy IE12+), Chrome 48 (vč. Safari 11 a Opera 35) a Firefox 41. S prefixem -webkit-writing-mode pak doplníte podporu pro Chrome 8, Safari 5, Operu 15, a Android 3.x a 4.x).

Směr toku textu zleva doprava (západní) a zprava doleva (arabské) určuje vlastnost direction, která je podporována již od IE6.

//Směr textu zleva doprava (západní/evropský)
html { 
    writing-mode: horizontal-tb;
    direction: ltr; /* left-to-right */
}
//Směr textu zprava doleva (arabština)
html {
    writing-mode: horizontal-tb;
    direction: rtl; /* right-to-left */
}
//posun stránky zprava doleva (japonština)
html { 
    writing-mode: vertical-rl; 
}
//posun stránky zleva doprava (mongolština)
html { 
    writing-mode: vertical-lr; 
}

Jak je vidět, směr toku zdola nahoru není potřeba u blokového ani inlinového uspořádání, takže vlastnosti horizontal-bt, ttb ani btt neexistují.

Velikost prvků

Základními vlastnostmi všech prvků jsou šířka (width) a výška (height). Ty samozřejmě také odkazují na západní uspořádání, protože třeba v Japonsku je výška řádky (tedy shora dolu) ve skutečnosti určuje délku řádky (jelikož se řádek čte zhora dolu).

Vlastnost určující velikost ve směru bloků (tedy výška) bude nově block-size a velikost ve směru toku textu (dříve šířka) bude inline-size. Tytéž názvy budou použity i pro minimální a maximální rozměry.

//Fyzické rozměry
div {
    width: 100%;
    height: auto;
    min-height: 2em;
}
//Logické rozměry
div {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 2em;
}

Okraje bloků

Základní vlastnosti margin, padding a border určují velikost okrajů bloků (DIV, odstavce, obrázky, atd.). Z původně používaných margin-left a padding-top se nyní stanou blokové a inlinové vlastnosti, takže nově budeme používat margin-inline-start a padding-block-start.

p {
    /* "top" and "bottom" text margin */
    margin-block-start: 1em;
    margin-block-end: 0.5em;

    /* "left" and "right" text padding */
    padding-inline-start: 5px;
    padding-inline-end: 0;

    /* border only on "top" */
    border: 0px solid black;
    border-block-start-width: 1px;
}

Momentálně není jasné, jak by se měl změnit zkrácený zápis pomocí margin, padding a border (resp. jak odlišit fyzické uspořádání od logického). Zatím je možné zapsat společně jen protilehlé hodnoty vlastnostmi jako border-block, margin-inline, padding-block, atd.

Pozice

Vlastnost position se spojuje přímo s vlastnostmi left, top, bottom a right, které určují relativní posun nebo absolutní umístění. Pro logické vlastnosti tedy bylo potřeba vymyslet nové slovo, které by bylo možnost použít (protože vlastnosti block-start a inline-start by nedávaly moc smysl).

Pozice prvku se tedy nově určuje vlastností inset (což v angličtině označuje předmět vložený přes něco jiného; např. detail mapy, část mozaiky, atd.). Díky tomu se ale dá celá pozice zkrátit do jediné vlastnosti inset, která (podobně jako třeba margin) uvádí hodnoty ve směru hodinových ručiček počínaje block-start a konče inline-start:

//fyzické
div {
    position: absolute:
    top: 1em;
    height: 2em;
    left: 0;
    right: 0;
    width: auto;
}
//logické
div {
    position: absolute;
    inset-block-start: 1em;
    block-size: 2em;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inline-size: auto;
}
//logické zkrácené
div {
    position: absolute;
    inset: 1em 0 auto 0;
    inline-size: auto;
    block-size: 2em;
}

Obtékání

Obtékání pomocí float používá hodnoty left a right, které označují zarovnání vzhledem k začátku nebo konci řádku. Proto se také nově nahradí hodnotami inline-start a inline-end.

Úplně stejné hodnoty pak platí i pro vlastnosti clear, která obtékání ukončuje.

I když by možná šlo diskutovat o tom, zda by nestačili hodnoty start a end, jelikož obtékání nelze nastavit hodnoty top a bottom, ale tím, že je v hodnotě zahrnuto slovo inline je jasně dáno, ve kterém směru float funguje.

img.left {
    float: inline-start;
}
img.right {
    float: inline-end;
}

Zarovnání textu

Pro zarovnání textu se používá vlastnost text-align, která má hodnoty left a right. Ty se nyní mění na start a end. Díky tomu již nemusíte hlídat, zda je zrovna tok textu zleva doprava nebo obráceně a budete vědět, kam bude text zarovnán.

p {
    text-align: start;
}
p.author {
    text-align: end;
}

Zarovnání pozadí

Pro definici background můžete používat hodnoty left, right, top a bottom, které určují, ke kterému okraji se obrázek na pozadí zarovná.

Zatím není rozhodnuto, jak by se měla tato definice změnit, a za tím je k dispozici jen návrh od Mozzily na nové vlastnosti background-position-block a background-position-inline a hodnotami start a end, které ale mají problém se zkrácenou definicí, protože ze zápisu background: url(...) start end; není jasné, kam se má obrázek zarovnat (na rozdíl od background: url(...) top right;, kde je to jasné).

Lepší by bylo použít stávající background-position s hodnotami block-start a inline-end, které lze bez problémů použít i ve zkrácené verzi.

TextArea

Input typu <textarea> má vlastnost resize, která určuje, jak může uživatel (v novějších prohlížečích) měnit velikost daného pole.

Hodnoty jsou both (oba směry), none (nelze měnit), vertical a horizontal. Pro logické vlastnosti se vertical mění na inline a horizontal na block (hodnoty both a none zůstávají).

Scroll Snap

Nová CSS vlastnosti Scroll Snap již byla navržena s ohledem na logické vlastnosti, takže pro určení přichycení můžete použít buď hodnoty X a Y (fyzické) nebo block a inline (logické).

Závěr: podpora

Jak již bylo několikrát řečeno, vlastnosti layoutů Flexbox a Grid fungují ve všech současných prohlížečích (IE11 a starší  nepočítaje). Stejně tak funguje i vlastnost writing-mode (direction funguje od IE6).

Trochu horší podporu mají vlastnosti block-size/inline-size, margin, padding, border a text-align, které fungují ve všech prohlížečích kromě IE a Edge 12 – 18; nový Edge 79+ používající Chromium jádro je již samozřejmě podporuje. Některé okrajové prohlížeče (UC, QQ, Baidu, Opera Mobile, apod.) podporují vlastnosti s prefixem -webkit-*. Aktuální stav viz CanIUse.

Vlastnosti float, position (resp. inset) a textarea (resize) fungují zatím jen ve Firefoxu 55+ a Firefox 68+ pro Android. Aktuální stav viz CanIUse.

A ostatní (jako background) zatím nefungují nikde, protože není jasné, jak by měli fungovat.