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.
| 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
| Prohlížeč | Podpora ve verzích | jaké dělí jazyky |
|---|---|---|
| Edge | ve starších verzích s prefixem -ms-hyphens, v nových verzích není |
češtinu i angličtinu |
| Internet Explorer | - | |
| 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 88 i na Windows (jinak od 55) | angličtinu (čeština mi ve verzi 88 stále nefunguje) |
Příklady
<html>
<html>
<style>
body {
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
</style>
...
<body lang="cs">
rozdělovaný text
Poslední aktualizace 22. dubna 2019
Reklama
