(aktualizováno) Náhrada textu obrázkem :: Weblog Letem světem

Ačkoliv se obecně doporučuje nepoužívat pro textové nadpisy obrázku a jen nastylovat prostý text, v některých případech nám tato metoda přijde vhod. Může se jednat například o logotyp firmy, složitou kompozici nadpisu v obrázku či paličatého zákazníka. Obvykle se v těchto případech používá kombinace obrázku na pozadí a elementu span, který obsahuje samotný text nadpisu, je vložen přímo do nadpisu a skryt pomocí CSS pravidla display:none. Tento způsob náhrady textu například popisoval website Stopdesign na jaře tohoto roku. Dnes jsem ale nastudoval nový a daleko chytřejší postup. Stuart Langridge ve svém alternativním způsobu odbourává nutnost použití pomocného elementu a pomocí nulové výšky nadpisu s nenulovým paddingem (vnitřní odsazení obsahu elementu) dosahuje zcela shodného efektu. Samozřejmě se ale objevilo ALE a nikoho nepřekvapí, že to ALE existuje kvůli MSIE. Proto je třeba pro zachování kompatibility použít navíc malý hack, který eliminuje chybný box model v redmondském browseru. (zdroj Simon Willison)

Vloženo 7.8.2003: Yuhů mi ve svém spotu Špatné nahrazení obrázkem sice dává za pravdu v tom, že je správné používat text místo obrázkových nadpisů, ale vzápětí ukazuje hlavní nevýhodu výše zmiňované a opěvované techniky. Ta se projeví, pokud si uživatel vypne zobrazování obrázků. To není zase tak neobvyklý jev a v takovém případě vlastně čtenář neuvidí žádný nádpis - obrázek bude vypnutý a prostý text bude skryt kvůli nulové výšky elementu. Ano, tento problém jsem si původně vůbec neuvědomil. Proto své optimistické hodnocení oné metody degraduji na konstatování - ano, je to další ze zajímavých nápadů, ale nejlepší řešení to není. Z toho samého důvodu zřejmě nepomůže i vnitřní span skrývaný pomocí display:none. Nejlépe tedy celý problém řešit pomocí překrytí textového nadpisu obrázkem, jak je popsáno v komentářích tohoto spotu. Nebo poradíte lepší způsob?