Üzleti Megoldások portál A vállalkozó szelleműek portálja.
Geri Cufon cikkére reagálnék ezen írásomban. A SIFR (Scalable Inman Flash Replacement) flash és javascript segítségével a kívánt szövegrészleteket (leggyakrabban a címeket) cseréli le nem websafe betűtípusokra. Igaz ugyan, hogy nagyon sok szövegre nem szabad alkalmazni egy oldalon belül, mert jelentősen lelassítja a betöltést, de ugyan ez igaz a Cufon-ra is. A megoldás operációs rendszer és böngészőfüggetlen ezen kívül a Firefox AdBlock, valamint FlashBlock kiegészítőjével is jól megfér.
Tipográfia tuning
Hogyan is kezdjünk hozzá? Az alábbi oldalon töltsük le a Sifr 3 nekünk tetsző verzióját: http://dev.novemberborn.net/sifr3/nightlies/ (hozzáteszem 2008 vége óta nem jött ki új verzió), vagy pedig honlapunkról a legújabbat. Tartalmaz egy CSS, Demo, Flash és egy js mappát. A demo-t nem tudjuk megnézni offline, csak ha feltöltjük egy webszerverre, vagy egy helyi php futtató környezetet használunk (MAMP, XAMP, WAMP, stb.). Ez a Flash biztonsági tiltásai miatt van. A betűtípus módosításához egyszerűen csak a Flash mappában található sifr.fla-t kell elindítanunk. Elegendő hozzá csupán az Adobe Flash 8 is. Én Adobe Flash CS4-el mutatom be a továbbiakat.
Megnyitás után a Stage-n lévő Movie Clip-ünkre kattintsunk duplán, ezzel elérhető lesz számunkra az a szövegbevitel mező, ami tulajdonképpen az egész rendszer lelke.
A jobb oldali panelen menjünk a Character Embedding pontra.
Itt módosíthatjuk azt, hogy mely karakterkészletek kerüljenek beágyazásra. Alapértelmezés szerint az Uppercase, Lowecase, Numerals és a Punctuation van bejelölve. Ha kicsit magyarosabb szövegre szeretnénk Sifr-t használni, akkor be kell ágyaznunk az ékezetes betűket is. Az alábbi kép szemlélteti, hogy miket célszerű még pluszban hozzáadni.
Ezek után a Character Embedding Menüpont felett a Family melletti legördülő listából választhatjuk ki azt a betűtípust, amelyet a weboldalunkon is viszont szeretnénk látni.
A Flashes részével nincs is más dolgunk, nyugodtan lefordíthatjuk az elkészült fájlt.
Azonban ha kicsit próbálgatni szeretnénk az Options.as-ben lévő lehetőségeket, akkor az alábbi lista nyújthat egy kis segítséget:
domains(Array): A tömb tartalmazza azokat a domain neveket, amelyeken a sIFR lerenderelheti a szöveget. Hotlinking elleni védelemre lehet használni. Használd a * szimbólumot, hogy az összes domainnek engedélyezd a megjelenítést. Használhatsz wild cardot is, hogy az aldomaineket is engedélyezd, külön-külön kell őket megadni.
Pédául: sifr.domains = [‘*.example’,’example.com”] [‘*example.com’, ‘example.com’];.
defaultKerning(Boolean)- Engedélyezve van-e a Betűköz, ami kliens oldalról felülírható.
defaultSharpness(Number)- Alapértelmezett élesség, ami kliens oldalról felülírható.
defaultThickness(Number)- Alapértelmezett vastagság, ami kliens oldalról felülírható.
defaultOpacity(Number)- Alapértelmezett átlátszóság, ami kliens oldalról felülírható.
defaultBlendMode (Number)- Alapértelmezett érték, amely kliens oldalról felülírható.
enforcedGridFitType (String)- Felülírja a rács illeszkedési típusát a kliens oldalon.
preserveAntiAlias (Boolean)- Ha az értéke igaz, akkor a sIFR nem írja felül az antialiasing-ot a Flash IDE-ben miközben exportál. A vastagság és az élesség szintén nem lesznek hatással.
conditionalAntiAlias (Boolean)- Ha az értéke “true”, akkor a sIFR letiltja az antialiasing -ot, ha a betű mérete nagyobb, mint 48. Ez a beállítás független a preserveAntiAlias -tól.
antiAliasType (String)- Megadja az anti aliasing típusát. Alapértelmezett az Advanced.
filters (Array)- Flash szűrők adhatóak a tömbhöz, és ez hatással lesz a szövegmezőre.
CSS adható meg a Flash mozin belül, a sIFR.styles.parseCSS() segítségével, ami a CSS kódot tartalmazza az argumentumában.
A HTML oldal beállítása
Ahhoz, hogy végre látható eredményt produkáljon a sIFR, a következő sorokat kell beilleszteni az oldalunk <head></head> része közé:
Az első részt gondolom nem kell magyarázni, egyszerűen betöltjük a sIFR-t az oldalba, valamint implementáljuk az alap css fájlt.
Megmondjuk a scriptnek, hogy hol találja a betűtípus swf-ünket.
1 2 |
Aktiváljuk a site_title parancsot, ez a név tetszőleges lehet.
1 | sIFR.activate(site_title); |
A “selector:” segítségével adhatjuk meg melyik html elemet szeretnénk, hogy lecseréljen. Ez lehet akár class név is. “wmode:“-al állítjuk be, hogy a flash háttere átlátszó legyen, valamint a “css:” segítségével tudjuk formázni az egyedi szövegünket (szín, méret, igazítás, stb.). Ha szükséges, akkor a hover-nek is tudunk külön színt adni (itt van külön a kódrészlet hozzá: ‘a:hover’: { ‘color’: ‘#4F4F4F’ }).
1 2 | sIFR.replace(site_title, { selector: 'h1', wmode: 'transparent', css: [ '.sIFR-root{color:#FFFFFF; font-size:50px;}' ] }); // ]]></script> |
CSS styling
Abban az esetben, ha valamilyen oknál fogva nem jelenik meg a sIFR szövegünk (nincs flash telepítve, vagy a javascript megjelenítés ki van kapcsolva), akkor az alapértelmezett betűtípussal fog megjelenni a HTML anyagunk. Ennek a stílusát a sifr.css -ben módosíthatjuk.
1 2 3 4 5 6 7 8 9 | .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } |
Az alapértelmezett megjelenést el kell tüntetnünk ahhoz, hogy csupán csak a flash szöveg érvényesüljön.
1 2 3 4 5 6 7 8 9 | .sIFR-alternate { display:block; height:0; left:0; overflow:hidden; position:absolute; top:0; width:0; } |