Niveau : 
Créer une lettrine sur du texte
Tutoriel par Raphael (Eleveur de kiwiz, Strasbourg)
En CSS, nous allons simplement isoler la première lettre du paragraphe dans 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>
