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
):
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
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)
Mais, ainsi que le rappelle Raphaël dans son livre (page 143 pour ceux qui l'ont sous la main
):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)
