Créer une lettrine sur du texte
Le 28-02-2005 par Raphael dans Tutoriels et articles divers.
Une lettrine est la première lettre d'un paragraphe dans les récits. Large et bien mise en valeur, elle représente en général trois hauteurs de ligne.
En CSS, nous allons simplement isoler la première lettre du paragraphe sans une balise <span> à laquelle nous allons appliquer une taille et surtout un emplacement spécifique afin que le reste du texte "entoure" la lettrine.(Voir le résultat ici)
Note : Cette technique est une astuce pour contourner les faiblesses de certains navigateurs. Il existe en effet une pseudo-classe CSS : :first-letter qui conviendrait parfaitement à cet usage... malheureusement, Internet Explorer (avant sa version 5.5) ne comprend pas cette propriété standard.
Il est possible de créer toutes sortes de lettrines : simple texte, texte mis en forme (couleur de fond, entourage), voire une image pour chaque lettre. Tout est possible en CSS, il suffit de placer la lettrine grâce à l'attribut "float: left;" qui collera notre span à gauche de son conteneur, en laissant le reste du texte le contourner
Voici la partie CSS (Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/) :
<style type="text/css">
<!--
.conteneur { /* définition d'un conteneur global*/
width: 400px;
}
.lettrine {
float: left; /* positionnement de la lettrine dans le conteneur*/
font-size: 3em; /* 3 hauteurs de lignes pour la lettrine*/
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: #990000;
border: 1px solid #990000; /* définition d'une bordure autour de la lettrine*/
background-color: #FFFFCC;
margin: 1px;
padding: 1px;
line-height: 1em;
}
-->
</style>
Pour finir, notre code html se contentera d'identifier la lettrine par un <span>:
<body> <div class="conteneur">
<p><span class="lettrine">T</span>exte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine texte avec lettrine</p> </div> </body>
Un problème, une question ?
Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux tutoriels et articles du Forum Alsacréations.
