Même si les CSS 2 sont extrêmement puissantes, elle ne permettent pas encore d’habiller du texte comme il est possible de le faire à l’aide d’un logiciel graphique. Il faut alors songer à remplacer le texte par une image, mais hors de question de faire ça n’importe comment. Petit tour d’horizon des méthodes à la mode.
La méthode FIR
C’est l’une des premières méthode du genre. Elle consiste à encadrer le texte d’un titre par une balise span. Cette balise permet de cacher le texte pour ne laisser apparaitre que l’image de remplacement en fond de titre.
Elle possède plusieurs défauts : le texte n’est pas lu par JAWS et des balises superflues sont ajoutées.
La méthode LIR
Cette méthode est beaucoup plus intéressante : on cache le texte en lui appliquant un retrait négatif tout en l’occultant à l’aide de l'overflow. Seul l’image de remplacement reste visible en fond de bloc. Les problèmes précédents sont résolus : il n’y a plus de problèmes d’accessibilité, ni de balisage inutile. Cependant, plus rien n’est affiché lorsque l’on désactive les images mais pas les feuilles de style. (À noter également des résultat aléatoires en combinaison avec des CSS-frames peu orthodoxes)
La méthode Gilder/Levin
Cette méthode résout le problème de la technique précédente mais en régressant sémantiquement. Il s’agit de faire précéder le texte à cacher par un span vide. Celui-ci contiendra l’image qui se superposera au texte. En plus d’introduire du code supplémentaire, cette méthode laisse apparaitre le texte lorsque l’image est transparente (pour raccorder avec le fond par exemple) ou lorsque le texte est de taille trop importante (texte trop long ou de police très grande).
Tout ça pour dire qu’aucune solution n’est complètement satisfaisante. Ma préférée reste la méthode LIR malgré ses lacunes. Il faudra peut être se tourner vers d’autres technologies pouvoir enfin remplacer du texte parfaitement…
Le détail des techniques
4 replies on “Choisir une technique pour remplacer du texte par une image”
Merci pour ce point de vue condensé…
Mais peut-être faudrait-il parler de la nouvelle méthode introduite par CSS3 :
.title { visibility: hidden; } .title:outline { background: url(...); }Enfin je voulais ajouter une technique que j’utilise personnelement depuis pas mal de temps. Elle consiste à spécifier une taille de fonte à 0 pour le texte à remplacer. Cela ne fonctionne pas très bien sous IE (la taille de fonte minimal est 1) mais ça reste utilisable.
Le problème est encore et toujours lorsque l’utilisateur désactive les images et pas la feuille de style.
PS: Peux-tu agrandir un peu ta boite de commentaires stp ?
Voilà j’ai agrandi la taille du champ pour les commentaires. Et je comprend pas pourquoi il n’y pas les retours à la ligne dans les commentaires…
merci pour ce récapitulatif!
En effet, on est souvent en train d’utiliser une technique ou une autre en improvisant sur le moment. (enfin on… =je, mais ça doit toucher pas mal d’autres personnes)
Pour la méthode LIR, ne pas oublier un "background-repeat: no-repeat;" qui permettra d’utiliser la méthode même sur "IE5 Mac" sans voir son image dupliquée à l’infini.