O webu
Obrázkový text

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.

Příklad obrázku obsahující text

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í.

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ě:

  • Lettering.JS – jQuery plugin pro obalení písmen do samostatných elementů

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).

Text zkrášlený přímo v grafickém editoru

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ě).

Text zkrášlený přímo v grafickém editoru