Les designers et les intégrateurs seront tous d’accord avec moi : la typographie pour le web est un véritable casse-tête. Si l’on veut pauffiner un tant soit peu sa mise en page, on se retrouve très vite face a des choix cornéliens : soit on mise sur l’accessibilité, et dans ce cas, on se retrouve bloqué au panel très peu élargi de polices disponibles, soit on mise sur la qualité graphique, et l’on remplace l’ensemble de ses titres par des images.

Si la première solution n’a pour seul inconvénient de frustrer le graphiste, la deuxième va l’obliger, dans le cas d’un blog par exemple, de générer une multitude de titres, ce qui s’avère etre relativement chronophage. De plus, lorsque le site changera de look, quelqu’un devra se farcir la corvée de changer tout les titres, un par un.

Bien sur, il existe des solutions basées sur Flash, comme sIFR, mais cette dernière n’est pas vraiment un must en terme d’accessibilité, bien au contraire.

Or, il existe une solution simple, efficace, et accessible, pour remplacer dynamiquement du texte par des images. Cette solution, publiée par Stewart Rosenberger sur A List Apart, est basée sur deux outils que nous connaissons bien : PHP, couplé à la librairie graphique GD, et JavaScript.

Pour exemple, vous pouvez aller jetter un oeil sur mon blog ou sur la page de démo, ensuite, nous verrons comment mettre cette solution en place très facilement.

PHP

Télécharger le script PHP

L’objectif du script PHP est de créer à la volée les images dont vous aurez besoin. Pour ce faire, vous devrez modifier quelques paramètres :

  $font_file = 'font.ttf' ;
  $font_size = 56 ;
  $text_color = '#ffffff' ;
  $background_color = '#000000' ;
  $transparent = true ;
  $cache_images = true ;
  $cache_folder = 'cache' ;

• La variable $font_file définit la police à utiliser pour générer vos titres;
• La variable $font_size définit la taille de police à utiliser;
• Les variables $text_color et $background_color définissent les couleurs de texte et de fond;
• Lorsque $transparent est fixé à true, les bords du textes seront mélangés avec la couleur de fond;
• En fixant $cache_images à true et $cache_folder a un répertoire accessible en ecriture, vous permettrez au script de sauvegarder les titres générés, ce qui peut représenter un gain non-négligeable en terme de bande passante et de charge serveur, surtout si vous etes hébergé sur un serveur mutualisé.

La seule chose qui n’est pas demandée dans la configuration du script, c’est le titre à générer. C’est normal, puisque nous passerons le titre en paramètre dans l’URL qui appellera le script. Par exemple, appeller la page heading.phptext=Mon%20nouveau%20titre%20est%20fun créera le titre “Mon nouveau titre est fun”.

Voilà, c’est tout. Maintenant, vous pouvez générer des titres à la volée, selon vos besoins.

Rien de bien formidable, certe, puisque beaucoup de script permettent déjà la meme chose. Là où la méthode de Stewart Rosenberger se distingue des autres, c’est qu’elle va utiliser JavaScript pour tester si l’utilisation d’une image est judicieuse ou non.

JavaScript

Télécharger la source JavaScript

Au chargement de la page, le script tentera de charger une image de test de 1×1 pixel. Si ce test réussi, on peut donc conclure que le navigateur prend en charge les images et qu’il ne s’agit donc pas d’un navigateur texte. Ensuite, le script attend le chargement complet de la page, puis, il cherchera les éléments spécifiés (<h2>, <span>, etc.) pour les remplacer par les images crées par le script PHP.

  replaceSelector("h2","heading.php",true);
  var testURL = "test.png";

La fonction replaceSelector accepte trois paramètres : le premier est le sélecteur CSS qui doit être remplacé par le script PHP. Ce sélecteur peut être n’importe quel sélecteur valide, y compris les class et les id.

Le second paramètre est l’URL du script PHP qui va générer les image.

Le troisième paramètre est un booléen qui indique au script s’il doit tronquer les titres après chaque mot (true) ou non (false).

Enfin, la variable testURL doit être fixée à l’URL d’une petite image PNG de test (1×1px).

Une fois que ces lignes sont configurées correctement, vous pouvez appeller le script dans votre document HTML :

  <script
    type="text/JavaScript"
    src="replacement.js">
  </script>

C’est terminé! Vous n’avez plus d’excuse pour ne plus styliser vos titres, alors… à vos blogs!