FontLab Photofont WebReady 1.0: unikátní konverze písem pro grafické nadpisy na webu - Grafika.cz - vše o počítačové grafice

21. května 2009, 00.00 | Z libovolného vektorového TrueType/OpenType fontu nebo z obrázkového písma typu Photofont si můžete v aplikaci Photofont WebReady snadno vyrobit univerzální "grafické" písmo pro efektní nadpisy či obecně pro jakékoliv jiné texty. Zkonvertovaný font lze pak v rámci technologie Flash používat jako běžné písmo pro klasické textové nadpisy, přičemž jejich textový obsah je i nadále kopírovatelný. Popis konvertoru a celé technologie písem v SWF souborech vám nyní nabízíme.

Photofont WebReady je originální projekt společnosti FontLab s cílem umožnit webdesignérům či grafikům používat na webových stránkách (obecně v HTML/XHTML atp. dokumentech) libovolná vektorová písma, nebo obrázková písma typu Photofont. Nejedná se přitom o nic tak prostoduchého jako konverze fontu do podoby bitmapového grafického nadpisu, nýbrž o komplexní technologii na konverzi písem do Flashe, který pak lze v kombinaci s JavaScriptem a CSS používat jako prostředek pro generování a zobrazování efektních nadpisů či obecně jakýchkoliv textových řetězců na webových stránkách.

Photofont WebReady je stejně jako většina ostatních produktů společnosti FontLab k dispozici ve verzích pro Windows a Mac OS X a prodává se za 80 USD.

Technologie nadpisů

Myšlenka využití „Flash“ písem vytvářených Photofont WebReady sice není unikátní, ovšem převedená do praxe je svým způsobem skoro až geniální. Libovolné vektorové písmo ve formátech TrueType či OpenType, nebo obrázkové písmo typu Photofont můžete pomocí aplikace „převést“ do formátu Flash (SWF), který pak s pomocí JavaScriptu funguje jako grafický engine generující grafický obsah jednotlivých titulků.

Celý princip vložení písma do SWF souboru se nazývá sIFR neboli poněkud komplikovaně rozvedeno scalable Inman Flash Replacement a jedná se o open source technologii fungující až na úrovni konkrétních tagů jazyka HTML „propojených“ s Flash rendererem. V podstatě by se tedy dalo říci, že Photofont WebReady vkládá písma do SWF podobě jako Adobe Acrobat (či jiný nástroj na tvorbu PDF dokumentů) do PDF souborů, přičemž samotný obsah textů zobrazovaných pomocí SWF enginu je standardně definovaný přímo v HTML kódu webové stránky a je tedy stále k dispozici jako čistý text a lze ho i ve webovém prohlížeči libovolně kopírovat přes schránku.

Photofont WebReady 1.0 - nadpisy realizované s využitím SWF lze označovat a kopírovat jako kterýkoliv jiný běžný text

Webové stránky tak můžete poměrně snadno oživit o netradiční textové nadpisy a v klidu tak zapomenout na víceméně nudné serif či sans serif písma typu Arial, Verdana, Tahoma, Helvetica, Times apod. Jedinou podmínkou, která ale už dávno není žádný problém, je nutnost mít vhodný Flash plugin pro webový prohlížeč a povolený JavaScript. Nemusíte se navíc obávat, že pokud nebude k dispozici Flash, nadpis se vůbec nezobrazí – texty se totiž generují přímo přes standardní HTML tagy pro nadpisy (H1 až H6) a pokud nebude Flash aktivní, nadpis se bez problémů zobrazí dostupným (pomocí CSS přednastaveným) fontem. Úžasný na celé technologii je právě fakt, že samotný kód stránky nemusíte prakticky vůbec modifikovat, stačí vložit příslušné odkazy na JavaScript a kaskádové styly a používat standardní H1 – H6 tagy pro nadpisy.

Ovládání konvertoru

Po výběru vektorového TTF/OpenType písma nebo bitmapového obrázkového písma typu Photofont si můžete na jeho náhledu vyzkoušet, jak bude daný nadpis vypadat ve zvolené velikosti a barvě. Font můžete testovat na bílém, černém, nebo průhledném pozadí, případnou barvu písma barvu si ovšem musíte určit předem.

Photofont WebReady 1.0 - výběr zdrojového bitmapového Photofontu

Photofont WebReady 1.0 - výběr TrueType nebo OpenType písma

V dalším kroku následuje výběr kvality komprese písma pro jeho převod a vložení do formátu Flashe (SWF soubor). U bitmapových Photofont písem máte na výběr několik rozlišení v dpi (podle dostupné interní velikosti písma), pro vektorové fonty můžete vybírat z několika způsobů vložení písma do SWF souboru, nebo vytvoření bitmapového vzorku (v předchozím kroku) specifikovaného nadpisu. Důležitá je také samotná volba, ve kterém HTML tagu pro nadpisy se bude daný font zobrazovat.

Výsledný JavaScript, SWF a nezbytné kaskádové styly pak Photofont WebReady uloží do přednastaveného adresáře, propojení s JavaScriptem pak lze vložit přímo do zvoleného HTML dokumentu.

Photofont WebReady 1.0 - čeština u běžných vektorových písem funguje bez problémů

Photofont WebReady 1.0 - určení HTML tagu a vlastností/formátu písma pro nadpisy

Photofont WebReady 1.0 - nastavení velikosti exportovaného písma

Photofont WebReady 1.0 - volba kvality/stupně komprese grafických titulků

Photofont WebReady 1.0 - volba adresáře a eventuálně i HTML souboru pro vytvoření/vložení nadpisu

Photofont WebReady 1.0 - souhrnné informace o vytvořeném písmu pro nadpisy

Závěr

I když se Photofont WebReady zřejmě většího rozšíření nedočká, je to svým způsobem zajímavá kuriozita a především názorná ukázka toho, na co všechno a jakým způsobem lze využít kombinaci Flashe a JavaScriptu. Dovedu si představit využití systému grafických nadpisů zejména u netradičně řešených webových stránek či intranetových prezentací, u kterých může Photofont WebReady fungovat na pozici efektového "konvertoru" písem pro grafické titulky, přičemž nezbytnou podmínkou je pochopitelně podpora technologie Flash.

Demoverzi Photofont WebReady pro Windows a Mac OS X si můžete stáhnout zdarma z webových stránek společnosti FontLab.