HTML Zen Garden – The beauty in HTML code

Non, ce blog n’est pas mort ! Bien que ce soit encore STPo qui s’y colle…

La lettrine, c’est la première lettre d’un paragraphe mise en exergue. Le plus souvent, elle est sublimée grâce à un corps de texte plus important et parfois à l’aide d’ornements graphiques.

Je m’intéresserai ici au cas d’une lettrine simple en utilisant la pseudo-classe CSS first-letter, a priori toute indiquée pour un contenu en HTML.

Quelques règles typographiques

En fouinant sur le web, je suis tombé sur ce vieil article qui rappelle les règles à suivre concernant les lettrines. Je les reproduis honteusement ici :

1. La lettrine porte généralement sur deux lignes, parfois plus ;
2. Elle ne doit pas être découverte ; au moins une ligne doit doubler sous la lettrine ;
3. L’espace du premier mot doit être adapté en fonction de la lettrine ;
4. La fin du premier mot s’écrit en petites capitales ;
5. Le sommet de la lettrine doit être visuellement aligné avec les ascendantes des lettres de la première ligne du texte.

C’est le point 5 qui va nous poser problème ici, à cause des différences d’interprétation par les moteurs graphiques des navigateurs (une fois n’est pas coutume)…

Un peu de code

Le code, ici, est enfantin. Le CSS :

/* font-size à 1em et line-height à 1.5 */
p{ 
    font-size: 1em;
    line-height: 1.5;
    width: 30em;
    margin: 3em auto;
}

/* font-size à 3em et line-height à 1, ce qui correspond en théorie à la hauteur de 2 lignes de texte courant
    et float pour laisser courir le texte */
p:first-letter{
    float: left;
    font-size: 3em;
    line-height: 1;
    margin-right: 0.2em;
}

/* juste pour mettre le premier mots en petites capitales */
p span{ font-variant: small-caps; }

Et le HTML :

    <p>
        <span>Lorem</span>
        ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

Et maintenant, la partie désagréable…

Firefox le pénible

Voici les résultats des interprétations de la démo par les navigateurs :

On constatera que c’est globalement homogène chez Internet Explorer (versions « modernes »), Webkit et Opera, mais que Firefox 3.6 décale inexplicablement la lettrine vers le haut. Même Firefox 2 s’en sortait mieux (bon, il sautait une ligne supplémentaire mais au moins c’était aligné).

En tant qu’ayatollah affiché du rythme vertical, tout cela me chiffonne un brin. Non pas que j’utilise les lettrines très souvent (c’est même plutôt rare), mais j’aimerais bien comprendre d’où vient ce défaut.

J’ai trouvé cet article qui en parle mais n’aborde pas le point qui me gêne ici et se contente d’affirmer que la lettre ne passe pas en type block (malgré le float).

J’en appelle donc aux fans de prises de tête. À vos plumes, à vos idées, à votre bon cœur !

STPo