[SPIP 1.9 et GD2] Voici un effet particulièrement à la mode : le texte et le fond peu contrastés, une légère lueur autour des caractères adoucissant encore la typo. On va dans ce qui suit réaliser l’effet suivant :

Afin de régler notre choix de couleur, et pour avoir une version de notre titre qui fonctionne même sans charger les images, commençons en mode texte.

Voici un style qui approche l’effet recherché, directement en CSS :

À l’heure actuelle, à ma connaissance, seul Safari (MacOS) est capable d’afficher le style text-shadow, ce qui donne ceci :

Au pire, on obtient le texte dans la bonne couleur (#829891), sur le fond également de la bonne couleur (#eeeeee), et il manque le halo.

Nous allons maintenant réaliser notre effet avec la fonction image_typo de SPIP 1.9, ce qui nous laissera le choix de la police de caractères. Pour cette explication, j’ai utilisé la police « Migraine » de Stereo-Type.

Le principe est similaire à ce que nous avons déjà expliqué pour réaliser une ombre portée : nous allons réaliser deux versions (un titre net devant, une version floue pour créer le halo derrière) de notre titre, et les superposer.

Voici pour le titre net :

On voit que le simple choix des couleurs, peu contrastées, ne suffit pas à rendre l’effet de titre très doux : sans le halo grisé derrière les lettres (pourtant peu visible), le contraste est trop important.

Réalisons donc une deuxième version du titre, cette fois en appliquant un flou à un titre gris :

Notez que nous avons appliqué deux flous successifs (c’est-à-dire 3 + 3 pixels), au lieu d’un seul image_flou{6}, très long à calculer. Au pire, si PHP s’interrompt après le premier calcul (timeout), il aura sauvegardé le résultat, et pourra partir de là pour calculer le second ; avec le image_flou{6}, il n’y a pas de sauvegarde intermédiaire et, si le serveur ne peut pas réaliser le (gros) calcul dans le temps imparti, il ne le réalisera jamais.

Maintenant il nous suffit de placer le halo exactement sous le titre net. Puisque nous avons appliqué deux flous de 3 pixels, il faut décaler cette image de 3 pixels vers la haut et la gauche pour la « recentrer » (l’effet image_flou agrandit l’image).

Voici un code tout simple pour réaliser la superposition (on peut évidemment l’améliorer) :

On peut évidemment faire un autre choix de couleurs. Par exemple :

Voici une variante qui consiste à renforcer tout de même le contraste du halo, uniquement à l’immédiate proximité des lettres. Il ne s’agit pas de renforcer l’ensemble du halo, mais d’ajouter un peu de contraste juste autour des lettres.

On insère entre les deux « couches » précédentes un halo plus foncé, mais moins flou.

On obtient le résultat suivant :

On a assez nettement renforcé la lisibilité, mais le rendu est moins « doux ».

Il y a quelques années, avec un choix de couleurs plus vives — vert, blanc et fond noir — et une police de caractères de vieille machine à écrire — Trixie, de LettError —, on réalisait très exactement selon ce principe, mais dans Photoshop, la typographie des premières saisons de X-Files :

Pour terminer, remarquons que, tel que fourni ici, le code insère le titre en double ou en triple dans les alt des images. De fait, dans un affichage en mode texte, on obtiendrait l’équivalent de ceci :

Une solution consiste à vider l’attribut alt des images du dessous, pour ne conserver que celui de l’image supérieure. On peut utiliser le filtre inserer_attribut pour cela. Les deux paramètres qu’on va lui passer sont :
— l’attribut qu’on souhaite insérer (alt) ;
— la valeur de cet attribut (' ', c’est-à-dire le caractère « espace »).

On pourrait de plus objecter que la solution « propre » à cette difficulté consisterait, tout simplement, à faire afficher le halo comme image de fond (background-image) et non comme image réelle (img). Mais comme nos caractères sont en PNG 24 et qu’on exploite la transparence par couche alpha de ce format, nous avons besoin d’intégrer ces images typographiques dans un img pour pouvoir les afficher correctement dans Microsoft Explorer.