sIFR: la nuova tipografia per il web

In questo articolo presenteremo quella che è, a detta di molti, una piccola rivoluzione della tipografia per il web, una soluzione che dà una risposta (parziale) a una domanda comune: è possibile incorporare un determinato font in un sito web?

Inman Flash Replacement e i suoi derivati

Ad Aprile 2004 Shaun Inman pubblica un articolo in cui presenta la IFR (Inman Flash Replacement), ovvero un modo per incorporare in pagine web un qualsiasi font grazie a Flash e Javascript. Da allora, sono uscite diverse varianti: in particolare si è rivelata molto promettente da subito la sIFR (scalable Inman Flash Replacement) creata da Mike Davidson a fine Agosto 2004 e, dopo diverse versioni, giunta alla 2.0 release Candidate 4 (una versione quasi definitiva). È di questa versione che ci occuperemo valutandone le caratteristiche, i pro e i contro.

sIFR: come funziona

Anzitutto vediamo subito l'esempio, che spiegheremo tra breve. Il principio di funzionamento della sIFR è un misto tra CSS, Javascript e Flash. Vediamolo in dettaglio:

• Javascript, se abilitato, verifica la presenza del Flash Player.
• In caso di riscontro positivo, lo script procede ad individuare uno o più elementi definiti da un sorta di
  selettore CSS passato come argomento della funzione principale.
• Questi elementi vengono nascosti da Javascript, e il loro contenuto è
  passato attraverso le flashVars ad un filmato Flash che incorpora un font specifico.
• Il filmato Flash, contenente il testo da rimpiazzare (che sarà selezionabile con il mouse) verrà quindi mostrato, cercando di occupare la stessa area del testo che sostituisce (da qui il termine "scalable").

Questo è il principio di funzionamento a grandi linee. C'è da evidenziare che se Javascript è disabilitato, o se il Flash Player (dalla versione 6 in poi) non è disponibile sul sistema dell'utente, verrà semplicemente mostrato il testo con l'eventuale presentazione CSS.

sIFR e Image Replacement a confronto

Fino all'uscita della IFR (e successivamente della sIFR) l'unico modo per avere un titolo con un determinato font era quello di preparare un'immagine, includerla come <img> o usare una tecnica di Le tecniche di Image Replacement. Quest'ultima soluzione si presenta molto più versatile rispetto all'uso di immagini nell'HTML, ma confrontandola con la sIFR perde molto del suo appeal. La sIFR infatti non richiede un file per ogni titolo, ma con un solo filmato Flash (più, come vedremo un file Javascript e due CSS) potremo rimpiazzare anche centinaia di titoli. La dimensione del file Flash (con estensione .swf) che contiene il font incorporato dipende soprattutto dalla dimensione del font stesso, ma si attesta intorno alla decina di KiloBytes. il problema è che la sIFR, per funzionare, richiede Javascript abilitato e il Flash Player dalla versione 6 disponibile, ma questi due requisiti sono entrambi presenti sul 90-95% dei browser degli utenti di internet.

Quando usare la sIFR

Questo articolo, che invito a leggere, riassume molto bene caratteristiche, pro e contro della sIFR. Quello che risulta è che si tratta di una tecnica accessibile, pratica ed piuttosto efficace. Con la sIFR potremo rimpiazzare titoli, link (anche con effetto hover) e intere sezioni di testo, dato che ha il supporto per il testo multi-linea. Andrebbe però usata esclusivamente per i titoli, e preferibilmente andrebbe evitata sui link. Questi infatti vengono "mascherati" da Flash, e non sarà possibile con la sIFR attiva controllare dove porta un link sulla barra di stato del browser.

Installare e configurare la sIFR

Dopo queste premesse, possiamo procedere a vedere come si usa questa tecnica, realizzando passo per passo l'esempio che abbiamo presentato in apertura. Ecco di cosa avrete bisogno:

• un editor di testo per HTML e CSS;
• Macromedia Flash versione 6 o successiva;
• un po' di font per rendere più accantivanti le vostre pagine web (potrete trovare ad esempio un bel po' di font free su questo sito).

La prima cosa da fare è realizzare, o avere a disposizione, una pagina HTML corredata da un foglio di stile a cui applicare la sIFR. Ecco la pagina iniziale che ho realizzato per sviluppare l'esempio.

Il secondo passo consiste nello scaricare l'ultima versione della sIFR, che nel momento in cui scrivo è la 2.0 RC3. Una volta scompattato lo zip, (preferibilmente nella stessa cartella del file HTML che abbiamo realizzato) troveremo al suo interno diversi file, gli essenziali sono:

sifr.fla: il file sorgente del filmato Flash in cui incorporare il font

sifr.js: lo script per effettuare il replacement grazie al filmato Flash

sifr-screen.css: il file CSS per lo schermo che seve alla sifr per funzionare

sifr-print.css: il file CSS per annullare o adeguare la sifr in fase di stampa

readme.txt: il file di istruzioni, che non seguiremo alla lettera ma a cui potrete riferirvi se riscontrate difficoltà nella lettura di questo articolo.

Ora apriamo il file sifr.fla con Macromedia Flash. È essenziale che i due file ActionScript (con estensione .as) vengano anch'essi scompattati nella stessa cartella del sorgente Flash. Questi due file servono infatti a Flash per produrre i file swf. Una volta aperto sifr.fla, facendo un doppio click sul rettangolo bianco nel centro dello stage entreremo nel textbox, rendendo visibile una scritta "do not remove this text". Un ulteriore click sul testo dovrebbe aprire il pannello proprietà, in cui vedremo le proprietà del carattere. A questo punto, attraverso la select potremo modificare il font che ci servirà per il replacement. Non sono necessarie modifiche nè sulla dimensione, nè sul colore del testo: saranno entrambi compito del Javascript come vedremo. Salviamo il file con un nome conveniente in formato fla, ed esportiamo il filmato, nella stessa cartella di lavoro, ossia quella che contiene la pagina HTML e lo zip della sifr scompattato, dal menu File->Esporta->Esporta filmato, avendo cura di esportare il filmato in versione 6. Il file .swf così prodotto è quello che ci serve. A questo punto possiamo chiudere Flash e procedere.

Una volta realizzati i filmati Flash (.swf) per la sIFR, non ci resta che metterci all'opera con CSS e JavaScript per attivarla. Dell'esempio semplice vogliamo rimpiazzare l'<h1>, l'<h2> e il paragrafo (<p>)con id="pullquote".

Per prima cosa agiremo quindi sul CSS, aprendo il file sIFR-screen.css, ovvero il file CSS dell'esempio che l'autore della sIFR ha preparato. Una parte del CSS non si può modificare, ma dal commento a metà pagina in poi cancelleremo tutto, per aggiungere le seguenti righe:

La regola appena vista è indispensabile a nascondere il testo html rimpiazzato se la sIFR può operare. Un CSS per la stampa è inoltre necessario per ripristinare il testo normale e nascondere il filmato Flash, ma in tal caso non saranno necessarie modifiche e/o aggiunte al file sIFR-print.css fornito nell'esempio.

A questo punto creeremo un nuovo file JavaScript, e aggiungeremo le dichiarazioni necessarie per effettuare la sostituzione dei titoli. Nel caso dell'esempio, ho realizzato un file .swf con il font "Aapex" per il titolo <h1>, uno con il font "Insaniburger" per rimpiazzare i titoli <h2> un terzo con il font "One Stroke Script LET" per il paragrafo in evidenza. Ecco le righe JavaScript che scriveremo nel nuovo file:

Quello che dovrete cambiare è il contenuto tra parentesi (ossia i parametri della funzione principale dellla sIFR), tenendo presente che è necessaria un'istruzione (ovvero una riga) per ogni gruppo di elementi che vorrete rimpiazzare. I parametri sono nell'ordine:

• selettore CSS su cui effettuare il replacement (sono anche validi selettori di classe e di id, a cui però verrà anteposto il nome del tag, per esempio h1#logo o h4.news),
• il nome del filmato flash con eventuale percorso,
• il colore del testo rimpiazzato,
• il colore per i link in stato normale e in stato hover (se non userete la sIFR sui link, basterà aggiungere due null,
• il colore di sfondo
• infine i quattro valori (top, right, bottom e left) del padding.

Il file JavaScript andrà salvato (io gli ho dato nome sreplace.js, ma un nome qualsiasi andrà bene, l'importante è l'estensione) anch'esso nella stessa cartella del file HTML, dei filmati Flash e del CSS per la sIFR.

Non ci resta ora che riaprire il file HTML semplice che avevamo preparato all'inizio e aggiungere nella sezione <head> della pagina le seguenti righe:

Ottenendo quindi il risultato finale.

Nota:Con le stesse aggiunte nella sezione <head> che abbiamo appena visto, possiamo applicare la sIFR a tutte le pagine che vorremo.

Questo, in breve, è il principio di preparazione per la sIFR. C'è una piccola aggiunta da fare: per regolare la dimensione del font sui titoli rimpiazzati, se necessario, potremo intervenire sul font-size o sul letter-spacing degli elementi rimpiazzati intervenendo sulle regole CSS del file sifr-screen.css. Nel caso dell'esempio non ce n'è stato bisogno. Codice e filmati swf dell'esempio sono disponibili per il download.

Accenniamo brevemente a una novità aggiunta proprio nell' ultima versione della SIFR, ovvero gli addons. È possibile infatti, grazie ai dei link con chiamate a JavaScript disabilitare la sIFR e mantenere la preferenza grazie ai cookie. Funzionalità che possono essere approfondite nella pagina di esempio dell' autore e l'articolo di presentazione della sIFR.

Note finali sulla sIFR

La sIFR è una tecnolgia già abbastanza diffusa e collaudata, accessibile e con un'elevata compatibilità cross-browser. È comunque piuttosto recente e, seppure prossima a una versione definitiva, non lo è ancora. Inoltre, cosa di cui non abbiamo ancora parlato, è una tecnologia piuttosto costosa, dato che richiede Macromedia Flash dalla versione 6 in avanti. Nel prossimo appuntamento presenteremo una soluzione un po' meno versatile ma senza dubbio più economica che ho realizzato con SwishMax. Alla prossima.