sIFR – Tecnica per il Text Replacement

Ci sono davvero molti modi e tecniche per far in modo di utilizzare un determinato font nei nostri siti web.
Mi riferisco soprattutto a titoli, notazioni, header.
Si va dalla più banale produzione manulae di immagini alle tecniche di produzione di testi tramite librerie ed estensioni in Php.

Molto popolare e diffusa è una tecnica chiamata sIFR (scalable Inman Flash Replacement), che andremo ora a commentare per capire come funziona. La pagina ufficiale di questa utile applicazione si trova a questo link, da cui (oltre la documentazione) è possibile scaricare i file utili al corretto funzionamento.

sIFR integra l’uso di Flash, Javascript e Css. Vedremo come sia facile customizzare questa soluzione per il nostro sito web.
Scaricando lo zip ci troviamo di fronte a diversi file (il consiglio è di copiarli nella root del vostro sito) ma solo alcuni dovremmo modificare.

Una volta scelti gli attributi Css (nel nostro caso i titoli h1 e h2) e scaricati i font da includere (ad esempio Futura e Comics) passiamo a produrre i file swf che generanno i titoli con i font incorporati.

Apriamo il file “sifr.fla” e modifichiamo il campo di testo dinamico, includendo il primo font, ossia Futura.
Ora salviamo il fla in swf e lo chiamiamo “futura.swf“.
Stesso procedimento per il secondo font, avremo cosi il secondo file che si chiama “comics.swf“. Bene.

Apriamo ora il file Css chiamato “sIFR-screen.css” e, tralasciando le prime 3 classi (non toccatele) scriviamo questa riga:

.sIFR-hasFlash h1, .sIFR-hasFlash h2 { visibility: hidden; }

Questa dichiarazione nel file Css si riferisce al replace dei due attributi, h1 e h2. La regola è indispensabile a nascondere il testo html rimpiazzato se sIFR è attivo correttamente.

Ora creiamo un file js nuovo e dentro mettiamo queste righe:

if (typeof sIFR == "function") {
  sIFR.replaceElement("h1", "futura.swf", "#CC0000",
null, null, "#FFF", 0, 0, 0, 0);
  sIFR.replaceElement("h2", "comics.swf", "#006699",
null, null, "#FFF", 0, 0, 0, 0);
}

Ovvio che per ogni attributo Css, c’è una riga dedicata. Il primo elemento è appunto l’attributo Css (h1 o h2), il secondo parametro è il nome del file swf creato prima, poi il colore del testo, il colore di sfondo, le impostazioni per il padding.
Il file lo chiamiamo “provareplace.js” e lo mettiamo sempre nella root del sito.

Ora non rimane che richiamare le funzioni js e i Css dentro la nostra pagina web, in questo modo:

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

Faccio notare che:
- il file “sifr.js” non va toccato ed è il file che gestisce un pò tutto;
- il file “provareplace.js” è il file js creato da noi e che richiama i nostri swf;
- il file “sIFR-screen.css” è il Css modificato che nasconde h1 e h2 quando sIFR è attivo;
- il file “sIFR-print.css” è il Css utile per la stampa e non va toccato.

Attendiamo le vostre prove.