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 &shy; 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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře