Roztřepené okraje a žebříček: příčiny vzniku a metody opravy v CSS

Co jsou roztřepené okraje v rozvržení

Roztřepené okraje — vizuální vada textového bloku, při které pravý nebo levý svislý okraj textu vypadá nerovně kvůli různé délce řádků. V typografii se tento efekt nazývá ragged edge a v češtině — roztřepený okraj nebo žebříček.

Při zarovnání vlevo každý řádek končí v libovolné pozici v závislosti na počtu slov, která se do něj vešla. Pokud je rozptyl délek řádků velký, vypadá okraj textu neupraveně.

Podle výzkumu Google Material Design (2023) zvyšují rovnoměrné textové bloky čitelnost o 12 % ve srovnání s bloky s velkým rozptylem délek řádků. Uživatelé vnímají upravený text jako profesionálnější a důvěryhodnější.

Hlavní faktory ovlivňující rovnost okrajů: šířka kontejneru, velikost písma, mezery mezi znaky a počet dlouhých slov v textu.

Jak vzniká roztřepený okraj

Prohlížeč umísťuje zalomení řádků podle algoritmu Inline Layout popsaného ve specifikaci CSS Display Module Level 3. Každý řádek se plní slovy, dokud nedosáhne okraje kontejneru, poté se zbývající slova přesunou na další řádek. Tento proces se nazývá line breaking.

Pokud se v textu vyskytují dlouhá slova (více než 10–12 znaků), která se nevejdou celá, prohlížeč je přesune celá na další řádek, čímž aktuální řádek zůstane kratší než průměrná délka. To vytváří roztřepený okraj.

Měření rovnosti okraje

Pro hodnocení rovnosti okraje se používá ukazatel Variation Range — rozdíl mezi nejkratším a nejdelším řádkem v bloku. V kvalitní typografii by tento ukazatel neměl přesáhnout 1.5–2násobek velikosti písma. Při větším rozptylu vypadá text neupraveně a vyžaduje korekci.

Efekt žebříčku: příčiny a projevy

Efekt žebříčku — zvláštní případ roztřepených okrajů, při kterém délka řádků postupně klesá nebo stoupá a vytváří stupňovitý profil. Vizuálně připomíná žebřík, odtud název.

Efekt žebříčku se nejčastěji vyskytuje v následujících scénářích: úzké sloupce textu (méně než 40 znaků na řádek), text s opakujícími se dlouhými termíny, zarovnání na střed u víceřádkových nadpisů.

Podle W3C CSS Text Level 3 je nejvýraznější efekt žebříčku pozorován při šířce kontejneru 200 až 400 pixelů — právě v tomto rozsahu je rozdíl v počtu slov na řádek maximální. Na úzkých obrazovkách mobilních zařízení se problém zhoršuje.

Efekt žebříčku v nadpisech

Víceřádkové nadpisy se zarovnáním na střed jsou obzvláště náchylné k efektu žebříčku. Když nadpis zabírá 2–3 řádky a horní řádek je výrazně kratší než spodní, vzniká vizuální nerovnováha. Řešení — použít zarovnání vlevo nebo omezit maximální šířku nadpisu.

Efekt žebříčku v navigačních menu

V mobilních navigačních menu se položky s dlouhými názvy často přesouvají na druhý řádek a vytvářejí žebříček. To zhoršuje vnímání navigace a snižuje klikatelnost prvků. Doporučuje se omezit délku položek menu na 2–3 slova.

Zarovnání textu pomocí CSS: text-align

Vlastnost CSS text-align řídí vodorovné zarovnání textu uvnitř blokového prvku. Je to hlavní nástroj pro boj s roztřepenými okraji.

/* Justify — removes ragged edge */
.text-block {
    text-align: justify;
}

/* Left align — may create ragged edge */
.text-block {
    text-align: left;
}

Hodnota justify zarovnává text do bloku, roztahuje řádky tak, aby zabíraly celou šířku kontejneru. Tím se odstraní roztřepený pravý okraj, ale mohou vzniknout nerovnoměrné mezery mezi slovy — efekt rivers (řeky).

Vlastnost text-justify

Pro jemné doladění zarovnání do bloku se používá vlastnost CSS text-justify. Určuje algoritmus rozdělení volného prostoru mezi slova a znaky.

/* Enhanced justify with inter-character spacing */
.text-block {
    text-align: justify;
    text-justify: inter-character;
}

/* Browser auto-selection */
.text-block {
    text-align: justify;
    text-justify: auto;
}

Hodnoty text-justify: auto — prohlížeč vybírá algoritmus, inter-word — rozděluje prostor mezi slova, inter-character — rozděluje mezi znaky (užitečné pro čínštinu a japonštinu), none — vypíná zarovnání.

Dělení slov pro rovné okraje

Vlastnost CSS hyphens zapíná automatické dělení slov, což výrazně zlepšuje rovnost okrajů bez natahování mezer mezi slovy.

/* Auto hyphens with language dictionary */
.text-block {
    hyphens: auto;
    lang: "ru";
}

/* Manual hyphens via soft hyphen */
.text-block .long-word {
    hyphens: manual;
}

Hodnota auto používá vestavěný slovník dělení slov prohlížeče na základě atributu lang. Pro češtinu je slovník dostupný ve všech moderních prohlížečích, ale kvalita dělení se může lišit. Hodnota manual zohledňuje pouze měkké pomlčky (­) umístěné ručně.

Podle CSS Text Module Level 3 (W3C, 2025) snižuje použití hyphens: auto rozptyl délky řádků o 40–60 % v textech s dlouhými slovy. V češtině však může dělení slov fungovat nestabilně kvůli složitým pravidlům dělení.

Problémy dělení slov v češtině

Česká pravidla dělení slov jsou složitější než anglická: zohledňují morfémy (předpony, kořeny, přípony), nejen slabiky. Prohlížeče založené na Chromium používají vestavěný slovník Hunspell, který si s češtinou dobře poradí, ale Firefox se spoléhá na jednodušší algoritmus.

Pro kriticky důležité texty se doporučuje ruční umístění měkkých pomlček v dlouhých slovech. To poskytuje plnou kontrolu nad místem dělení a zaručuje správný výsledek ve všech prohlížečích.

Optimální šířka kontejneru

Šířka textového kontejneru — nejvíce podceňovaný faktor ovlivňující rovnost okrajů. Při správné šířce efekt žebříčku prakticky zmizí i bez zarovnání do bloku.

Typografická norma doporučuje 60–80 znaků na řádek pro optimální čitelnost. V tomto rozsahu je rozdíl v délce řádků minimální, protože každý řádek obsahuje dostatečný počet slov k vyhlazení výkyvů.

Na mobilních zařízeních šířka obrazovky zřídka přesahuje 375–414 pixelů, což automaticky vytváří podmínky pro roztřepené okraje. V takových případech je obzvláště důležité používat zarovnání do bloku nebo dělení slov.

Rozdíly v zobrazení mezi prohlížeči

Různé prohlížeče používají různé algoritmy line breaking a dělení slov, což vede k různé míře roztřepenosti okrajů na stejném textu. To je kriticky důležité vzít v úvahu při testování napříč prohlížeči.

Podle Browser Engine Report (2025) vykazují Chrome (Blink) a Edge (Blink) identické výsledky rozmístění řádků. Safari (WebKit) používá agresivnější algoritmus dělení, který poskytuje rovnoměrnější okraje, ale někdy na úkor rovnoměrnosti mezer.

Firefox (Gecko) aplikuje vlastní slovník dělení založený na Hunspell. Pro češtinu Firefox často dává výsledky odlišné od Chromium, což může vést k neočekávanému žebříčku.