5542 sujets

Sémantique web et HTML

Il existe en CSS la pseudo-classe :first-letter. Cette pseudo-classe permet, comme son nom l'indique, d'identifier la première lettre d'un élément.
Mais, ainsi que le rappelle Raphaël dans son livre (page 143 pour ceux qui l'ont sous la main Smiley cligne ):
1. les propriétés line-height, display, width et height ne peuvent porter sur cette pseudo-classe;
2. elle n'est pas supportée par IE<=5.5

Damned.

Une alternative proposée consiste à écrire quelque chose comme

<p><span class="lettrine">L</span>a lettrine pose des problèmes.</p>

Cette alternative permet de contourner les limitations de :first-letter, mais présente des inconvénients: il faut à chaque fois que dans le code, figure explicitement le span avec la bonne classe (lourd à mettre en oeuvre), et de plus, <span> n'a pas de valeur sémantique permettant d'identifier son contenant comme une lettrine.

Je vois un autre souci, relatif à l'accessibilité. Une synthèse vocale lit séparément le texte quand il est tronçonné par des balises. Dans le cas présent, cela nous donnerait
Elle a lettrine pose des problèmes.
... ce qui n'est pas très sympathique.

Il faut donc garder le premier mot entier.

Je pense que l'on pourrait garder l'utilisation de la pseudo-classe first-letter, et la compléter par l'utilisation d'un petit JavaScript non obstrusif. Il pourrait reconnaître la première lettre de chaque bloc visé, et en modifier l'apparence:
- ajout dynamique d'un span? bof, certaines synthèses le liraient aussi;
- superposition d'une image, fonction de la lettre (l.gif, pa exemple) avec un z-index qui va bien? mais cela pose des problèmes de redimensionnement et de positionnement du texte environnant (quoiqu'avec un bon float, cela devrait aller...). Et si l'on active le JS mais désactive le CSS, je ne suis pas sûr du résultat...

D'autres idées? Qu'en pensez-vous?
Modifié par Gilles (23 Aug 2005 - 09:33)
Salut,
D'autres idées, non je ne vois pas...dsl..
Le mieux est peut-être de se passer de lettrine

Sinon au passage,
a écrit :
Une synthèse vocale lit séparément le texte quand il est tronçonné par des balises

Mais alors, sur mon site qui n'ai prévu encore pour les handicapés...les textes en gras, de couleurs différentes et autres... ils sont à chaque fois lu séparément ?
Je vais chercher un tel logiciel freeware ou en démonstration, pour tester ceci.
Gilles a écrit :
Il existe en CSS la pseudo-classe :first-letter. Cette pseudo-classe permet, comme son nom l'indique, d'identifier la première lettre d'un élément.
Mais, ainsi que le rappelle Raphaël dans son livre (page 143 pour ceux qui l'ont sous la main Smiley cligne ):
1. les propriétés line-height, display, width et height ne peuvent porter sur cette pseudo-classe;


En fait, c'est petit peu plus compliqué que cela, car CSS2.1 corrige la liste des propriétés applicables à :first-letter:
- text-shadow disparaît (puisqu'elle disparaît totalement de la spécification)
- clear n'est plus obligatoirement applicable
- letter-spacing et word-spacing sont obligatoirement applicables
- chaque navigateur peut y ajouter d'autres propriétés.
- enfin, pour obtenir un rendu typographique correct, l'agent utilisateur peut choisir les valeurs de line-height, de width et de height basées sur la forme de la lettre.
- line-height, comme en CSS2.0, est obligatoirement appliquable

De fait, pour se limiter à Opera (tester dans d'autres navigateurs) :
- line-height "remplace" en quelque-sorte la propriété height. S'il n'est pas appliqué à float, c'est l'équivalent d'un line-height sur :first-line. Dans le cas contraire, il permet le plus souvent d'obtenir un effet similaire à height.
- width est sans effet, mais letter-spacing, éventuellement associé au padding, permet le plus souvent de produit l'effet recherché avec width.

Gilles a écrit :

2. elle n'est pas supportée par IE<=5.5

Damned.


Let it be... Smiley cligne Le "lâcher prise" sur le détail de rendu prend ici tout son sens.


Gilles a écrit :

Une alternative proposée consiste à écrire quelque chose comme

<p><span class="lettrine">L</span>a lettrine pose des problèmes.</p>

...

Je vois un autre souci, relatif à l'accessibilité. Une synthèse vocale lit séparément le texte quand il est tronçonné par des balises.


J'en profite pour souligner que d'autres balises découpant un mot sont problématiques dans un lecteur d'écran, et particulièrement l'utilisation de <sup> pour les :
1<sup>er</sup>

... qui sera lu "1 é", alors que "1er" non découpé avec le sup sera lu "premier" par les lecteurs actuels... Voir la discussion en commentaires dans http://www.tutoweb.com/blog/index.php?2005/03/29/324
Modifié par Laurent Denis (01 Aug 2005 - 08:41)
Graph-Site a écrit :

Mais alors, sur mon site qui n'ai prévu encore pour les handicapés...les textes en gras, de couleurs différentes et autres... ils sont à chaque fois lu séparément ?


Non. Ce n'est pas du tout problématique, tant que le balisage ne tronçonne pas un mot de manière incompréhensible. Ce que l'on fait assez rarement en pratique.

Exemple :

On ne <strong>dit pas</strong> des cheval<strong>s</strong>, mais des chev<strong>aux</strong>. C'est <strong>impo</strong>rtant !


Qui sera renduvisuellement par quelque-chose comme :
a écrit :
On ne dit pas des chevals, mais des chevaux. C'est important !


Ici :
- le premier <strong> qui ne découpe pas un mot, n'est pas du tout problématique
- le second <strong> est un amusant contre-exemple : il découpe le mot et sera donc lu "cheval ès"... Ce qui éclaire au contraire le sens en faisant entendre le "s" qui serait absent sans ce balisage Smiley cligne
- Le troisième, qui découpe un mot, est peut-êtreun peu problématique car le rendu reflète le sens, mais peu dérouter : "chev o" (lu et entendu en deux "mots")
- le dernier, qui est absurde, serait très problématique, car le rendu vocal (selon les lecteurs) risque ne plus avoir aucun sens : "impo èr tant"
Modifié par Laurent Denis (01 Aug 2005 - 09:14)
Raphael a écrit :

Steve m'aurait-il menti ? Smiley biggol


Steve n'a sûrement pas menti. Mais l'information est franchement périmée : je ne sais même plus à l'occasion de quelle version d'Opera la propriété float a-t-elle été ajoutée sur le pseudo-élément :fort-letter Smiley lol
Merci beaucoup Laurent denis pour ces explications Smiley cligne

Je suis encore HS, mais je ne parviens pas à trouver de navigateur vocal freeware...j'ai bien trouver des lecteurs, mais il ne permettent pas de naviguer sur le web...

@ +