Hyphens

CSS vlastnost hyphens určuje možnosti dělení slov mezi řádky. Zatím je to dost bída, umí to dělit jenom anglické texty.

hyphens
hodnoty výška prvku
none slova se mezi řádky nikdy nedělí, ani když v sobě mají entity ‐ a ­
auto v prvku se dělí slova mezi řádky podle jazyka nastaveného prvku
manual slova se mohou dělit tam, kde jsou entity ­ a ‐

Dělení mezi řádky se určí podle pravidel nebo slovníků, které mají prohlížeče nebo operační systémy zabudované.

Pro dělení slov je docela důležité nastavení jazyka. Dělá se to obecným atributem lang, takže např. <body lang="cs"> nebo <div lang="en">. Podle mých zkušeností není dnes (jaro 2019) implementováno dělení slov v jiném jazyce než angličtině. Jinak řečeno nefunguje české dělení slov.

Nefunkčnost českého dělení slov ve Firefoxu se dá oklamat tím, že se i pro český text zapne anglické dělení. Ve většině případů funguje solidně i na češtinu (dělí slova mezi slabikami), ale občas udělá chybu, např. slovo "rozkládají" dělí jako "rozk-ládají" namísto správného dělení "roz-kládají". Takže je to blbý a zbytečný hack.

Safari umí s nastavením -webkit-hyphens dělit celkem slušně český text. I pokud textu nenastavíte lang, poradí si dobře a dělí správně podle českých pravidel.  

Na webu dlouho možnost dělení slov nebyla, takže jí uživatelé odvykli. Pokud to nevyžaduje charakter textu (typicky tištěné texty), doporučuji dělení slov nepoužívat. Na internetech totiž není problém s množství vertikálního místa. Tam dole je spousta místa, uživatelé umějí rolovat.

Kromě CSS vlastnosti hyphens existuje dále vlastnost hyphenate-limit-chars, která má 3 číselné parametry. Nezkoumal jsem to, podpora bude asi slabá, ale má to umět omezovat počet řádků, ve kterých se po sobě objevuje rozdělení, což v klasické typografii není dobře.

Vlastost hyphens doporučuji zvážit v případě diskusí a jiných textů, kde nemáte kontrolu nad obsahem a kde se můžou vyskytnout dlouhé řádky bez mezer, které rozsypou obsah stránky. Já v takovém případě používám styl word-wrap: breadk-words, ale hyphens je další alternativa.

Podpora

Podpora vlastnosti hyphens
Prohlížeč Podpora ve verzích jaké dělí jazyky
Edge s prefixem -ms-hyphens češtinu i angličtinu
Internet Explorer ne -
Firefox od verze 43 jen angličtinu
Opera prý od  verze 44 nevím
Safari s prefixem -webkit-hyphens češtinu i angličtinu
Chrome od verze 55, ale ne na Windows nevím

Příklady

<html>
<html>
<style>
body {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}
</style>
...
<body lang="cs">
rozdělovaný text

test css vlastnosti hyphens

Poslední aktualizace 22. dubna 2019

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.