 |
Lettrine
Lettrine d'antan
À l'origine, la lettrine était utilisée dans les ouvrages soignés depuis les écritures gothiques au Moyen Âge. Les moines copistes réservaient, aux spécialistes de l'enluminure, un espace vierge en début de chaque paragraphe ou de chapitre. Cette lettre décorative est quelquefois colorée comme ce B.
Aujourd'hui les lettrines n'ont plus grand chose en commun avec ce travail laborieux. Elles se limitent à leur plus simple expression. On les retrouve abondamment dans les journaux. Une partie de la presse féminine et quelques revues s'efforcent d'y apporter un soin particulier.
Sur le web, la lettrine est plutôt rare. On la retrouve sur des sites très soignés graphiquement, des sites littéraires ou des quotidiens en ligne. Pour gagner en productivité, ces derniers utilisent des modèles prêts à l'emploi dans lesquels sont injectés le contenu du pigiste. La lettrine est alors boîteuse et s'intègre mal au bloc de texte.

Deux exemples pris sur Liberation.fr – 03/06/2008

Deux exemples pris sur LeMonde.fr – 03/06/2008

Meilleur positionnement pour Splitdadiz.com – 03/06/2008
Règles typographiques
La plupart des règles sont issues du Lexique des règles typographiques. Si elles se prêtent bien pour la PAO, il est difficile d'avoir un résultat impeccable sur une page web. Les outils d'édition ne permettent pas d'avoir une maîtrise sur le texte et l'affichage peut varier en fonction de l'environnement du lecteur. Il faut également être attentif aux petits soucis techniques en terme d'accessibilité (voir plus bas).
Ci-dessous, quelques règles pour appliquer des lettrines dans les règles de l'art:
- 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

La lettrine se place en début de chapitre, de page. On évitera de la disposer en début de chaque paragraphe. Cette fonction étant plus propice aux alinéas. Une lettrine ne peut contenir qu'un seul caractère. Éviter de commencer un texte avec une seule lettre, comme le À par exemple.
Si le texte commence par un guillemet, celui-ci sera mis dans un corps deux fois plus grand que le texte mais certainement pas de même corps que la lettrine. Il en va de même pour l'apostrophe. Le point après l'abréviation est composé dans le corps de la lettrine.
Techniques pour le web
Il y a deux techniques. La première repose sur l'utilisation d'une image. Elle est alignée à gauche du paragraphe. L'attribut alt sur l'image est important pour les moteurs de recherche qui récupèrent l'information dans leur base de données. Je ne garantis pas un résultat satisfaisant des lecteurs d'écran quand bien même le alt est stipulé. Notez aussi que l'image pose problème lors d'un copier-coller du texte vers un logiciel d'édition. Elle ne peut pas être agrandie en parallèle au texte et devra être retravaillée si le corps des paragraphes change. L'impossibilité de modifier la taille n'est pas ici un handicap par contre, certaines lettrines manquent de lisibilité.
orem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum urna. Donec ac velit. Vestibulum ullamcorper aliquet leo. Sed lectus diam, vehicula in, aliquet eu, euismod id, nisi. Quisque iaculis lacus vitae justo. Nullam interdum. Mauris mollis, ipsum in imperdiet sodales, nisl dolor facilisis risus, non bibendum lectus turpis suscipit nisi. Proin vel magna. Aliquam nibh. Nunc sapien velit, iaculis nec, condimentum vel, bibendum non, augue.
|
La seconde méthode met en forme la première lettre du paragraphe grâce à la pseudo-classe :first-letter. Malheureusement, elle n'est pas reconnue par les anciens navigateurs (< Internet Explorer 5.5) et pause problèmes aux autres dans certains cas. Aussi, des éditeurs HTML, comme Dreamweaver MX, ne gèrent pas correctement le rendu WISIWIG.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum urna. Donec ac velit. Vestibulum ullamcorper aliquet leo. Sed lectus diam, vehicula in, aliquet eu, euismod id, nisi. Quisque iaculis lacus vitae justo. Nullam interdum. Mauris mollis, ipsum in imperdiet sodales, nisl dolor facilisis risus, non bibendum lectus turpis suscipit nisi. Proin vel magna. Aliquam nibh. Nunc sapien velit, iaculis nec, condimentum vel, bibendum non, augue. |
Faites des tests sur W3schools.
p {
text-align: justify;
}
p.lettrine:first-letter {
color: #f00;
float: left;
font-weight: bold;
font-size: 2.9em;
margin: 3px 4px 0 0;
}
Réalisé le 7 septembre 2006. |
|
|
 |