Proč na webu nikdy nezarovnávat text do bloku (a proč to WordPress schoval)

Proč na webu nikdy nezarovnávat text do bloku (a proč to WordPress schoval)

Možná se vám to už stalo. Píšete článek nebo popisek produktu ve WordPressu, chcete, aby to vypadalo „uhrazeně“ jako v knížce, a hledáte tlačítko Zarovnat do bloku (Justify). A ono nikde.

Není to chyba. WordPress (a moderní webdesign obecně) se vás tím snaží ochránit před velkou typografickou chybou. Pojďme si říct, proč zarovnání do bloku na web nepatří a proč byste se měli držet klasického zarovnání vlevo.

Rozdíl mezi Wordem a webovým prohlížečem

V textovém editoru (Word, InDesign) zarovnání do bloku funguje skvěle. Proč? Protože tyto programy umí pokročile pracovat s písmem a hlavně – umí automaticky dělit slova. Když se slovo na konec řádku nevejde, program ho rozdělí pomlčkou, zbytek odsune na další řádek a mezery mezi slovy zůstanou přirozené.

Webový prohlížeč to (zatím) pořádně neumí.

Ačkoli existují CSS vlastnosti pro dělení slov, jejich podpora napříč prohlížeči a jazyky (zvláště češtinou) není stoprocentní. Když tedy na webu vynutíte zarovnání do bloku, prohlížeč musí text roztáhnout od kraje ke kraji jinak: zvětší mezery mezi slovy.

Problém č. 1: Řeky bílého místa

Když prohlížeč roztáhne mezery, vznikají v odstavci nepravidelné díry. Typografové tomu říkají „řeky“. Jsou to svislé bílé cestičky, které protékají textem dolů.

Nejenže to vypadá ošklivě a amatérsky, ale ruší to při čtení. Oko čtenáře podvědomě sjíždí po těchto řekách dolů místo toho, aby plynule četlo řádek zleva doprava.

Problém č. 2: Mobilní katastrofa

Tohle je ten nejdůležitější důvod. Dnes si přes 60 % lidí prohlíží váš web na mobilu. Displej telefonu je úzký.

Představte si, že máte na řádku dlouhé slovo (např. „neobhospodařovatelnými“). Pokud máte text zarovnaný do bloku na úzkém displeji:

  1. Slovo zabere většinu řádku.

  2. Vedle něj zbyde místo jen pro spojku „a“.

  3. Aby prohlížeč dodržel zarovnání k oběma okrajům, „vystřelí“ spojku „a“ doleva a dlouhé slovo doprava.

  4. Mezi nimi vznikne obří mezera.

Výsledkem je text, který vypadá rozbitě, nesourodě a na mobilu se v podstatě nedá číst.

Problém č. 3: Přístupnost (Accessibility)

Pro lidi s poruchami čtení, jako je například dyslexie, je text zarovnaný do bloku noční můrou.

  • Nepravidelné mezery ztěžují orientaci v textu.

  • Oko se hůře vrací na začátek nového řádku, protože všechny řádky končí na stejném místě (chybí vizuální záchytný bod, kterým je u zarovnání vlevo „zubatý“ okraj).

Zarovnání vlevo (tzv. na praporek) je pro lidský mozek nejpřirozenější a nejlépe čitelné.

Jak to vyřešit v Divi, Elementoru nebo Gutenbergu?

Odpověď je jednoduchá: Nesnažte se to měnit.

Výchozí nastavení všech moderních šablon je zarovnání vlevo. Je to standard, na který jsou uživatelé internetu zvyklí. Působí to čistě, moderně a funguje to na všech zařízeních.

Pokud přesto máte klienta, který na tom trvá (protože „se mu to líbí“), je dobré mu vysvětlit výše uvedené body. Pokud ani to nepomůže, musíte sáhnout po CSS, protože většina editorů už tlačítko z rozhraní odstranila.

V CSS se to dělá takto: text-align: justify;

Ale upřímně? Raději to nedělejte. Vaše texty (i vaši čtenáři) vám poděkují.

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte email, ať o nic nepřijdete!

Nespamujeme! Další informace naleznete v našich zásadách ochrany osobních údajů.

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

Diskuze

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

Nákupní košík
Přejít nahoru