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 :
- La lettrine porte généralement sur deux lignes, parfois plus ;
- Elle ne doit pas être découverte ; au moins une ligne doit doubler sous la lettrine ;
- L’espace du premier mot doit être adapté en fonction de la lettrine ;
- La fin du premier mot s’écrit en petites capitales ;
- 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
19 commentaires ↓
Je viens de chercher avec Firebug, sans succès… Tu devrais peut-être soumettre le bug à Mozilla, si ce n’est déjà fait.
En fait c’est déjà fait : https://bugzilla.mozilla.org/show_bug.cgi?id=415506
Tiens, ça n’existe pas
first-word?Entre first-letter et first-line, ça serait bien.
@Pascal : Bien vu. D’un côté, ça me rassure, de l’autre ça ne résout pas mon problème ! Espérons que ce soit vite patché, j’aimerais éviter de passer par un sale hack…
@Vinzente : Oui, je me suis fait la même réflexion, ce serait bien pratique.
Du reste je suis toujours un peu mal à l’aise à skinner les pseudo-classes en CSS, dans la mesure où ce ne sont pas des éléments du DOM à proprement parler et que la maîtrise qu’on a sur leur comportement me semble aléatoire. Leur box-model est autre, ils sont intouchables, ils ne sont pas comme nous !
Utiliser la même syntaxe pour cibler un état (
:activepar exemple) et un élément (ou un bout d’élément, comme:first-line) me paraît pour le moins inopportun.Bref.
Bonsoir,
Merci Christophe pour cet article intéressant. Je me suis penché sur le problème il y a peu mais je n’avais pas constaté concrètement ce décalage (font+line-height = visuellement acceptable). Mais après lecture de l’article, je vais revoir ma copie et mettre tout ça de coté pour le moment. Cependant, ces « petits » problèmes sont désagréables car peu de monde s’en préoccupe (mode du CSS3). Après mettre imposé un bon mal de tête j’attendrai donc le path de firefox ou appliquerai un avec du JS (non je rigole).
Pour le :first-word il est encore temps pour en faire part à Daniel Glazman et l’implémenter dans les specs du CSS3.
Au fait Christophe, si tu nous faisais part de ton sale hack pour corriger ce problème 😉
@Xavier Merci pour ton intervention, effectivement il pourrait être intéressant de parler de first-word à Daniel (allez zou j’y cours… euh, demain).
Le hack en question (soufflé par Vincent) est le suivant :
De mémoire il est possible de faire d’autres acrobaties du genre pour filtrer uniquement les bonnes versions de Firefox mais d’aucuns souffleront avec raison « boah, à quoi bon ? »…
Tant qu’à avoir un « first-word », un « last-word » serait pas mal aussi. Ca permettrait des fioritures graphiques, par exemple mettre une image pour faire un point de fin de phrase avec : p:last-word:after {}
La véritable question c’est : la lettrine a-t-elle du sens sur le web ? (vous avez une heure)
@Pascal : pas bête, ça ! J’ai poké Daniel Glazman, on verra bien.
@Stef : Et la lettrine tout court, quel est son « sens » ? Quand je vois la presse en ligne commencer à sortir du carcan du template de blog post froid et uniforme pour faire des vraies maquettes personnalisées pour leurs articles comme ça, je me dis que oui, la lettrine, comme sur le print, pourquoi pas.
Dans l’écrit, la lettrine a un rôle d’appel de l’oeil.
Je n’en ai pas la preuve, mais je parierais que c’est une invention des moines copistes de l’époque où on ne marquait pas les paragraphes par un saut de ligne mais par un caractère (¶).
Et en quoi tout cela ne serait pas applicable au web, Professeur ?
Merci pour cet article remue-méninges, comme d’habitude sur HTML Zen Garden !
Après quelques investigations : sur Firefox 3.6, le
:first-letterenfloatse place tout en haut de la box qui le contient. C’est le comportement normal pour unfloat, donc pas de problème à ce niveau (un screenshot de Firebug montrant les limites de la box).Le problème viendrait plutôt de la box
:first-letter, qui ne semble pas du tout réagir auline-height, comme le montre ce screenshot avec unbackgroundsur le:first-letterPareil avec les propriétés
widthetheight, qui ne réagissent pas du tout sur Firefox, tandis que Webkit gère ça sans problème.Firefox doit nous faire un mix entre le
display:inlineet lefloat… le inline-float !@stpo bin je sais pas, je trouve que ça a rudement moins de sens, sans doute.
Si je voulais m’entêter, je dirais que dans un pavé très très lourd de texte, une lettrine est le seul moyen de voir que là vraiment et là seulement il y a une respiration.
Cela dit, pour me répondre à moi-même, la plupart des lettrines enluminées n’ont tout de même qu’un rôle décoratif…
En même temps, objecté-je à mon encontre, je crois qu’un site qui en est à faire une lettrine a généralement déjà fait le reste du chemin.
Mais tu as raison, rétorqué-je derechef. On n’est pas forcé d’utiliser toute la boîte à outils à chaque fois, pour autant on n’a aucune raison de se priver de l’avoir.
Je retire ce que j’ai dit
(le lecteur attentif aura noté que tout de même, on est plusieurs sous mes cheveux)
@STPo : « Utiliser la même syntaxe pour cibler un état (:active par exemple) et un élément (ou un bout d’élément, comme :first-line) me paraît pour le moins inopportun. »
Là-dessus, CSS3 a clarifié les choses : les pseudo-éléments, c’est « :: », par exemple « ::first-line »
http://www.w3.org/TR/css3-selectors/#first-line
@Pierre : merci pour tes compléments d’infos, il n’y a hélas pas grand chose à faire contre cette sorcellerie donc !
@Stef : vous êtes finalement tombés d’accord, c’est le principal !
@JulienW : ah bin comme quoi la nature est bien faite ! Merci pour le tip…
[…] ← First-letter et lettrine […]
En complément :
[…] First-letter et lettrine — HTML Zen Garden […]
bonjour je n arrive pas a trouver quand la premier lettrine a etait faite et par qui ??
Laisser un commentaire