Tech Life

Ilustrační obrázek

Grafické nadpisy bez flashu (Cufon)

11. 05. 2009 17:00    kategorie: Tech Life    autor: DMl    komentářů: 4

Potrebovali ste niekedy v projekte nahradiť vela (alebo viac než dosť) nadpisov za obrázkové, lebo to tak bolo nakreslené v dizajne a klient sa toho dožadoval? Nadpisy, položky v menu, titulky rôznych boxíkov, sekcií, podsekcií apod. ? Nebaví vás pripravovať si všetky nadpisy vo Photoshope? Cufon je pre vás.
 

Možnosti

CSS - Asi najčastejšie používaná technika ako docieliť aby nadpisy boli v inom fonte, než v jednom z tých všadeprítomných. Pri použití čistého CSS sa tiež skýta možností niekolko. Iné riešenie je pre elementy ktoré chceme aby floatovali (horizontálne menu), a trošku iné pre nadpisy. Niekdo používa vnorené SPANy ktoré potom pozicuje absolútne mimo obrazovku, niekdo text-indent: -500em. Všetky techniky však trpia manuálnou prípravou obrázkových nadpisov.

Flash - sIFR možno poznáte, možno nie. Ide o techniku nahrádzovania nadpisov za Flash. Do predu si pripravíte vo Flash IDE súbor (podla šablóny) s jedným textovým polom do ktorého sa pri exporte pri balia všetky alebo vami vybrané znaky zo zvoleného fontu. Javascript na stránky potom zaistí nahradzovanie nadpisov za Flashe. Funguje dokonca CSS pre velkosť, farbu a dekoráciu písma. Luxus.

Cufon

Nový hráč na tomto poli si dal za úlohu používanie otvorených formátov. Nadpisy nahrádza za HTML5 canvas element pre lepšie browsre, a VML pre tie menej dobré. Na zhotovenie súboru s písmom nepotrebujete mať kúpené žiadne Flash IDE, žiadny Photoshop.

Ako to funguje

Na začiatok si potrebujete pripraviť súbor s písmom. Budete teda potrebovať TrueType (ttf) alebo OpenType (otf) súbor s písmom ktoré chcete (alebo grafik chcel) požiť. Tu si treba dať pozor na licenčné podmienky písma. Väčšina dodávateľov totiž v licencii zakazuje akékoľvek jeho zprístupnenie verejnosti, čo umiestnenie na web rozhodne je. Aj keď sa písmo v tomto procese preformátuje a je prakticky nepoužiteľné, stále je ho možné (ak ste dosť šikovný) preložiť späť do TTF/OTF. Doporučujem pozrieť sa sem pre volné alternatívy - dafont.com.

Písmo sa preloží do formátu SVG, potom do VML, a nakoniec do JSON s kusom funkčného kódu. Samozrejme toto všetko nebudete robiť ručne ale poslúži vám generátor. Môžete použiť ten hostovaný alebo si rozbehnuť vlastný, je open source. Získate tým teda javascript s fontom. Generátor vám umožňuje vygenerovať aj bold a italic varianty písma. Môžete si v ňom toež zvoliť ktoré znaky potrebujete.

Druhou časťou je javascript, ktorý zabezpečí vymieňanie a vykreslovanie nadpisov. Jeho komprimovaná velkosť je 13 kb. Oba javascripty vložíme do nášho HTML <script> tagom. Ďalej musím cufonovi povedať ktoré elementy má nahradiť. To znamená ďalši <script> tag, alebo do iného (z hlavičky) zalinkovaného javascriptu.

<script type="text/javascript">
Cufon.replace('h1');
</script>

Takto dáme cufonovi vedieť že chceme nahradiť všetky H1 elementy za grafické nadpisy. Je možné použiť aj rôzne fonty pre rôzne elementy ale o tom už sa dočítate v dokumentácii. V základnej konfigurácii môžete používať len mená tagov, cufon totiž nemá žiadny CSS selector engine. Ale! Je dosť chytrý na to aby detekoval či používate jednu z populárnych js knižníc (jQuery, MooTools alebo Prototype), a ak áno, môžete funkcii Cufon.replace podstrčiť namiesto názvu tagu, CSS selector. Čo to pre vás znamená asi viete.

Kompatibilita

Na začiatok: IE 6+ , FF 1.5+ , Safari 3+, Opera 9.5+, Chrome

Cufon používá inú stratégiu pre Webkit/Gecko a inú pre IE. Webkit/Gecko podporujú HTML5 canvas element, ale nepodporujú VML, a IE presne naopak. Písal som že font je zkonverovaný do VML, to znamená že v IE sa nadpisy vykreslujú rýchlejšie a dokonca je možné vykreslený text označiť a zkopírovať do schránky. Pre canvas browsre sa krivky obsiahnuté v súbore s písmom prekladajú do kresliaceho kódu, ktorý kreslí písmenká na canvas.

IE má ešte dorný bug, kvôli ktorému sa nadpisy vykreslia s menším oneskorením. Môžete ho obísť vložením následujúceho pred uzatvárací tag </body> :

<script type="text/javascript"> Cufon.now(); </script>

Known bugs:

  • v IE je treba dať floatovaným elementom layout
  • :hover nefunguje

Ak by ste sa rozhodli dať cufonovi vo svojom projekte šancu, nezabudnite napísať do komentáru ako to dopadlo a či vôbec. Happy cufoning cufóni.

Zdroj: http://wiki.github.com/sorccu/cufon

Sdílet odkaz:
tisk

Diskuze k článku

Tom Flídr, 4.7.2009 13:25

Ahoj, Cufón nefunguje to v IE8, ani Typeface nefunguje v IE8, takže co nám zbývá dál je sIFR, tak hurráá zpátky na stromy, díky Microsofte za tvúj ie8 počin:-)

tiso, 12.5.2009 11:05

Poprosím, opravte si preklepy v článku...

Filosof, 12.5.2009 08:46

Jinak těch technik je také mnohem víc... http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

Filosof, 12.5.2009 08:45

:hover samozřejmě funguje - mnohem horší je nemožnost označit text - viz http://wiki.github.com/sorccu/cufon/styling zcela dole... jinak cufón používám už na třetím webu (jediný spuštěný je http://www.filosof.biz/) a zatím samé dobré zkušenosti, akorát je potřeba si více hrát s typografií v IE6+7, protože berou cufonem nahrazený text jako obrázek, čímž je potřeba zvětšit mezery okolo..

Přidat příspěvek

 

Kontakt pro média


Máte zájem o další informace, odborný článek či přednášku na konferenci? Kontaktujte nás prosím na pr@etnetera.cz.

RSS - Tech life


RSS kanál Tech Life Blogu

Offlineblog

Offlineblog

Ljama


Komix z prostředí imaginární firmy.

ljama

Ještě jste ho nečetli? Tak tudy ...

 
Doporučujeme: Nabídka práce, volná pracovní místa - pracovní portál SPRÁVNÝKROK.CZ