Text v obrázku

Pro zajímavější grafické ztvárnění textu se může nabízet sáhnout po obrázku, na kterém bude text vylepšený v grafickém editoru.

První rada zní: Psaní textu do obrázku se vyhnout.

1. Text z obrázku půjde složitě kopírovat. Zároveň kopírování nezabrání, ani kdyby to bylo cílem.

2. Bude pravděpodobně složitější v budoucnu provádět úpravy obsahu, který je v obrázku.

3. Obrázek s textem je komplikovaný s ohledem na responsivní layout webu. Obrázek bude mít pevnou šířku a na menších obrazovkách půjde jen zmenšit, což může vést k horší čitelnosti. Obyčejný text se dokáže inteligentně přeskládat do více řádků.

4. Obrázkový text bude většinou datově náročnější.

Náhrada textu v obrázku

Vývoj CSS vede tím směrem, že se stále více a více věcí, co šlo dřív řešit jen obrázky, dá nahradit CSS vlastnostmi. Pokud jde o zajímavější písmo nápisu, jde zase přímo na webu použít zvláštní font.

Vzhled textu v CSS

Pro úpravu vzhledu textu jde použít následující.

• Barva – color
• Velikost – font-size
• Tučnost – font-weight
• Kursiva – font-style
• Malá velká písmena – font-variant: small-caps
• Velká písmena – text-transform: uppercase
• Stín písma – text-shadow
• Obrázkové pozadí místo barvy písmen – background-clip
• Rámeček okolo písmen – text-stroke
• Odraz písma (celého boxu) – box-reflect
• Přeškrtnutí, podtržení nebo nadtržení – text-decoration
• Proložení písmen – letter-spacing: 2px
• Větší mezery mezi slovy – word-spacing: 1em
• Jde vytvořit pozadí pouze za písmeny.
• Textem jde rotovat, otáčet nebo na něj aplikovat CSS filtry.

Docílit nápaditějšího vzhledu textu tak jde i pouze s využitím CSS, při zachování všech výhod prostého textu.

Pro zajímavější stylování je možné obalit jednotlivá písmena textu JavaScriptem a stylovat je samostatně:

Přístupný text v obrázku

Pokud není zbytí a na stránce musí být text v obrázku, nejjednodušší je použít značku <img> a textový obsah umístit do atributu alt.

<img src="text.png" alt="Text z obrázku">

S ohledem na SEO se někteří tvůrci uchylují k řešení, kdy v HTML kódu je text z obrázku nějakým způsobem skrytý a vidět je jen obrázkový nápis vytvořen pomocí CSS pozadí (background-image).

Skrytí jde provést pomocí display: none. Někdy jsou ale k vidění i odlišné konstrukce, které schování textu provádějí jiným způsobem ve snaze ošálit robota, že skrytý text není skrytý.

Pokud v kódu je něco jako:

text-indent: -9999px;

Je to přesně ten případ.

Optimální řešení

Pokud je nutné text řešit obrázek, je ideální obrázek naposicovat před text. Bude to mít výhodu v tom, že i před stažením obrázku bude návštěvník text vidět (byť v méně hezké podobě).

Zobrazit/skrýt překryvný obrázek