Dynamické nahrazování textu

9. února 2006

•

Vzhled textu je stálý problém webdesignu. Existuje jen několik fontů, které jsou univerzálně dostupné, a je téměř nemožné vytvořit složitější grafické efekty, pokud používáte jen standardní CSS a HTML. Je vhodné používat tyto tradiční fonty pro texty, ale co se týče nadpisů – krátkých, pozornost přitahujících bloků textu – bylo by hezké mít větší výběr. Na tento problém jsme si zvykli a řešíme jej buď tak, že vyzískáme co nejvíc z toho mála fontů, co máme, nebo zcela nahrazujeme texty nadpisů obrázky.

Většina webů, které nahrazují text obrázky, to provádí pomocí ručně připravovaných obrázků, což není tak hrozné, když máme danou sadu nadpisů, ale rychle se to stane nepoužitelným na webu, který se mění několikrát denně. Když se provádí nahrazení, musí být každý obrázek přiřazen textu, který je nahrazován. Tato vazba se obvykle provádí pomocí elementu <img>, vloženého stylu, nebo atributu id.

Můžeme na ten nesmysl zapomenout. Už žádné elementy <img> nebo <span>, žádné další atributy id nebo vyplýtvaný čas v Photoshopu a žádné další CSS hacky. S použitím JavaScriptu a PHP můžeme generovat přístupné obrázkové nadpisy s jakýmkoli fontem. A nepotřebujeme vůbec měnit strukturu HTML ani CSS.

Prohlédněte si demo dynamického nahrazení. A pak si přečtěte, jak můžete stejnou funkci přidat na svůj web.

PHP

Tento malý PHP skript (dostupný zde) dodá vašemu prohlížeči dynamicky generovaný obrázek ve formátu PNG, kdykoli je o to požádán. Ale než ho uvedete do provozu, musíte ho upravit pro svoje specifické použití. K tomu slouží prvních sedm řádků kódu:

$font_file = ‚font.ttf‘ ;
$font_size = 56 ;
$text_color = ‚#ffffff‘ ;
$background_color = ‚#000000‘ ;
$transparent = true ;
$cache_images = true ;
$cache_folder = ‚cache‘ ;

Proměnná $font_file musí obsahovat lokální cestu (nikoli URL) k True Type (TTF) nebo Open Type (OTF) fontu na vašem webu. To je font, ze kterého budou vytvořeny vaše obrázky. Musíte ho ze svého počítače nahrát na server.
Proměnná $font_size je velikost písma v pt (point, body).
Proměnné $text_color a $background_color jsou hexadecimální hodnoty barev, které indikují barvu textu a barvu pozadí.
Když je $transparent nastaveno na true, budou hrany obrázkového textu prolnuty barvou pozadí ($background_color), aby se zabránilo anti-aliasingu, a skutečná barva pozadí nebude vůbec vidět.
Když nastavíte $cache_images na true a $cache_folder na lokální cestu k adresáři s právem zápisu, bude tam skript ukládat každý obrázek, který vytvoří. Tak mohou být obrázky kešovány, což může podstatně zrychlit jejich zobrazování. Je to důležité hlavně u sdílených serverů nebo serverů s velkým provozem.

Skript se instaluje tak, že se nahraje na server, který podporuje PHP. Přesněji řečeno, potřebujete PHP verze 4.3 nebo vyšší kompilované s podporou pro GD knihovnu verze 1.6 a vyšší. Jestliže vám to nic neříká, kontaktujte svého poskytovatele hostingu a on vám sdělí, zda je jeho server kompatibilní.

Ačkoli je pro vytváření obrázků použito PHP, váš web nemusí PHP aktivně používat. Tuto techniku můžete používat bez ohledu na to, jak generujete stránky, zda ručně nebo pomocí CMS, pokud do elementu <head> vložíte element <script>. Detailněji to vysvětlím níže.

Upozorňuji, že to, co se dá udělat pomocí PHP, může být uděláno také jinými nástroji. Perl, ASP, Java servlety a jiné server-side programovací jazyky jsou také dobrými kandidáty pro generování obrázků. PHP je výborná volba hlavně díky široké dostupnosti, nezávislosti na platformě a snadné pochopitelnosti. Ty další alternativy připadají v úvahu, jestliže požadujete něco, co PHP neumí, nebo jestliže se rozhodnete vytvořit si pro generování obrázků vlastní program. Mohlo by ale být jednodušší prostě upravit zde uvedený PHP kód.

Jedna věc, kterou naše úprava skriptu nezahrnovala, byl ten text, který se má použít pro generování obrázku. To proto, že text, který bude pro generování použit, bude předáván skriptu přes své URL. Například URL heading.php?text=URLs%20Are%20Fun vytvoří obrázek s nápisem URLs Are Fun. Ale tohle nebudeme muset dělat ručně, protože to za nás udělá JavaScript.

JavaScript

Stáhněte si zdrojový kód použitého JavaScriptu.

Tato technika hodně využívá metody Peter-Paula Kocha JavaScript Image Replacement (JIR). Premisa JIR je velmi jednoduchá: Mnoho CSS kodérů využívá chyby v prohlížečích, aby před nimi skryli CSS styly. Hacky se přitom podobají podmínkám, což z CSS dělá hodně ubohý programovací jazyk. A tak spíše než využívat chyby ke kompenzaci odlišností prohlížečů, navrhuje Koch a další, že by tuto úlohu mohl zastávat inteligentněji a přístupněji JavaScript – skutečný skriptovací jazyk. To je pro naše účely vynikající, protože JavaScript nám také dává více flexibility. Zde ho použijeme pro náhradu textu obrázky, které dokonce ještě ani neexistují.

Když se stránka poprvé stahuje, skript se pokusí nahrát malý testovací obrázek (1×1 pixel). Jestliže je tento test úspěšný, můžeme předpokládat, že návštěvníkův prohlížeč podporuje zobrazování obrázků, jinak by je nestahoval. To je základ JIR – testováním podpory obrázků můžeme ihned určit, zda návštěvník může používat obrázkové nadpisy. Jestliže ne, skript se zde ukončí.

Jestliže návštěvníkův prohlížeč podporuje obrázky, skript čeká, než se stránka kompletně stáhne, protože nemůže zobrazit text, který tam ještě není. Jakmile je dokončeno stažení HTML, náš skript začne hledat specifikované elementy (<h2>, <span> a další) a nahradí text uvnitř nich elementem <img>. Takto dynamicky generovaný element <img> má nastaven atribut alt na původní text a atribut src je nastaven na URL PHP skriptu, který jsme instalovali. PHP skript pak pošle zpátky upravený obrázek ve formátu PNG a hle – upravené nadpisy.

Skript má velikost 8 kilobytů, ale je v něm potřeba upravit jen dva řádky:

replaceSelector(„h2″,“heading.PHP“,true);
var testURL = „test.png“;

Funkce replaceSelector akceptuje tři parametry. První je selektor CSS indikující, které prvky se mají nahradit. Může to být téměř jakýkoli platný selektor včetně id, class a selektorů prvků a atributů.

Druhý parametr je URL našeho upraveného PHP skriptu.

Třetí parametr je logická hodnota true či false indikující, zda má být při nahrazování aktivováno zalamování textu. Pokud ano (true), jsou nadpisy rozděleny do více obrázků, pro každé slovo jeden. Jestliže ne (false), vytvoří se pro každý nadpis jen jeden obrázek.

Funkce replaceSelector by se měla volat jednou pro každou skupinu prvků, kterou chcete nahradit obrázky. URL mohou být absolutní (http://...) nebo relativní k vašemu HTML souboru (path/filename).

Proměnná testURL musí být nastavena na URL testovacího obrázku (1×1 pixel).

Když jsou tyto řádky nastaveny správně, můžete na web nahrát svůj JavaScript a aplikovat jej na stránky přidáním následujících řádků do elementu <head>:

Atribut src musí odkazovat na místo, kam jste nahráli příslušný JavaScript.

To je vše, co je potřeba, aby dynamické nahrazování textu fungovalo. Přesně zde můžete skončit, chcete-li. Ale existuje několik volitelných vylepšení, která by se vám mohla hodit.

Tiskové verze

Jak již bylo na ALA dříve popsáno, mnoho webů nyní používá odlišné tiskové styly, aby mohly návštěvníkům poskytnout vzhlednější tiskové kopie obsahu. V mnoha případech to zahrnuje reverzi nahrazení obrázků, aby tiskový styl používal spíše skutečné fonty než jejich obrázkovou náhradu, která na tiskárnách s vysokým rozlišením často vypadá velmi špatně. Naneštěstí toto nelze JavaScriptem řešit. Jakmile jsme nahradili text obrázkem, je nemožné celý proces speciálně pro tiskové účely zvrátit, takže musíme hledat jiné řešení.

Můžeme ale zkusit trochu plánovat dopředu. Spolu s vložením elementu <img> do našich nadpisů, můžeme také vložit element <span>, který obsahuje původní text nadpisu. A můžeme nastavit vlastnost display u toho elementu na none, takže se nebude zobrazovat. Nyní máme dvě kopie původního textu. Jedna je viditelná jako obrázek a jedna je v neviditelném spanu. Když přiřadíte každému tomuto elementu specifickou třídu (třeba „replacement“ a „print-text“) a přidáte do tiskového stylu odpovídající definice, můžete změnit jejich zobrazení při tisku.

Pro generování příslušné tiskové verze lze použít následující tiskový styl (vzorový stylopis):

span.print-text {
display: inline !important;
}
img.replacement {
display: none;
}

Až nahrajete tento stylopis na svůj web, je potřeba v našem JavaScriptu ještě změnit dva řádky:

var doNotPrintImages = false;
var printerCSS = „replacement-print.css“;

Když nastavíte doNotPrintImages na true a printerCSS na URL tiskového stylu, který jste právě vytvořili, skript automaticky vloží příslušný <link> do elementu <head> na vašich stránkách…

Bez problikávání

Protože náš skript nemůže začít s nahrazováním dříve, než je stažena celá stránka, často dochází ke krátkému probliknutí neostylovaného dokumentu, zatímco prohlížeč čeká na nahrazovací proces. Jde spíše o drobnost než zásadní problém, ale protože se tomu lze vyhnout, měli bychom to také opravit. Dá se to udělat s pomocí malého stylového předpisu.

Než se tělo dokumentu začne stahovat, můžeme dynamicky vložit stylový předpis, který dynamicky nahrazované elementy zcela skryje. Protože přilinkované styly CSS se aplikují již při vykreslování dokumentu, nebude během této doby viditelný žádný obsah. Jakmile je nahrazení hotovo, můžeme tento styl zrušit, a naše nově stylované nadpisy budou znova viditelné.

Příklad: Jestliže na své stránce nahrazujete elementy <h2> , pak je následující stylový předpis skryje, dokud nebude nahrazení hotovo:

h2 {
visibility: hidden;
}

Při tomto postupu se však může vyskytnout menší problém. Celá naše technika závisí na načtení testovacího obrázku, který indikuje, zda prohlížeč podporuje obrázky. Jestliže se obrázek nikdy nestáhne, naše technika se nikdy neaktivuje. A jestliže se naše technika nikdy neaktivuje, stylový předpis, který skrývá nadpisy, nebude nikdy deaktivován. Díky tomu pak návštěvníci, kteří zakázali obrázky v prohlížeči, ale mají aktivní JavaScript a podporu CSS, neuvidí místo nadpisů nic než prázdno.

Abychom vylepšili již tak mizerný požitek ze surfování pro tuto ubohou menšinu, přidáme do skriptu krátkou prodlevu. Jestliže testovací obrázek neprojde, po jedné nebo dvou sekundách (nebo po jakkoli dlouhé době chcete), skript automaticky tento stylový předpis zruší a nadpisy se znovu objeví. Tyto dvě sekundy způsobí lehké nepohodlí pro takové zřídka se vyskytující návštěvníky, ale vyřeší problém s blikáním pro ostatních 99,99 % návštěvníků. A co je důležité, přístupnost bude zachována pro všechny.

Pro aktivaci této volitelné úpravy a odstranění krátkého problesknutí neostylovaného dokumentu musíte editovat tři řádky v JavaScriptu:

var hideFlicker = false;
var hideFlickerCSS = „replacement-screen.css“;
var hideFlickerTimeout = 1000;

Nastavte hideFlicker = true a hideFlickerCSS na URL toho stylopisu, který jste pro skrytí nadpisů vytvořili.

Proměnná hideFlickerTimeout by měla být nastavena na maximální počet milisekund (1/1000 sekundy), po který bude skript čekat, než zruší předmětný stylový předpis.

Poznámky a návrhy

Starší verze Mozilly, včetně Netscape 6.2, obsahovaly chybu, kvůli které prohlížeč stahoval obrázky, ačkoli uživatel zakázal jejich zobrazení. To nedávalo žádný smysl a bylo to opraveno ve verzích 1.4 a vyšších. Ačkoli v těchto prohlížečích bude tato technika normálně fungovat, bude nekorektně diagnostikovat podporu obrázků a selže, budou-li mít uživatelé obrázky zakázané. Nedomnívám se, že tento velmi řídký případ je vážný problém, ale pro úplnost je potřeba ho zmínit. Pro tento problém v současnosti neexistuje řešení.

Je možné použít popsanou techniku také s automatickými překladači jako Google nebo Altavista Babelfish. Pokud váš font podporuje cizí sadu písma, budou dynamické obrázky rovněž přeloženy.

Text, který nahrazujete, nemusí být uvnitř elementu nadpisu (<h1>, <h2> a další), může to být jakýkoli prvek na stránce. S několika jednoduchými úpravami a trochou manipulace s floatováním, můžete touto technika vytvořit dynamicky generované obrázkové úvodní písmeno jakéhokoli odstavce, na který ji aplikujete.

Můžete také nahradit elementy <a> a vložit tak na stránku různě stylizované odkazy, ale pokud byste chtěli i rollovery, dalo by to víc práce.

Také by se dalo místo nahrazování textu dynamicky generovanými elementy <img> použít nahrazování dynamickými animacemi ve Flashi.

Poděkování

Peter-Paulu Kochovi, za jeho JavaScript Image Replacement technique.

Simonu Willisonovi, za funkci getElementsBySelector.

Stuartu Langridgeovi, za ohleduplné techniky JavaScriptu.

Informace o překladu

Původní článek: Dynamic Text Replacement (A List Apart, 15. 6. 2004)
Překlad: Sušňová, Eva.
Odborná a jazyková spolupráce: Lešetický, Miloslav, Málek, Vilém.
Přeloženo se svolením autora a magazínu A List Apart (další překlady).

About translation

Original article: Dynamic Text Replacement (A List Apart, 15. 6. 2004)
Translation: Sušňová, Eva.
Language and expert collaboration: Lešetický, Miloslav, Málek, Vilém.
Language of translation: Czech (for readers from Czech and Slovak republics)
Translated with the permission of A List Apart Magazine and the author (other translations).