Cela faisait un moment que je cherchais à augmenter la lisibilité[1] des textes de ce blog sans modifier ni la couleur des caractères, ni la couleur de fond. Ce n'est pas très compliqué, finalement : il suffit d'ajouter une ombre. Solution simple trouvée ailleurs et à laquelle je n'avais encore jamais songé[2].
Après quelques tests plutôt concluants, les CSS du thème actuel[3] sont à présent truffées de ce genre de déclaration :
text-shadow: #xxyyzz 1px 1px;
Où j'ai opté pour une valeur de chaque octet xx, yy et zz de la couleur de l'ombre (codage RVB en hexadécimal) obtenue en diminuant de #20 (=32 en décimal) la valeur de l'octet correspondant de la couleur de fond. Exemple : pour une couleur de fond égale à #625F40, la couleur de l'ombre vaudra #423F20. Quelque soit la couleur des caractères.
Quant aux zones dans lesquelles le texte ne doit pas être ombré, il suffit de défaire l'héritage CSS par un retentissant :
text-shadow: 0 0;
Ça couine un peu du côté de l'outil de validation du W3 C qui considère, à juste titre, que cette syntaxe n'est pas conforme à la norme CSS 2.1. Sauf que les ombres sont plutôt bien affichées par les navigateurs Chrome, Firefox, Opera et Safari dans leurs versions récentes (testés sur mon ordi, ce que confirme cette page du site developer.mozilla.org).
Mais pas avec Internet Explorer 8[4] (ou antérieur) qui refuse catégoriquement de mettre la police à l'ombre...
[1]Je parle de la forme, pour le fond c'est une autre histoire...
[2]Oubli d'autant plus étrange que j'ai une propension quasi compulsive à mettre des ombres un peu partout.
[3]Évidemment, rien ne garantit que le thème en vigueur au moment où vous lirez ce billet soit identique à celui utilisé au moment où j'ai écrit ces lignes...
[4]Ce qui m'est tout à fait indifférent. Je sais qu'il existe des alternatives propres à Microsoft, mais non.
1. par Franck, le lundi 16 août 2010 à 07h54 commentaire
J'ai l'impression que c'est plus lisible en effet, mais est-ce vraiment perceptible ? Ça reste peut-être à la frange de ce qu'on peut distinguer, par contre on peut facilement distinguer l'effet en mettant du texte en surbrillance.
2. par mirovinben, le lundi 16 août 2010 à 08h17 commentaire
L’effet est plutôt discret, c'est voulu. Il dépend sans doute du réglage de l’écran et de sa technologie : je suppose qu’avec un CRT, ça doit être moins net. Et je n’ai pas essayé avec un affichage des caractères sans aliasing.
3. par Ysabeau, le lundi 16 août 2010 à 09h51 commentaire
Effectivement la version ombrée (Firefox) est plus lisible que la version qui ne l'est pas (Internet explorer). C'est encore plus évident pour la barre de droite qui manque de contraste et qui, de fait, n'est pas super lisible.
4. par jyp, le lundi 16 août 2010 à 10h56 commentaire
En tout cas la photo m'a fait froid dans le dos !
5. par Pep, le lundi 16 août 2010 à 13h20 commentaire
J'allais justement dire que j'adorais la photo d'illustration...
6. par Cunégonde, le lundi 16 août 2010 à 16h43 commentaire
Après avoir lu le texte, je comprends mieux la photo.