Pevné versus variabilní rozměry elementů
Dost často mě udivuje, kolik dobrých webů zapomíná na to, že když si někdo zvětší písmo (nebo ho má prostě v prohlížeči nastavené větší), pozadí některých elementů zůstane na svém místě jako přikované, kdežto písmo si vesele přeteče přes okraj elementu.
V praxi se jedná o různá tlačítka a okénka s jiným, než obdélníkovým tvarem – zejména s kulatými růžky nebo složitějším pozadím. Častým neduhem je také hlavička webu s fixní výškou. Někteří webdesignéři jsou na to prostě zvyklí. Řešení je přitom prosté. V případě hlavičky například vytvořit pozadí vyšší, než bude ve skutečnosti vidět. Pozadí se tak bude při větším písmu pouze odkrývat. Stejně jednoduše lze řešit ostatní elementy se složitějším pozadím. Pokud se jedná o elementy s kulatými růžky nebo obecně s nestandardním tvarem, situace se mírně komplikuje.
Obecně lze říci, že pro každý nestandardní okraj, který se
má roztahovat (kulatý či zkosený růžek, atp.),
potřebujeme jeden prvek navíc. Tím může často trpět
sémantika. Já si ale myslím, že je lepší vytvořit komfortní web, který
se nerozpadne při zvětšení písma a jehož design bude v rozumných
mezích stále stejně krásný. A když správně zvolíme pomocné prvky,
můžeme stále mluvit o sémantickém webu. V rozumných mezích,
samozřejmě. ![]()
Kde je chyba?
Takže dost keců, vizte příklad, který je špatně. Box má definované jediné pozadí a fixní výšku i šířku. Při zvětšení písma text přeteče.
Řešení
Nyní správný příklad. Box má definovanou pevnou šířku a nemá definovanou výšku. Pozadí se skládá ze dvou částí – horní je vysoká 1000 pixelů, to stačí pro značně zvětšené písmo. Dolní část pozadí je vysoká tak, aby pokryla spodní kulaté růžky. Pokud máte pozadí, které se opakuje, je vhodné udělat si vrchní a dolní kulaté růžky inverzně (v mém případě by to bylo bílou barvou) a celému obalovému prvku (zde div) nastavit opakující se pozadí, potom nemusíte dělat jeden díl pozadí příliš veliký (tím se zmenší jeho datová velikost a sníží se doba načítání stránky). Tímto způsobem by šel řešit i můj příklad. Jak vidíte, písmo se dá dostatečně zvětšit a pozadí elementu se příjemně roztahuje podle jeho obsahu.
Jak už to tak bývá, může nastat situace, kdy pevné rozměry definovat musíte nebo by řešení s variabilními rozměry bylo příliš složité. Potom se nedá nic dělat a je vhodné nastavit prvku dostatečné rozměry, aby jeho obsah nepřetekl i při sebemenším zvětšení písma.