English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Technique: Replacing Text By An Image

Řešení CSS: Náhrada textu obrázkem

Sometimes, we want a decorative text on the web page, but we can't reach it by formatting the text. Therefore we replace the text by an image containing the graphical presentation of the text. However, these pictures have just decorative purpose (they don't carry any information) — from the point of view of the semantics, they aren't welcome in the code. They belong to the stylesheet, not to the page itself. How to do it?

First: Simple Solution

To "move" an image to the CSS isn't difficult thing. We may just set dimensions of the element to the picture's dimensions. Then we define the image to be the element's background image. And finally — to prevent the image to be overlaid by the text — we enclose the text in a neutral element (span) and hide it in the CSS.

Na webových stránkách občas chceme mít text v dekorativní podobě, do které prostý text nedokážeme zformátovat. Proto text nahradíme obrázkem s grafickou podobou textu. Tyto obrázky ale mají obvykle čistě dekorační charakter (nenesou žádnou informaci) a z hlediska sémantiky je nežádoucí, aby byly v kódu. Měly by patřit do předpisu stylů, ne do stránky samotné. Jak to ale udělat?

1. Prosté řešení

"Odsunout" obrázek do CSS není zas tak složitou záležitostí. Stačí prvku s textem nastavit rozměry kopírující rozměry obrázku. Ten pak prvku nastavíme jako obrázek na pozadí. Aby text obrázek nepřekrýval, uzavřeme text do neutrálního prvku (span), který v CSS skryjeme.

   #chapter-one {
      margin:0; padding:0;
      width:200px; height:80px;
      background:url("chapter-one.gif") top left no-repeat;
      }
   #chapter-one span { display:none }
   
...
   
   <h2 id="chapter-one"><span>Chapter One</span></h2>

See the example 1.

There is a disadvantage of this solution. If the image is unreachable or can't be displayed, nothing is visible. The only available text has been hidden. That's why a bit more complicated technique may be better:

Second: More Compatible Method

The idea to assure the element is usable even with unreachable image, is following. The text won't be enclosed in the neutral element span, but it's placed beside it. The span stays empty, but we format it with the background image and absolutely positioned, replacing the original text.

Konkrétní použití si prohlédněte na příkladu 1.

Toto řešení má ale jednu nevýhodu — pokud prohlížeč nedokáže zobrazit obrázky (nebo bude použitý obrázek nedostupný), nezobrazí se zhola nic, protože jediný text jsme s CSS skryli. Proto může lepší o něco komplikovanější postup:

2. Kompatibilnější řešení

Idea, jak zajistit, aby byl prvek funkční i s nedostupným obrázkem, je následující. Do neutrálního prvku span text neuzavřeme, ale umístíme jej vedle něj. Tento span zůstane prázdný, ale zformátujeme jej s obrázkem na pozadí a absolutně jej napozicujeme tak, že původní text zakryje.

   #chapter-one {
      margin:0; padding:0;
      position:relative;
      width:200px; height:80px;
      overflow:hidden;
      }
   #chapter-one span {
      display:block;
      position:absolute; left:0; top:0; z-index:1;
      width:200px; height:80px;
      margin:0; padding:0;
      background:url("chapter-one.gif") top left no-repeat;
      }

...

   <h2 id="chapter-one">Chapter One<span></span></h2>

The usage is demonstrated in the example 2. The text will be visible, if the image (for any reason) cannot be displayed. Otherwise, the image covers the text. For a case when the text is longer then the image width, the overflow:hidden is used (otherwise the text would "protrude" under the image).

Note: We can format links in similar way. We make the A-element a block and treat it as the title in previous examples. We can also add second image for the hover-state. For details see the example 3. (Of course, we can use the one-image-rollover as well.)

Použití demonstruje příklad 2. V tomto případě bude viditelný text, pokud obrázek z jakéhokoli důvodu nebude možné zobrazit. V opačném případě bude text překryt. Pro na situaci, kdy by text byl výrazně delší, než je rozměr obrázku má prvek nastaven overflow:hidden (jinak by text pod obrázkem "vykukoval").

Pozn.: Obdobně můžeme zpracovat i odkazy. Z prvku A uděláme blok a naložíme s ním stejně jako s nadpisem v předchozích příkladech. Můžeme doplnit i druhý obrázek pro stav A:hover. Více viz v příkladu 3. (Pochopitelně můžeme zde použít také jednoobrázkový rollover)