Niveau : Confirmé

Exploiter n'importe quelle police dans vos pages HTML avec FLIR

Pouvoir exploiter n'importe quelle police de caractère dans le contenu des pages web sans avoir à créer systématiquement des visuels (des images) est une demande récurrente de la part des designers. Nous lésinons cependant à accéder à leur requête car si diverses solutions existent déjà (hack CSS @font-face, sIFR...), elles posent un certain nombre de difficultés : compatibilité cross-browser, validité du code source en regard du W3C, accessibilité, emploi de technologies propriétaires…

Ce tutoriel vous propose de mettre en place rapidement Facelift Image Replacement (ou FLIR), une alternative intéressante à sIFR, car elle ne requiert pas Flash.

Tutoriel par
Créé le , mis à jour le (45264 lectures)
Tags : xhtml, design, police, remplacement, font, sifr, cufon

FLIR est une solution axée sur une combinaison PHP/Javascript. Elle génère dynamiquement une image à partir d'un texte contenu dans votre page web dans une police de caractère déposée sur votre serveur et qui, autrement, ne pourrait pas être vue par vos visiteurs. L'image générée sera automatiquement insérée dans votre page à l'aide de Javascript et visible sur tous les navigateurs modernes. N'importe quel élément contenant du texte peut être remplacé depuis les headers (<h1>, <h2>, etc...) jusqu'aux éléments <span>.

Avant de vous jeter les yeux fermés dans l'éxecution de ce tutoriel, sachez que désormais CSS offre la possibilité - beaucoup plus souple et accessible - d'inclure une police "exotique" dans une page web grâce à la propriété @font-face. Par ailleurs, l'utilisation de FLIR requiert un serveur web supportant PHP et la librairie GD. PHP5+ est recommandé mais PHP4 devrait fonctionner également. Une version récente d'ImageMagick (6.3+) est requise pour bénéficier des effets offerts par les plug-ins FancyFonts et QuickEffects (que nous n'aborderons pas dans ce tutoriel).

Et voilà ce que vous devriez obtenir :

rendu FLIR

Etape 1 - Mise en place de Facelift

Avant toute chose, téléchargez Facelift v1.2 (dernière version stable) sur http://facelift.mawhorter.net/download/. Décompressez l'archive téléchargée sur votre serveur (de préférence dans son propre répertoire). Pour simplifier ce tutoriel, j'ai renommé le répertoire d'origine "facelift/".

facelift

A l'intérieur du répertoire "facelift/" se trouve un fichier Javascript nommé "flir.js".
Vous pouvez choisir de le laisser à l'endroit initial ou de le déplacer où bon vous semble, par exemple dans un répertoire où vous centralisez vos fichiers JS. Pour ce tutoriel, nous allons déplacer le fichier dans un répertoire "js/" à la racine de notre site.

Ouvrez "flir.js" dans un éditeur de code et rendez vous ligne 28. Vous devriez voir ceci :

  ,path: ''

Nous avons besoin de définir entre apostrophes un chemin absolu ou relatif vers notre répertoire "facelift/".
Toutefois, les chemins relatifs le sont à la page et pas au fichier "flir.js", ce qui peut causer des problèmes avec les sites qui utilisent l'url rewriting. Ainsi, le moyen le plus sûr que tout fonctionne est de définir un chemin absolu.

  ,path: 'facelift/'

Ouvrez la page HTML dans laquelle vous souhaitez ajouter FLIR et imbriquez la ligne suivante entre les balises <head> pour attacher "flir.js" :

  <script src="js/flir.js" type="text/javascript"></script>

Ensuite, ajoutez ceci juste avant la balise </body> fermante :

  <script type="text/javascript">  
    FLIR.init();  
    FLIR.auto();  
  </script>

Etape 2 - Choisissez et configurez vos polices

Téléchargez les polices que vous souhaitez utiliser. Placez les dans le répertoire "fonts/" au sein du répertoire "facelift/".

Pour les besoins de ce tutoriel, j'ai utilisé les polices suivantes téléchargées sur DaFont :

Remarque : ces 4 polices sont au format TTF, mais les polices au format OTF fontionneront également avec FLIR.

Ouvrez "config-flir.php" dans lequel vous trouverez un bloc de code qui ressemble à ceci :

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] = 'ArtOfIlluminating.ttf';
$fonts['okolaks']      = 'okolaksBold.ttf';
$fonts['wanta']        = 'wanta_091.ttf';

// The font will default to the following (put your most common font here).
$fonts['default']      = $fonts['okolaks'];

Chaque clé (array) dans le tableau "$fonts" correspond à une police que vous avez placé dans le répertoire "fonts/".

Ajoutons les polices que nous avons téléchargé précédemment :

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['hardrock'] 	= 'HARD_ROCK.ttf';
$fonts['brushed'] 	= 'BRUSHED.TTF';
$fonts['remington'] 	= 'Remington-Noiseless.ttf';
$fonts['rayair'] 	= 'rayairregular.ttf';

La mention (clé) entre crochets est celle qu'il faudra utiliser dans notre feuille de styles lorsque nous souhaiterons appliquer les polices à du texte. Pensez donc à quelque chose d'à la fois simple et pertinent :).

Remarque : la police assignée à la clé $fonts['default'] sera utilisée par défaut si aucune autre n'est spécifiée. Dans notre exemple, nous utiliserons la police Rayair.

// The font will default to the following (put your most common font here).
$fonts['default'] = $fonts['rayair'];

Il existe une multitude d'autres options à définir dans le fichier "config-flir.php", mais nous allons les laisser de côté pour ce tutoriel de démarrage. Le fichier est explicitement commenté si vous souhaitez en tester d'avantage et vous pourrez également vous référer à la documentation (en anglais) sur le site de FLIR (http://facelift.mawhorter.net/doc/).

Etape 3 - Styler :)

L'ultime manoeuvre consiste à créer notre feuille de styles comme nous le faisons habituellement.
Utilisez les clés définies dans le tableau $fonts (vu plus haut) en tant que nom de police dans vos déclarations.
Nous allons appliquer à notre page la police Hard Rock à l'ensemble des balises <h1>, la police Brushed à toutes les balises auxquelles seront attribué la classe .brushed et la police Remington-Noiseless à toutes les balises <p> associées à la classe .remington.

h1{
  font-family: hardrock, Arial, Helvetica, sans-serif;
}

.brushed{
  font-family: brushed, Arial, Helvetica, sans-serif;	
}

p.remington{
  font-family: remington, Arial, Helvetica, sans-serif;
}

Il reste pour finir à spécifier au bas de votre fichier HTML les éléments à remplacer dans votre contenu en listant dans la fonction FLIR.auto() que nous avions ajoutée à l'étape 1 vos sélecteurs CSS précédemment créés.

<script type="text/javascript">  
  FLIR.init();  
  FLIR.auto([ 'h1', '.brushed', 'p.remington', 'strong.important' ]);   
</script>

Dans notre exemple, FLIR remplacera donc par des images l'ensemble des balises <h1>, toutes les balises auxquelles est attribuée la classe .brushed et toutes les balises <p class="remington">.

Les éléments <strong class="important"> seront remplacés par la police par défaut spécifiée plus haut dans le fichier "config-flir.php", car strong.important n'a pas été défini dans notre feuille de styles.
Le texte dans l'image générée prendra la taille spécifiée par la propriété font-size. FLIR prendra également en charge la couleur, l'espace entre les lettres, mais pas l'ensemble des possibilités de transformation de texte (text-transform, font-weight, font-style…) offertes par CSS.

Attention : si le texte que vous souhaitez remplacer passe sur plusieurs lignes, il vous faudra activer le mode "wrap" de FLIR. Pour ce faire, rendez-vous en ligne 689 du fichier "flir.js". Vous devriez voir ceci :

  mode: '' // none (''), wrap,progressive or name of a plugin

Activez le mode "wrap" ainsi :

  mode: 'wrap' // none (''), wrap,progressive or name of a plugin

Une dernière remarque pour finir, mais non des moindres : le dossier "facelift/" et son sous-dossier "cache/" doivent avoir des droits en écriture afin que les images puissent être générées (écrites) sur le serveur.

Conclusion

Bien que FLIR soit une solution de remplacement de texte par des images relativement propre, il persiste quelques problèmes mineurs. La librairie PHP GD n'offre pas un rendu finement détaillé de toutes les polices et, dans certains cas, vous pourrez voir apparaitre quelques artefacts (notamment dans le cas de polices très graphiques que vous afficheriez en un peu trop petit). Un autre léger défaut de FLIR est qu'il requiert un serveur web supportant PHP et la librairie GD. Celà dit, mis à part quelques services gratuits la plupart des hébergeurs proposent aujourd'hui les deux.

Un bénéfice de FLIR par rapport à sIFR (son concurrent le plus direct) reste qu'il demeure bien plus facile à implémenter et qu'il ne requiert pas Flash pour générer et visualiser les polices. L'utilisation de FLIR (pour ce qui est de ces options les plus basiques en tout cas) ne pose pas de problème de validité du code en regard des préconisations du W3C.

FLIR est également davantage accessible. Il est lu par les lecteurs d'écrans et lorsque les images et/ou Javascript sont désactivés, le contenu (sous forme de police "standard" cette fois) apparaît toujours. Il apparaît également en "dur" dans le code source de votre page HTML. Dans un navigateur traditionnel et toutes options activées, on ne peut néanmoins pas opérer de sélection sur le texte.

Quoiqu'il en soit, la méthode à privilégier désormais avec CSS est l'utilisation de la règle @font-face avec un fichier de police.

Note : Adaptation du tutoriel initialement rédigé en anglais par James Lao : http://net.tutsplus.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/