Slovo rozlomené uprostřed

Kontrola projde textové uzly na vykreslené stránce a u každého, který se zalomil na víc řádků, dopočítá znak, na kterém řádek přeskočil. Dělá to půlením nad obálkami jednotlivých znaků (Range.getClientRects()), ne odhadem z šířky písma.

Teprve pak se rozhoduje, jestli je ten zlom vada. Vada je jen zlom uvnitř slova. Zlom na mezeře, spojovníku, lomítku, tečce nebo měkkém dělení (­) je běžná typografie a nález nevznikne.

Tři výjimky navíc, bez kterých by kontrola hlásila nesmysly: dělení zapnuté přes hyphens: auto je dělení slova, ne jeho rozlomení; písma, která se lámou po znacích (čínština, japonština, korejština, thajština, laoština, khmerština, barmština), se tak lámou správně; a text schovaný jen pro čtečky obrazovky (.sr-only) se neměří vůbec.

Prahy jsou v config/design.json (wordBreak): jak krátký smí být zbytek slova, aby se nález ještě hlásil, a kolik nálezů smí jedna stránka v jedné šířce vydat. Nález je varování a do skóre designu se nepočítá.

Co kontrola nedělá: neposuzuje, jestli je zalomení hezké; nepozná rozdíl mezi vlastním jménem a běžným slovem; a nevidí text vykreslený do obrázku nebo na plátno.

Na viditelnost v odpovědích AI to vliv nemá. Zalomení řádku vzniká až při vykreslení v prohlížeči; v HTML je slovo celé a jazykový model čte HTML, ne obrázek stránky.

Užitek je v čitelnosti pro člověka. Slovo rozseknuté uprostřed čtenář musí složit ze dvou řádků, a na mobilu, kde je sloupec úzký, se to na jedné obrazovce stane i desetkrát.

Skoro vždycky za tím stojí jedna vlastnost v CSS. overflow-wrap: anywhere, overflow-wrap: break-word a word-break: break-all řeší jiný problém (dlouhou adresu, která by přetekla z rámečku) a řeší ho tak, že dovolí rozseknout jakékoli slovo. Když se pak zúží sloupec, doplatí na to i běžný text. Ve výchozím nastavení (overflow-wrap: normal) prohlížeč slovo uprostřed nerozlomí nikdy.

Souvislost s normou netvrdíme. WCAG nemá kritérium, které by rozlomené slovo zakazovalo. Je to doporučení z praxe, ne požadavek.

Nejdřív najděte, kde se agresivní zalamování zapíná; bývá to jedno pravidlo zděděné na celý web:

/* Tohle rozláme KAŽDÉ slovo, které se nevejde. */
.karta p {
  overflow-wrap: anywhere;
}

Pak ho zúžete jen na to, kvůli čemu vzniklo, a běžnému textu nechte normální zalamování:

.karta p {
  overflow-wrap: normal;
}

/* Jen tam, kde se opravdu objevují dlouhé adresy a kódy. */
.karta .adresa,
.karta code {
  overflow-wrap: anywhere;
}

• Častá skrytá příčina: položka flexu nebo mřížky, která se nechce zúžit. Výchozí min-width: auto jí nedovolí být užší než její obsah, takže vývojář sáhne po overflow-wrap: anywhere. Správná oprava je min-width: 0 na té položce.
• Potřebujete-li dělit slova, dělte je pořádně: hyphens: auto a k tomu správné lang na <html> (bez něj prohlížeč neví, který slovník použít). Vznikne dělení se spojovníkem, ne rozlomené slovo.
• Ruční dělení jen tam, kde na tom záleží: ­ uvnitř slova nabídne prohlížeči místo, kde smí dělit, a jinde nechá slovo vcelku.
• Nezužujte písmo. Menší písmo problém posune o pár pixelů dál a zhorší čitelnost všem.

Pozor na to, že u čínštiny, japonštiny a korejštiny je zlom mezi znaky normální; tam žádný nález nečekejte a word-break: break-all je pro tyhle jazyky legitimní volba.