CSS hyphens

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?).

Odkazy

• W3C: CSS specifikace hyphens
• Hyphenator (JS doplňující entity ­)