PRATIQUE CLIENTS WEB 
sIFR : pour une typographie personnalisée sur le Web
 
En combinant JavaScript, DOM et conteneurs Flash, le script SIFR offre la possibilité d'utiliser exactement la police voulue pour l'affichage des titres d'une page Web. (13/07/2006)
  Forum

Réagissez dans les forums de JDN Développeurs

En combinant JavaScript, CSS et Flash, siFR autorise les Web designers à utiliser la police de caractère de leur choix, pour de courts passages de texte. Ainsi, ils sortent du carcan imposé par l'état actuel du Web, où le designer ne peut choisir la police avec laquelle son contenu s'affichera, mais au contraire doit deviner, avec plus ou moins de bonheur, quelles polices seront disponibles sur le système de l'internaute.

Avec l'arrivée de Flash, l'utilisation de polices personnalisées devenait possible, mais pas forcément simple implémenter. Sans compter que les textes devenaient invisibles en l'absence de Flash. Après diverses évolutions, sIFR (pour Scalable Inman Flash Replacement) propose une solution utilisant le DOM pour récupérer les textes présents dans les balises HTML, et produire le bon fichier SWF.

sIFR fonctionne en premier lieu avec JavaScript. Une fois le contenu XHTML chargé, une fonction est lancée pour test la présence du plugin Flash dans le navigateur, et récupérer le contenu des balises ciblées (désignées par leur id ou leur classe). Ceci fait, sIFR créé un fichier Flash de la même taille que le texte XHTML original, et place ce fichier au-dessus du texte. Le fichier Flash récupère alors le texte, et l'affiche à la bonne taille. Le tout ne prend que quelques millisecondes, est totalement accessible, et ne nécessite que quelques kilo-octets supplémentaires, chargés une fois pour toutes dans le cache.

Utilisation
La version 3 de sIFR en est encore au stade alpha, mais la version 2.0.2 est déjà utilisée par plusieurs milliers de sites. L'intégration est des plus aisées. sIFR est conçu avant tout pour les titres de page, mais peut être intégré au site après la conception initiale de celui-ci. Notez qu'il est déconseillé d'utiliser sIFR pour remplacer des liens HTML...

Ouvrez le fichier sifr.fla fournit dans l'archive, double-cliquez une fois sur le conteneur occupant toute la scène du fichier, et sans modifier le texte, choisissez une police dans le panneau Propriétés. Ceci fait, exportez le fichier modifié sous le nom nomDeLaPolice.swf. Si vous avez besoin de caractères spéciaux, non disponibles par défaut en anglais, ajoutez-le par le biais du bouton Intégrer du panneau Propriétés. Vous pouvez ainsi vous créer une bibliothèque de fichiers SWF pour exploiter vos polices.

Les principaux réglages à surveiller...

Intégrez ensuite les contenus des fichiers sIFR-print.css et sIFR-screen.css à votre modèle de page HTML, et appelez le fichier sifr.js depuis la zone head de votre modèle (via une balise script). Ajoutez ensuite la ligne JavaScript suivante pour indiquer les classes ou id des éléments à prendre en compte :
  1. if (typeof sIFR == "function"){
  2.   sIFR.replaceElement("*.lapin, .rose", "/tahoma.swf");
  3.   sIFR.replaceElement(".hello, #test", "/centurygothic.swf");
  4.   };
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page