sIFR: come installare e configurare correttamente il font replacement

sIFR è una combinazione di Javascript e Flash, che permette di visualizzare dinamicamente il testo utilizzando Flash. Il maggiore punto di forza è che permette di essere sicuri che il sito sia visbile allo stesso modo sui maggiori browser, in modo morbido e dettagliato. Il testo poi è selezionabile e di fatto rimane HTML. Come per altri metodi simili, esistono però alcuni punti deboli.

Eccoli riassunti:

• i visitatori devono avere Flash e JavaScript installati e attivati: altrimenti verrà mostrato il testo con l’eventuale presentazione CSS
• sIFR non offre piena compatibilità per dispositivi mobili quali PDA e telefoni cellulari
• il suo utilizzo potrebbe rallentare il caricamento del sito

sIFR: come funziona

Il principio di funzionamento di sIFR è un misto tra CSS, Javascript e Flash. Vediamolo in dettaglio:

• Javascript, se abilitato, verifica la presenza del Flash Player
• In caso positivo, lo script individua gli 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").

sIFR: dove usarlo

Con 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ò usato esclusivamente per i titoli, e preferibilmente andrebbe evitato sui link. Questi infatti vengono "mascherati" da Flash, e non sarà possibile con sIFR attivo controllare dove porta un link sulla barra di stato del browser.

sIFR: file necessari

Per prima cosa occorre scaricare l’utlima versione di sIFR o la versione ufficiale 2.0.7. Per questo tutorial useremo la versione sIFR 3 r419, contenente solo i file di cui abbiamo bisogno:

• css/sIFR-print.css, che contiene gli stili per la stampa
• css/sIFR-screen.css, che contiene gli stili per il Web
• js/sifr.js, che contiene il "core" di sIFR (da non modificare)
• js/sifr-config.js, che serve per definire e attivare sIFR
• flash/sifr.fla (con i relativi file .as), che serve per inserire il font

Di seguito tutte le risorse usate per completare l’esempio, e una anteprima del risultato.

sIFR: impostare Flash per inserire il font

Per prima cosa occorre procurarsi il font da includere nel file swf. Per questo esempio useremo Fontin, liberamente utilizzabile.
Per formattare correttamente i diversi stili, il font deve essere OpenType TT, cioè avere tutti gli stili inclusi.
Scarichiamolo e installiamolo nel sistema operativo.
Fatto questo, apriamo con Flash il file sifr.fla: il file è suddiviso in livelli. Facciamo doppio clic sulla stage per visualizzare il testo Bold, Italic e Normal.
Clicchiamo poi nella riga di testo: nel pannello Proprietà scegliamo Fontin. Per includere gli stili, applichiamoli rispettivamente al testo Bold, Italic e Normal.
Senza modificare altro esportiamo il filmato: File->Export->Export Movie, facendo attenzione a selezionare Filmato SWF tra le impostazioni. Chiamiamo il filmato fontin.swf

sIFR: caricare i file in pagina

All’interno del tag head inseriamo i collegamenti ai file necessari:

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" />
<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>

sIFR: configurare e attivare il font

Per configurare sIFR apriamo il file vuoto sifr-config.js.
Quello che ci accingiamo a fare è definire il nome del font e il link al file flash:

var fontin = {
   src: 'flash/fontin.swf'
};

Abbiamo definito una variabile che si collega al nostro file Flash. Questo comando non fa ancora niente, fintantoché non la attiviamo digitando il comando di attivazione:

sIFR.activate(fontin);

Adesso abbiamo bisogno di definire quale testo deve essere sostituito con il testo in flash. Per fare questo, usiamo il comando di sostituzione in sIFR3:

sIFR.replace(fontin, {
   selector: 'h2'
});

Abbiamo appena sostituito tutto il testo contenuto nel tag h2, ma possiamo sostituire il testo dentro qualsiasi tag, anche se questo, come detto prima, potrebbe rallentare sensibilmente il caricamento del sito.

sIFR: applicare gli stili

Ora che sIFR3 funziona, abbiamo bisogno di applicare gli stili, cosa che facciamo modificando di nuovo il file sifr-config.js file e il file sIFR-screen.css.
Apriamo il file sIFR-screen.css: non modifichiamo le righe di codice che si trovano dopo /*---- sIFR ---*/, e occupiamoci di ciò che si trova dopo /*---- Header styling ---*/.
Specifichiamo la classe .sIFR-active e impostiamo la visibilità su "nascosto", per rendere visibile solo il testo rimpiazzato:

/*---- Header styling ---*/

.sIFR-active h2 {
  visibility:hidden;
  font-size:40px;
  padding:0;
  margin:0;
}

Adesso andiamo a modificare il colore del font, il colore di sfondo e il line-height, ma non solo.
Per modificarle, dobbiamo inserirle nel file sifr-config.js, in questo modo, richiamando la funzione CSS, facendo attenzione alla posizione delle virgole:

sIFR.replace(fontin,{
  selector: 'h2'
  ,css: [
  	'.sIFR-root { color: #FAC421; background-color: #FFFC7F; }'
 ]
});

Ecco a cosa fare attenzione: i comandi sono posti tra " ‘ "e una "," deve essere aggiunta dopo ogni comando, fatta eccezione per l'ultimo. Una cosa importante è che bisogna scrivere i codici dei colori nella loro forma completa, cioè #FFFFFF, non #FFF. Inoltre, come anticipato sopra, per ottenere la proprietà line-height, dobbiamo utilizzare leading, oppure ricorrere ai metodi JavaScript.

sIFR: modifiche avanzate sul testo

Adesso ci accingiamo a settare il file sifr-config.js in modo che il testo assuma comportamenti personalizzati, per esempio, cambiare colore del carattere e dello sfondo, o applicare i filtri (di Flash).
Applichiamo le modfiche a una classe CSS chiamata multicolor associata a un altro titolo, questa volta h3:

sIFR.replace(fontin,{	selector: 'h3.multicolor'
	,css: [
    	'.sIFR-root { color: #775555; background-color: #010101; }'
        ,'em { font-style: italic; color: #444477; }'
        ,'strong { color: #44aa44; }'
        ,'.bold { font-style:bold; text-decoration:underline; }'
        ,'a { color: #aa4444; }'
        ,'a:hover { color: #bbbb44; }'
    ]
});

Facciamo la stessa cosa con la classe glow e shadow. Nell’esempio vediamo cosa succede.

Come potete notare, quando clicchiamo sul testo rimpiazzato da sIFR, si forma un bordo tratteggiato. Possiamo rimuoverlo agendo sul tag object, così:

.sIFR-active object  {
	outline:none;
	display: block;
}