Steve Frécinaux

CSS: Lettrines sans balisage

On voit régulièrement, sur internet, des textes agrémentés de lettrines. Mais bien souvent, il s’agit simplement d’une première lettre dont la seule particularité est une taille légèrement plus importante que celle de ses consoeurs. Une façon simple d’obtenir ce résultat est celle-ci :

p:first-letter { font-size: larger }

Cependant, le résultat que l’on obtient n’est guère réjouissant : la lettre ainsi agrandie reste sur la même ligne que les autres. Ce n’est pas la peine de donner un exemple, je suis sûr qu’ils vous viennent déjà à l’esprit. Avec les possibilités des CSS, il est certainement possible d’obtenir quelque chose de mieux, sans pour autant ajouter de balisage supplémentaire.

Les lettrines se présentent souvent (notamment dans les livres) sous la forme de lettres qui ne dépassent pas du bloc du paragraphe vers le haut, et à côté desquelles se trouvent plusieurs lignes de textes. Somme toute ce que l’on obtient avec une image et un style CSS float:left… Ce style donne déjà de bons résultats.

Pour donner un aspect plus travaillé à la lettrine, j’ai alors appliqué d’autres styles, pour obtenir des lettrines avec bordure. J’ai alors rencontré quelques problèmes. Il semblerait en effet que certaines propriétés ne puissent être appliquées via :first-letter. Parmi celles-ci, display, line-height ou encore width et height. Nous voici donc obligé de tripatouiller avec bordures internes et externes pour obtenir un résultat satisfaisant. Il est bien dommage de ne pas pouvoir manipuler cette lettrine comme un bloc à part entière…

Pour homogénéiser un peu les différentes lettrines, je me suis alors résolu à utiliser une police à chase fixe. C’est là le meilleur résultat que j’ai obtenu. Pour aller plus loin, je pense qu’actuellement, je serais obligé d’encadrer mes initiales par <span class="lettrine">. Néanmoins, cette solution permettrait de traîter cette lettre comme un bloc à part entière, et via les classes, d’utiliser des images comme lettrines. Avec l’inconvénient d’ajouter un peu de marquage non-sémantique.

Et pour la compatibilité, me demanderez-vous ? Et bien ça passe très bien sous Firefox 0.8 (ce qui est plutôt normal, étant donné que je travaillais avec ce navigateur), très bien aussi sous Safari, mais par contre le rendu sous Internet Explorer laisse à désirer. Ceci pourrait être évité en employant un petit BMH afin de définir une petite marge intérieure verticale. Et pour Opéra ? Apparemment il ne reconnait pas le float:left sur :first-letter