Dělení slov na přání

CSS nabízí dělení slov pomocí word-wrap: word-break, ale tato možnost rozdělí slovo přesně tam, kde končí řádek. Což pak v běžném textu nevypadá dobře a hlavně negramaticky.

Tento dlouhý text se nev
ejde na jeden řádek a pr
oto bude rozdělen na tři.

Od roku 1999 ale existuje Unicode a HTML specifikace, která umožňuje vložit do textu tzv. neviditelné mezery (zero-width space), které označí místa, kde je možno slovo rozdělit a přitom se nezobrazí, pokud je slovo na jedné řádce. Alternativnou je pak měkký rozdělovník (soft hyphen), který kromě rozdělení slova vloží na konec řádky pomlčku, která se běžně používá pro rozdělení slov.

Tento dlouhý text se neve-
jde na jeden řádek a pro-
to bude rozdělen na tři.

V Unicode jde o znaky U+200B (mezera) a U+00AD (rozdělovník), kde mezeru můžete do HTML vložit pomocí entity &#8203; nebo tagu <wbr> (word break) a rozdělovník pomocí entit &#173; nebo &shy; (soft hyphen).

Ve Windows můžete měkký rozdělovník vložit do textu, pokud podržíte levý ALT a na numerické klávesnici (při zapnutém NumLock) stisknete (postupně) 0, 1, 7 a 3 (tedy ALT + 0173). Je důležité jako první stisknout nulu, aby Windows poznaly, že chcete vkládat Unicode znak (v opačném případě by vložili ANSI znak, což může být španělský vykřičník, turecké š, apod. podle verze Windows).

Ten&shy;to dlou&shy;hý text se ne&shy;ve&shy;jde na je&shy;den řá&shy;dek a pro&shy;to bu&shy;de roz&shy;dě&shy;len na tři.

Pozor na to, že pokud budete takový text vkládat do HTML pomocí jQuery (nebo podobné knihovny), metoda text() nahradí entity a ty se přímo zobrazí. Aby volitelný rozdělovník správně zafungoval, musíte ho do DOMu vložit metodou html() nebo přímo použít Unicode znak.

//zobrazí entity místo rozdělovníků:
//NEPOUŽÍVAT!!!
$('#text').text('Dlou&shy;hý te&shy;xt');

//správně zobrazí entity:
$('#text').html('Dlou&shy;hý te&shy;xt');

//použití textu s unicode rozdělovníky:
$('#text').text('Dlou­hý te­xt');
$('#text').text().length; // = 13
//vrátí 13 znaků, i když obsahuje jen
//10 viditelných písmen a mezeru
//Rozdělovník napíšete ALT + 0173 (NumPad)

$('#text').text('Dlou\u00ADhý te\u00ADxt');
//Alternativa s vložením unicode znaku
//pomocí kódu

Ten­to­Od­sta­vec­Má­Slo­va­Od­dě­le­na­Vo­li­tel­ným­Roz­dě­lov­ní­kem­A­Na­víc­Je­Roz­dě­lov­ník­Do­pl­něn­Do­Dlou­hých­Slov­Tak­že­Se­Na­Kon­ci­Řád­ku­Roz­dě­lí­Správ­ně­­I­Uprostřed­Slov.

Zkuste změnit velikost okna prohlížeče nebo otočit displej telefonu nebo tabletu, abyste viděli, že text se pokaždé zalomí jinde.

Alternativně můžete doplnit dlouhý text o zkrácení trojtečkou.

Řízení přes CSS

Vložené rozdělovníky můžete ještě dále řídit pomocí CSS vlasnosti hyphens, která má hodnoty none, manual a auto.

Hodnota none znamená, že prohlížeč bude neviditelné mezery a rozdělovníky ignorovat. Lze tedy použít v případě, že máte texty připravené s nimi ale někde text rozdělovat nechcete (např. uvnitř v nadpisech nebo prvku code). Hodnota manual znamená, že prohlížeč bude rozdělovat slova pouze tam, kde najde neviditelnou mezeru nebo rozdělovník.

Hodnota auto pak znamená, že prohlížeč může využít vlastní slovník a rozdělovníky doplnit i tam, kde v textu nejsou. Český slovník je ale přítomen pouze v IE10+ a prohlížeče založené na Webkit (Safary, Chrome, Opera, atd.) a Gecko (Firefox apod.) tuto hodnotu ignorují.

Výchozí hodnota pro hypnes je buď auto tam, kde je to podporováno (tedy IE10+), nebo manual (ostatní prohlížeče). Nastavovat hodnotu na auto tedy nemá smysl, protože to si prohlížeče ohlídají sami. Smysl mají hodnoty manual, pokud chcete vypnout automatické rozdělení (např. protože máte speciálně připravené texty pro responzivní layout), nebo none, pokud chcete rozdělení kompletně vypnout.

Online tool

Pro doplnění neviditelných měkkých rozdělovníků do textu můžete použít můj online nástroj Shy – The hyphenation tool.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *