České diakritické znaky — správná reprodukce na webu
Jak zajistit, aby se háčky a čárky zobrazily správně ve všech prohlížečích a zařízeních
Správné zobrazení českých diakritických znaků na webu není tak jednoduché, jak by se mohlo zdát. Když uživatelé vidí místo “čeština” něco jako “Äeština” nebo “?eština”, je to problém, který ovlivňuje nejen vzhled webu, ale také důvěru v něj. Věříme, že máte právo mít svůj web v češtině bez těchto problémů.
V tomto článku se podíváme na konkrétní technické řešení. Nejde nám o teoretické pozadí — jde o to, co opravdu funguje. Ukážeme vám, jak správně nastavit kódování, co dělat s CSS a proč se některé znaky stále zobrazují špatně. Plus vám dáme seznam nástrojů a postupů, které vám ušetří hodiny debugování.
Kde se problémy berou
Existuje pět základních míst, kde se věci mohou pokazit. Nejčastěji nejde o jeden problém, ale o kombinaci více věcí, které se navzájem ovlivňují.
1. Kódování HTML dokumentu
Váš HTML soubor musí explicitně říci prohlížeči, že obsahuje znaky v UTF-8 kódování. Bez toho si prohlížeč myslí, že je soubor v nějakém starém kódování a znaky se zobrazují špatně. Stačí jeden řádek na začátku HTML dokumentu:
<meta charset="UTF-8">
2. Nastavení CSS souboru
Pokud máte CSS v externím souboru, měl by také deklarovat UTF-8. Na začátek CSS souboru přidejte:
@charset "UTF-8";
Věřím, že to zní pedantské, ale je to důležité. Bez toho můžete mít problémy s CSS obsahující české znaky — například v atributech
content:
nebo v komentářích.
Praktické řešení krok za krokem
Pojďme si to udělat správně od začátku. Tady je konkrétní postup, který funguje.
Nastavte HTML
Na samý začátek HTML dokumentu (hned za otevírací tag
<head>
) umístěte meta tag s kódováním. Toto je povinné.
Uložte soubory v UTF-8
V editoru (VS Code, Sublime Text, apod.) se ujistěte, že ukládáte soubory jako UTF-8 bez BOM. Najdete to obvykle v pravém dolním rohu editoru nebo v menu File Save with Encoding.
Přidejte @charset do CSS
Na absolutní začátek CSS souboru (před všechna ostatní pravidla) přidejte
@charset "UTF-8";
Ověřte na serveru
Když nahrajete soubory na server, ujistěte se, že server vrací správný Content-Type header s UTF-8 kódováním. Můžete to ověřit v DevTools Network Headers.
Pokročilé techniky a běžné problémy
Pokud máte základní nastavení hotovo a znaky se vám stále zobrazují špatně, je tu něco specifického. Tady jsou situace, které jsme viděli stokrát.
Database a MySQL
Pokud čtete data z databáze, musíte zajistit, aby byla také v UTF-8. Při připojení k MySQL přidejte:
SET NAMES utf8mb4
. Bez toho se data z databáze budou zobrazovat špatně, i když vše ostatní máte správně.
JavaScript a formáty dat
Když manipulujete textem v JavaScriptu, buďte opatrní. Není to obvykle problém, ale když pracujete s regulárními výrazy nebo ořezáváte stringy, zkontrolujte, že neřežete uprostřed vícebytového znaku.
HTTP Headers
Server by měl odesílat header:
Content-Type: text/html; charset=UTF-8
. Zkontrolujte to v DevTools pod záložkou Network.
Email a obsah CSS
Pokud máte v CSS vlastnost
content:
s českými znaky (např. při vytváření speciálních symbolů), ujistěte se, že máte @charset nastaveno.
Důležité upozornění: Pokud přidáte meta charset a stále vidíte chyby, problém není v HTML či CSS. Jde o to, jak se soubor uložil nebo jak se serveru odesílá. Vraťte se ke kroku 2 a ujistěte se, že váš editor ukládá UTF-8 bez BOM.
Nástroje na ověření
Jak poznáte, že vše funguje správně? Tady jsou způsoby, jak si to ověřit.
Otevřete F12, jděte na Network, klikněte na vaši HTML stránku a v záložce Response se podívejte, jaké znaky se posílají. Měly by být viditelné správné české znaky. V Headers ověřte Content-Type.
Na https://validator.w3.org/ vložte adresu vaší stránky. Validator vám řekne, jestli má správné kódování deklarované. Není to jistota, ale je to dobrý start.
Pokud vám věřím (a měli byste mi), můžete si stáhnout soubor a spustit
hexdump
či
xxd
v terminálu. Uvidíte přesně, jak je soubor kódovaný. Znak “č” v UTF-8 by měl být
c3 8d
.
Existují webové nástroje jako https://www.charset.org/ nebo https://www.chardet.org/, které vám řeknou, v jakém kódování je váš soubor. Vložte text a uvidíte diagnostiku.
Závěrem — není to těžké, jen je to důležité
Správné zobrazení českých znaků na webu není vědecká raketa. Jde o čtyři věci: meta tag v HTML, @charset v CSS, UTF-8 kódování souborů a správné nastavení serveru. Když se vám to podaří, vaši uživatelé uvidí češtinu tak, jak má vypadat — s háčky a čárkami na správných místech.
Nejčastější chyba, kterou vidíme, je, že lidé zapomenu na meta tag. Doslova jeden řádek. Přidejte si jej hned na začátek <head> sekce a 90 % problémů zmizí.
Máte otázky?
Pokud máte konkrétní problém s kódováním znaků nebo potřebujete poradit s typografií a barvami vašeho webu, neváhejte se ozvat. Jsme tu na to.
Napsat zprávu
Upozornění
Tento článek je Educational materialem určeným k informaci a vzdělání vývojářů a designérů. Specifické řešení mohou záviset na vašem hostingovém prostředí, CMS nebo frameworku, který používáte. Vždy si ověřte nastavení na vašem konkrétním serveru a testujte v reálném prostředí. Autoři nemají odpovědnost za problémy, které mohou nastat v důsledku nesprávné implementace popsaných postupů.