28220 sujets

CSS et mise en forme, CSS3

Pseudo-classe first-letter et lettrine

J'ai voulu utiliser la méthode de lettrine utilisant la pseudo classe first-letter. tout marchait bien. j'avance dans mon code et tout a coup je me rends compte que firefox ne la prends plus en compte ... ou plutot dupliquel 'effet de lettrine rechercher.

En gros il fabrique bien la lettrine, mais reproduit la première lettre juste aprés, comme si de rine n'étais c'est assez déroutant.

démonstration ici : http://maxime.goepp.free.fr/orient-latin_2.0/index.htm

opéra et IE n'ont pas de soucis. Ce qui est bisard c'est que cette partir du code n'a pas bougé depuis un petit moment ... si quelqu'un à une idée Smiley smile

Merci,
ce qui est marrant c'est que lorsque l'on sélectionne l'une des deux lettres (celle en lettrine ou l'autre), les deux se retrouvent selectionnées, ça ressemble à un petit bug ... Smiley smile
en virant le float:left de la pseudo classe, ça fonctionne ... si ça peut aider à comprendre le problème Smiley smile
C'est effectivement un bug Bidi de Gecko lié à la présence des caractères arabes dans le contenu du document:
<style type="text/css">
<!-- 
p:first-letter {
float: left;
}
-->
</style>

et :

<div>&#1593;</div>
<p>Foo</p>


Pas de solution à ma connaissance, mais à vérifier en explorant Bugzilla
Modifié par Laurent Denis (15 Aug 2005 - 14:37)
Pour compléter ces maigres infos : le résultat est identique quelque-soit la méthode d'encodage des caractères arabes (entité numérique, entité hexa, saisie directe en utf-8).

Je crains qu'il ne te faille renoncer à tes lettrines en float Smiley decu
Mince, l'effet est pourtant trés sympas et rends la lecture de textes tout de même assez longs plsu agréable.

En passant par une classe spéciale, comme dans le bouquin de raphael <span class="lettrine"></span> ça corrige l'erreur ?
Oui, tu pourras éviter le bug de Firefox avec un <span>.

Mais celui-ci rendra le plus souvent la lecture du premier mot incompréhensible dans les lecteurs d'écran Smiley decu

(Le première lettre sera lue séparément, et le reste du mot au petit bonheur la chance)

<edit>
Un meilleur compromis serait de conserver un effet sur :first-letter sans recourir au float. Les propriétés rappelées dans ce message pourront peut-être t'inspirer
Modifié par Laurent Denis (15 Aug 2005 - 16:35)
Sujet clos
Aller à