{"id":2104,"date":"2003-10-17T23:11:29","date_gmt":"2003-10-17T23:11:29","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2104"},"modified":"2003-10-17T23:11:29","modified_gmt":"2003-10-17T23:11:29","slug":"13-choisir-une-technique-pour-remplacer-du-texte-par-une-image","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/13-choisir-une-technique-pour-remplacer-du-texte-par-une-image\/","title":{"rendered":"Choisir une technique pour remplacer du texte par une image"},"content":{"rendered":"

M\u00eame si les CSS<\/acronym> 2 sont extr\u00eamement puissantes, elle ne permettent pas encore d’habiller du texte comme il est possible de le faire \u00e0 l’aide d’un logiciel graphique. Il faut alors songer \u00e0 remplacer le texte par une image, mais hors de question de faire \u00e7a n’importe comment. Petit tour d’horizon des m\u00e9thodes \u00e0 la mode.
\n<\/p>\n

La m\u00e9thode FIR<\/acronym><\/h4>\n

C’est l’une des premi\u00e8res m\u00e9thode du genre. Elle consiste \u00e0 encadrer le texte d’un titre par une balise span<\/code>. Cette balise permet de cacher le texte pour ne laisser apparaitre que l’image de remplacement en fond de titre.
\n Elle poss\u00e8de plusieurs d\u00e9fauts : le texte n’est pas lu par JAWS et des balises superflues sont ajout\u00e9es. <\/p>\n

La m\u00e9thode LIR<\/acronym><\/h4>\n

Cette m\u00e9thode est beaucoup plus int\u00e9ressante : on cache le texte en lui appliquant un retrait n\u00e9gatif tout en l’occultant \u00e0 l’aide de l'overflow<\/code>. Seul l’image de remplacement reste visible en fond de bloc. Les probl\u00e8mes pr\u00e9c\u00e9dents sont r\u00e9solus : il n’y a plus de probl\u00e8mes d’accessibilit\u00e9, ni de balisage inutile. Cependant, plus rien n’est affich\u00e9 lorsque l’on d\u00e9sactive les images mais pas les feuilles de style. (À noter \u00e9galement des r\u00e9sultat al\u00e9atoires en combinaison avec des CSS-frames peu orthodoxes) <\/p>\n

La m\u00e9thode Gilder\/Levin<\/h4>\n

Cette m\u00e9thode r\u00e9sout le probl\u00e8me de la technique pr\u00e9c\u00e9dente mais en r\u00e9gressant s\u00e9mantiquement. Il s’agit de faire pr\u00e9c\u00e9der le texte \u00e0 cacher par un span<\/code> vide. Celui-ci contiendra l’image qui se superposera au texte. En plus d’introduire du code suppl\u00e9mentaire, cette m\u00e9thode 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\u00e8s grande). <\/p>\n

Tout \u00e7a pour dire qu’aucune solution n’est compl\u00e8tement satisfaisante. Ma pr\u00e9f\u00e9r\u00e9e reste la m\u00e9thode LIR malgr\u00e9 ses lacunes. Il faudra peut \u00eatre se tourner vers d’autres technologies pouvoir enfin remplacer du texte parfaitement… <\/p>\n

Le d\u00e9tail des techniques<\/p>\n