Le but de la méthode étant de permettre aux visiteurs de votre site de visualiser le contenu avec une police spéciale, que vous avez créée, ou que vous avez acquise en même temps qu'un logiciel, il faut bien sûr le fichier .ttf (True Type Font) ou .otf (Open Type Font) correspondant à cette police. Sous Windows, vous pouvez la trouver dans le répertoire C:/WINDOWS/Fonts.

Les différents fichiers également nécessaires sont indiqués au fur et à mesure que l'on en a besoin.
L'article dont je vous ai parlé étant très bien écrit, je vais vous en faire une traduction personnelle, pas toujours très correcte, en donnant le mode opératoire pour insérer tout ça sur votre blog.

PHP

Ce petit script PHP (disponible ici) fournira une image png dynamique à notre navigateur à chaque fois qu'il le demande. Avant de le placer à l'endroit approprié sur le serveur ftp,il doit être customisé. Les sept premières lignes du code dans le script sont de cette forme :

    $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 doit être le chemin local (pas l'URL) vers un fichier TTF ou OTF. C'est la police avec laquelle vos images seront créées.
  • $font_size, sans surprise, se rapporte à la taille de la police en points.
  • $text_color et $background_color sont des codes de couleur hexadécimaux qui indiquent respectivement la couleur du texte, et couleur du fond de l'image.
  • Quand $transparent est à true, les bords du texte de l'image seront mélangés avec le $background_color pour empêcher l'anticrénelage (anti-aliasing), et la couleur réelle de fond sera entièrement invisible.
  • En mettant $cache_images à true, et $cache_folder comme chemin local d'un dossier de cache, ce script sauvera chaque image qu'il crée, les mettant dans le cache pour un usage postérieur. Ceci peut de manière significative accélérer le chargement des images chez vos visiteurs, et est particulièrement important sur les serveurs partagé.


Pour installer ce script, le télécharger sur votre serveur ftp, dans le dossier de thème de votre blog. Il faut savoir que ce script nécessite la version 1.6 minimum de la librairie graphique GD pour fonctionner Dans ce même dossier, uploader votre .ttf ou .oft, et créer un dossier cache avec un CHMOD 777.

Une chose que notre personnalisation de script n'a pas incluse était le texte qu'il deva utiliser pour produire nos images faites sur commande. C'est parce que le texte que nous employons pour produire ces images sera passé au script par l'intermédiaire de son URL. Par exemple, en chargeant l'URL heading.php?text=URLs%20Are%20Fun affichera une page avec « URLs Are Fun » écrit avec votre police. Mais nous ne devrons jamais les écrire nous-mêmes, parce que le Javascript le fera pour nous.

Javascript

Télécharger le fichier source Javascript ici.
Nous emploierons ce script pour remplacer le texte avec des images qui n'existent même pas encore. Quand la page se charge, le script essaiera de charger une petite image (image d'essai de Pixel 1x1). Si cet essai est réussi, nous pouvons conclure que le navigateur du visiteur permet l'affichage des images, dans le cas contraire de la bande passant aura été économisée. Ainsi, si le chargement des images est interdit sur le navigateur, le script s'arrêtera là.

Le navigateur du visiteur permettant l'affichage des images, le script attend alors jusqu'à ce que la page soit entièrement chargée, car qu'il ne peut pas remplacer le texte qui n'a pas encore été téléchargé (logique!). Une fois que le HTML est chargé complètement, notre script recherchera les éléments indiqués (<h2>, <span>, etc.) et remplacera le texte à l'intérieur de ceux-ci avec une balise <img>. Cette balise dynamique <img> a son attribut alt avec pour valeur le texte original, et son attribut src avec pour valeur l'URL du script PHP que nous venons juste d'installer. Le script PHP renvoie alors une image png customisée, et voila : un contenu personnalisé.

Pesant dans les huit kilo-octets lourds, il y a beaucoup de code dans ce script, mais il y a seulement deux lignes qui doivent être adaptées pour que le script fonctionne.

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

La fonction replaceSelector prend trois paramètres : le premier est le sélecteur de style CSS qui indique quels éléments devront être remplacés. Ce sélecteur peut être presque n'importe quel sélecteur valide CSS, y compris des sélecteurs d'identification, de classe, d'élément et d'attribut. Le deuxième paramètre est l'URL de notre script de customisation PHP. Le troisième paramètre a pour valeur true/false qui indique si la coupure à chaque mot doit être activée pour ce remplacement. Quand ce paramètre est placé à true, les textes sont coupés en plusieurs images, une pour chaque mot. Quand il est à false, seulement une image unique est créée pour chaque texte.

La fonction replaceSelector doit être appelé à chaque fois que vous voulez personnaliser un certain type. L'URLs dans ces lignes peut être absolue (http://…) ou relative à notre dossier de thème (chemin/nom de fichier).
var testURL doit être l'URL d'une petite image (1x1 pixel).

Pour utiliser ce script avec dotclear, je vous conseille de mettre des URL complète. Exemple :

replaceSelector ("h2", "http://nom-de-votre-serveur/repertoire-de-votre-blog/themes/nom-de-votre-theme/heading.php" , true) ;
var testURL= = "http://nom-de-votre-serveur/repertoire-de-votre-blog/themes/nom-de-votre-theme/img/test.png" ;

Exemple de ce qui est possible, avec ce que j'ai réalisé sur mon blog. Ma sidebar est divisée en deux menus, de classe #blognav et #blogextra. Dans le CSS, les titres des widgets utilisent les sélecteurs CSS #blogextra h2 et #blognav h2 :

replaceSelector("#blogextra h2","http://noumea.nicohans.fr/themes/noumea/heading.php",true);
replaceSelector("#blognav h2","http://noumea.nicohans.fr/themes/noumea/heading.php",true);
var testURL = "http://noumea.nicohans.fr/themes/noumea/img/test.png" ;

Créez un dossier img dans votre dossier de thème (s'il n'existe pas déjà) et mettez-y l'image de test.
Créez également un dossier 'js' histoire de regrouper vos .js dedans. Mettez-y votre replacement.js modifié.
Ouvrez ensuite le fichier _head.html de votre thème. Insérez-y le code suivant :
 
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/replacement.js"></script>

C'est tout ce qui est exigé pour obtenir le remplacement dynamique de textes ; nous pouvons nous arrêter là si nous le voulons. Mais il y a quelques améliorations facultatives que nous pouvons vouloir apporter.

Versions imprimables (à partir de là, les manips sont facultatives)

Beaucoup de sites utilisent maintenant des feuilles spécialisées de modèle d'imprimante pour donner à leurs visiteurs les meilleurs imprimés possible. Dans beaucoup de cas ceci implique de renverser le processus du remplacement d'image de sorte que la copie imprimée d'une page emploie les polices réelles plutôt que les images, qui sont souvent moches avec des imprimantes haute résolution.

Malheureusement, le Javascript fait défaut pour résoudre ce problème. Une fois que nous avons remplacé notre texte avec une image, il est impossible de renverser ce processus spécifiquement pour l'impression, ainsi nous devons trouver une autre solution. Au lieu d'essayer de renverser notre processus de remplacement, nous pouvons faire une petite planification en avant.

En insérant une balise <img> dans nos textes, nous pouvons également insérer une balise <span> qui contient le texte original. Et nous pouvons placer la propriété de l'affichage de cette balise à none, de sorte qu'elle n'apparaisse pas à l'écran. Maintenant nous avons deux copies de notre texte original : une dans une image, et un span invisible à l'écran. En donnant à chacun de ces éléments des attributs de classe identifiables (respectivement replacement, et print-text ), et en ajoutant dans une feuille de style 'imprimer' spécifique, nous pouvons permuter leurs propriétés d'affichage lors de l'impression.

La feuille de style suivante pourrait être employée pour produire une version imprimable de votre site appropriée :

span.print-text {
display: inline !important;
}
img.replacement {
display: none;
}

Une fois que vous avez uploadé cette feuille de style dans le dossier de thème de votre blog, il faut changer deux lignes dans notre Javascript pour qu'il fasse le travail :

var doNotPrintImages = false;
var printerCSS = "replacement-print.css";

En plaçant doNotPrintImages à true, et printerCSS à l'URL de la feuille de style que vous avez uploadée, le script insérera automatiquement la balise <link> appropriée dans le <head> du blog.

Flicker Free

Puisque notre script ne peut pas commencer à remplacer des éléments avant que la page soit chargée entièrement, il y aura souvent un flash rapide de contenu sans style car le navigateur attend le processus de remplacement pour commencer. C'est plus un ennui mineur qu'un problème, mais puisqu'il est évitable nous pourrions aussi bien le corriger. A l'aide d'une autre petite feuille de style, nous pouvons justement le faire.

Avant que le corps du document commence à charger nous pouvons insérer dynamiquement une feuille de style qui cachera ces éléments entièrement. Durant la période de remplacement des textes, aucun contenu ne sera visible. Une fois que notre technique de remplacement a fini d'être exécutée, nous pouvons neutraliser cette feuille de style et nos textes nouvellement stylisés seront visibles à nouveau.

Par exemple, si votre page était configurée pour remplacer les textes avec la balise <h2>, la feuille de style suivante les cacherait jusqu'à ce que notre technique de remplacement soit finie :

h2 {
    visibility : hidden ;
}

Il y a cependant un léger problème avec cette approche. Notre technique entière dépend du chargement d'une image de test pour indiquer si le navigateur accepte l'affichage des images. Si l'image ne charge jamais, notre technique ne s'activera jamais. Et si notre technique ne s'active jamais, la feuille de style qui cache les textes non mis en forme ne sera jamais désactivée. Pour cette raison, les visiteurs qui ont neutralisé l'affichage d'image dans leurs navigateurs, mais qui sont encore capables d'utiliser le Javascript et le CSS, ne verront rien mais un espace vide où nos textes devraient être.

Nous allon donc ajouter un timeout au script. Si l'image de test n'a pas été chargée avec succès après une ou deux secondes (ou le temps que vous voulez), le script neutralisera automatiquement cette feuille de style, et les titres réapparaîtront. Ces une ou deux secondes sont un léger dérangement pour ces utilisateurs particulièrement rares qui sont dans ce cas, mais il résout le problème de clignotement pour les autres 99.99% de nos visiteurs. L'important est de maintenir l'accessibilité pour chacun.
Pour permettre cette personnalisation facultative, et enlever le bref flash de contenu non mis en forme, vous devez éditer trois lignes dans le javascript :

var hideFlicker = false;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 1000;

Mettre hideFlicker = true, et hideFlickerCSS à l'URL complète du fichier de style que vous venez de créer.
hideFlickerTimeout prend la durée en millisecondes lors de laquelle le script laissera cette feuille de style avant de la neutraliser.