Accueil > weblog
- Lire le billet précédent - Lire le billet suivant -
Par Laurent Denis, le 24 mai 2004.
Amateur (modéré) de quelques smilies classiques pour ponctuer l'implicite de mes textes, j'avais de gros doutes sur leur valeur sémantique et leur accessibilité. Curieusement, c'est à travers une fonctionnalité de DotClear que je jugeais jusque-là superflue que j'ai fini par aboutir à une méthode accessible et simple pour les utiliser en toute bonne conscience.
Un smiley est le type même de contenu textuel détourné, au même titre que l'ASCII-Art : seul l'oeil humain (et son bagage culturel) peuvent le décrypter spontanéement. A priori, aucun média non graphique n'est supposé implémenter le support de cette fonctionnalité mineure. Que signifie alors un guillemet suivi d'une parenthèse fermante dans un lecteur d'écran ? Rien. Il n'est pas retranscrit et une nuance du discours se perd.
J'avais tenté auparavant un détour imprudent par les éléments abbr et acronym, sur le modèle :
<abbr class="smiley" title="Clin d'oeil">;)</abbr>
En effet, pourquoi faire simple quand on peut faire compliqué
?
Si vous préférez faire simple, et surtout accessible et sémantique, utilisez... des images :
<img src="..." alt="Clin d'oeil" />
Le sens du smiley sera immanquablement véhiculé dans tous les médias par l'attribut alt.
Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.
Commentaires
Gloom, le 25 mai 2004
Oui, mais, j'ai toujours détesté ces petites têtes jaunes, c'est vraiment pas beau, j'en reste donc à acronym ou abbr (il me semble que ce dernier n'est pas bien supporté, domage, d'un point de vue sémantique, il me semble plus approprié que acronym).
Laurent Denis, le 25 mai 2004
Je ne pousse pas mon intérêt pour la question jusque-là, mais rien n'empêche de personnaliser les images de smilies DotClear en faveur d'une version plus sobre...
mauriz, le 28 mai 2004
Je n'avais jamais pensé à utiliser abbr pour les smileys. Jusque là j'utilisais un span.
Laurent Denis, le 29 mai 2004
Mon propos était peut-être un peu rapide : mon utilisation précédente des abbr est un abus inutilement compliqué. Essentiellement, un smiley est un graphisme, il est plus logique (et plus simple) d'en faire une image.
Gloom, le 07 juillet 2004
J'ai réssament pensé au fait que l'on pouvais utiliser la balise abbr (ou acronym si on s'interresse au rendu sous MSIE) et ajouter l'image en css.
Par exemple (je n'ai pas essayé ce code qui est certainement à retravailler, c'est juste pour illustrer l'idée):
(X)HTML:
<abbr title="clin d'œil">;-)</abbr>
CSS:
abbr[title="clin d'œil"] {
visibility:hidden;
background: url("/clin_d-oeil.png") no-repeat;
}
Il me semble qu'il y a moyen de spécifier la taille de l'imge en css, mais, je ne suis pas sûr.
L'aventage, c'est qu'on peut avoir une feuille de style avec des smilies graphique et une autre avec des smilies textuel.
Laurent Denis, le 07 juillet 2004
Deux questions :
- un smiley est-il plutôt proche de l'abréviation ou du pictogramme, de l'idéogramme ? Dans ces derniers cas, c'est bien fondamentalement une image, qui doit alors figurer en dur dans le contenu.
- quel est le gain d'accessibilité de abbr par rapport à img ? Là où le alt de l'img sera systématique lu ou restitué, le title de l'abbr ne sera restitué que par certains medias d'accessibilité et s'ils ont été explicitement configurés pour cela...
J'en reste décidémment à l'image img... bien que j'ai la flemme de l'utiliser
Gloom, le 08 juillet 2004
> un smiley est-il plutôt proche de l'abréviation ou du pictogramme, de l'idéogramme ?
Je dirais aucun des deux, pour moi, il s'agit d'un ensemble lettre désignant une émotion, qui ne veut rien dire dans aucune langue et qui, avec le temps, est devenu un pictogramme (tiens, au fait, un attribut lang="none", si ça voulais dire quelque chose en (X)HTML, ça aiderait dans ce cas précis).
> quel est le gain d'accessibilité de abbr par rapport à img ?
Aucun, que du contraire (comme tu le souligne très bien), idem d'un point de vue sémentique.
En fait, je garde en tête l'idée de gestion de smilies par CSS, (parceque, les smilies était au départ du texte et que ce fait historique me semble important), mais, l'abbr ne conviens pas (je me le suis dit hier en lisant un débat sur les balises acronym et abbr).
Je viens de tester le <span title="clin d'œil">;-)</span> sur MSIE (qui ne montre pas le contenu de l'attribut title de la balise abbr) et, ce dernier montre le contenu de l'attribut title avec la balise span. Il faudrait tester sur plusieurs médias, mais, à priori, c'est ce qui me semble le mieux convenir.
Gloom, le 08 juillet 2004
J'ai aussi pensé à la balise dnf, mais, la façon dont elle doit être utiliser ne convient pas (dommage).
Laurent denis, le 08 juillet 2004
Tu dis très justement que "les smilies était au départ du texte et que ce fait historique me semble important".

Mais les smileys s'apparentent justement à l'ascii-art : c'est un détournement iconographique du texte, à une époque où on ne disposait d'aucun moyen de faire du contenu iconographique.
Les signes de ponctuation étant totalement détournés dans les smilies, il est temps de rompre avec l'ancrage historique du smiley dans le signe typo : puisque le Web a mûrit depuis, affirmons franchement que les smileys sont sémantiquement des images, et rien d'autres
Laurent Denis, le 08 juillet 2004
J'y retourne : prenons un smiley, par exemple
"point-virgule parenthèses fermantes" n'a absolument aucun sens, ni symboliquement rien d'associable avec le clin d'oeil.
On n'est pas ici en face d'un semble de lettres désignant une émotion dans la mesure où aucune exploitation de ces lettres ne se lie au sens voulu :
- ce ne sont pas des lettres;
- qu'on les prononce ou pas ne donne toujours aucun sens
- seul le regard et la symbolique qu'il induit créent du sens.
Il faut que j'ai un oeil humain, que je me torde symbliquement le cou, que j'ai les référents culturels correspondants... pour identifier ce clin d'oeil. Tout dépend entièrement de mon regard. Ce qui n'a de sens que sous mon regard... qu'est-ce que c'est à part une image ?
Gloom, le 08 juillet 2004
C'est vrai qu'il y a des pratiques qui disparesse avec le temps et que c'est tant mieux (les frames par exemple).
(hè, mais, nous, en commentant, on ne sais pas mettre d'image, que faire alors ?).
Tu m'a convincu d'un point de vue logique, mais, tu n'a pas encore vincu mon affection pour les smilies écrit avec des signes de ponctuations...
Gloom, le 11 juillet 2004
J'ai eu une idée pour combler mon envie de bien faire (d'un point de vue sémantique entre autre) et mon envie affective...
A ne faire que pour les nostalgique des smilies en carractaire comme moi:
(X)HTML:
<img src"clindoeil.png" alt="Clin d'œil" />
CSS (media:screen uniquement !):
img[alt="clin d'œil"] {
visibility:hidden;
// ou
display:none;
}
img[alt="clin d'œil"]:after {
content:";-)";
}
P.S.: Je n'ai pas testé non plus.
Laurent Denis, le 12 juillet 2004
Le display:none de l'image s'appliquera aussi au contenu généré avec :after.
Il faut faire simplement:
img[alt="blabla"] {
content:";-)";
}
Mais seul Opera applique le content sans :after ou :before.
Au passage : on ne met pas d'entités caractères dans des CSS.
Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.