CSS `hyphens`

Vlastnosti hyphens ovlivňuje rozdělování slov spojovníkem na konci řádku.

29. listopadu 2013

3 minuty

V HTML je možné určitými znaky vytvořit uprostřed slova místo, kde se může zalomit řádek uprostřed slova.

entitou ,
číselnou entitou ,
číselnou entitou ,
další mezery jsou na Wikipedii.

<p>
  Text odstavce, který se může za&shy;lo&shy;mit uprostřed slova „zalomit“.
</p>

CSS vlastnost hyphens může nabývat hodnoty:

none: Prohlížeč bude příležitosti k zalomení (např. entitu  uprostřed slova) ignorovat.
manual: Výchozí hodnota. Slova se zalamují v místech, kde je příležitost vytvořená zalamovací entitou.
auto: Prohlížeč může slovo rozdělit spojovníkem, kde uzná za vhodné. Prohlížeče, které umí rozdělovat slo-va po slabikách, při nastavení hyphens: auto toto rozdělování zapnou i bez nutnosti zanést kód rozdělovacími entitami.

Zajímavá je kombinace hyphens: auto s text-align: justify (zarovnání do bloku). Výsledný text vypadá lépe, protože zalamování slov nevytváří takové řeky (nepěkně velké mezery mezi slovy).

Podpora

Momentálně nejlepší podpora (s prefixy) pro český text je v IE 10 a IE 11. Opera a Chrome nastavení hyphens, zdá se, ignoruje. A ve Firefoxu se u češtiny chová manual i auto stejně (v jiných jazycích rozdělovat umí).

Živá ukázka (zdroj českého lipsum textu), varianta zarovnaná do bloku.

Doporučení

Příliš nedoporučuji zanášet kód entitami pro rozdělování. Může to způsobit problém při hledání slov na stránce, při kopírování textu nebo (možná) u vyhledávačů (související diskuse Má někdo zkušenosti s entitou shy?).