sIFR: Gebruik elk lettertype op je website!

» Direct naar de code? «

Altijd het gevoel dat je qua design vastloopt, omdat je beperkt bent tot de ‘standaard’ lettertypes. Of ben je Arial en Verdana gewoon een keer zat? Dan is sIFR een leuk en goed alternatief. Je kunt dan EN mooie lettertypes gebruiken, zonder de beperking van het systeem van de gebruiker, EN de semantische headings, zoals h1 en h2, behouden.

Wat is sIFR en hoe werkt het?

sIFR (Scalable Inman Flash Replacement) is oorspronkelijk bedacht door Shaun Inman en later uitgewerkt door Mike Davidson en Mark Wubben. sIFR stelt je in staat om stukken tekst als titels, tussenkopjes, of zelfs menu’s om te zetten in typografische hoogstandjes, zonder dat je beperkt bent door de fonts op het systeem van de gebruiker. De tekst is nog steeds selecteerbaar, qua grootte en kleur instelbaar en, misschien wel het belangrijkste, blijft qua html ongewijzigd, wat voor zoekmachines (en dus je bezoekersaantallen/inkomsten) erg prettig is.

Wat gebeurt er dan precies? Allereerst wordt je pagina gewoon ingeladen door de webbrowser. Vervolgens wordt er met een stuk javascript gecontroleerd of je Flash geïnstalleerd hebt en, als dat het geval is, wordt de hoogte en breedte van elk te vervangen element berekend. Hierop volgend wordt de ‘basis’ flash movie aangepast aan de tekst en de grootte ervan en wordt tot slot de ‘oude’ html vervangen door het gegenereerde flash object. Het resultaat? Een mooi kopje voor de bezoeker die flash en javascript heeft en een mooi (lees: semantisch) kopje voor degenen die dat niet hebben, waaronder dus de zoekmachines.

Hoe gebruik ik sIFR?

Allereerst zul je het pakketje met de javascript en flash moeten downloaden. Voor dit artikel ga ik uit van de laatste beta versie, sIFR 3. Wil je de allernieuwste versie, neem dan een kijkje bij de nightlies. De laatste stabiele (dus geen beta) versie is sIFR 2, maar die is nogal lastig onder de knie te krijgen wat betreft het wijzigen van de font grootte, vandaar dus versie 3 beta.

In het gedownloade pakketje vind je vervolgens de css, het javascript en, niet geheel onbelangrijk, het flash bronbestand.

De Flash

Allereerst pakken we de flash aan. Hiervoor zul je een versie van Flash 8 nodig hebben. Open nu het bronbestand ‘sifr.fla’, dubbelklik op het tekstvlak en pas vervolgens de tekst aan het gewenste lettertype aan en exporteer vervolgens de flash naar een .swf file. Herhaal dit voor elk gewenst lettertype en klaar is het flash gedeelte.

Noot: Heb je een oudere versie van Flash, dan zul je (helaas) sIFR 2 moeten gebruiken en kun je het beste de documentatie van de site zelf erbij halen.

De HTML

Kopieer nu alle benodigde bestanden (1x swf, 2x css en 2x javascript) naar de gewenste locatie en include deze als volgt in de head van je webpagina.

Noot: vergeet vooral het media attribuut niet bij de stylesheets!

Het JavaScript

Open nu het bestand sifr-config.js. Hierin stellen we het gewenste lettertype per html element in. En omdat een voorbeeld vaak twintig keer meer zegt als een uitleg, hieronder even een voorbeeldje.

var lexia = {
src: '/themes/chameleon/include/lexia.swf'
};

sIFR.prefetch(lexia);
sIFR.activate();
sIFR.replace(lexia, {
selector: 'h1'
,css: [
'.sIFR-root { color: #cc3333; }'
,'a { color: #cc3333;text-decoration: none; }'
,'a:visited { color: #cc3333;text-decoration: none; }'
,'a:hover { color: #cc3333;text-decoration: none; }'
]
});


Allereerst wordt het font (de swf) ingeladen. De prefetch zorgt ervoor dat de flash movie niet elke keer opnieuw ingeladen hoeft te worden en met activate() wordt de boel (logischerwijs) geactiveerd. Tot slot wordt de replace functie aangeroepen, waarin nog enkele configuratiemogelijkheden zitten:

• selector: hiermee worden de html elementen (met eventuele classes of id’s) gedefinieerd waarop de vervanging van toepassing moet zijn.
• css: hiermee kunnen de stijlen worden bepaald voor alle elementen (.sIFR-root) of per element apart (zie de a, a:visited en a:hover declaraties).
• filter: flash 8 bevat ook een aantal filters die hierin kunnen worden gedefinieerd. Hier kan je denken aan drop shadow, blur of ander soort effecten.

Noot: de kleur die ingesteld kan worden bij het ‘css’ attribuut moet 6 karakters groot zijn in hexadecimaal formaat. Declaraties als ‘#00f’ of ‘blue’ zijn dus niet toegestaan.

Noot: In de demo die bij dit pakket wordt geleverd, staan nog een paar mooie voorbeelden van configuraties. Zie hiervoor de bron van de index.html.

De CSS

Tot slot moeten we nog even de css definiëren. In dit gedeelte wordt de font grootte gedefinieerd. Ook hier weer even een voorbeeldje.

.sIFR-active h1 {
margin: 20px 0 0 0;
font-size: 19px;
line-height: 1em;
}


Belangrijkst hierbij zijn de font-size, die het font in de flash aanpast en de line-height, die ervoor zorgt dat de tekst exact de grootte van de font-size krijgt. Deze laatste mag je dus niet vergeten!

En dan…

Heb je nu al deze instellingen gedaan zou het moeten werken. Dus: refresh de pagina en bewonder het resultaat. Ziedaar een ontzettend handige tool die je in staat stelt om design het niet te laten verliezen van functionaliteit.

Mocht je meer willen lezen, breng dan een bezoekje aan de officiële site.

• Tweet