CSS3
Lettrines CSS
L'usage de lettrines pour habiller votre texte est possible. Notez seulement qu'il peut y avoir certaines différences d'affichage selon les moteurs de rendu.
Créer une lettrine avec une classe
Voici une procédure possible :
- Comme vous l'avez appris dans la première partie de cette section, importez si nécessaire la fonte qui sera utilisée pour votre lettrine ;
- Dans votre CSS, il va falloir spécifier que la première lettre de la première ligne du premier paragraphe sera une lettrine. En plus des attributs de style que vous avez donnés à votre p utilisé couramment dans votre epub, nous allons définir une autre sorte de paragraphe. Par exemple :
p.premier { font-family:"nom de la fonte du corps de texte"; text-align:justify; text-indent:0; margin-top:10%; -webkit-hyphens:none; }La propriété -webkit-hyphens est relative à la césure, nous y reviendrons après.
- Puis, nous définissons la lettrine. Pour ce faire, nous utiliserons la balise <span>. Celle-ci permet d'appliquer un attribut de style à une partie précise du texte. On la spécifie ainsi : <span>...</span> et tout ce qui se trouve entre les deux balises est stylé comme on le désire. Nous sommes toujours dans la CSS :
span.lettrine { float:left; font-family:"nom de la fonte de lettrine"; font-size:3em; text-indent:0; margin-right:0.1em; }float:left fait en sorte que la lettrine soit à gauche dans le flux du paragraphe et que le texte l'entoure correctement.
font-family définit le nom que de la fonte que vous utilisez pour la lettrine.
font-size en donne la taille.
text-indent en définit l'indentation (ici elle est nulle, sinon le texte serait décalé à droite).
margin-right permet au texte qui entoure la lettrine de ne pas être collé à celle-ci
Vous pouvez également rajouter d'autres attributs de style comme line-height (interlignage), color (la couleur du texte) etc.
- Dans vos fichiers html, votre premier paragraphe sera donc défini ainsi :
<p class="premier"><span class="lettrine">C’</span>est des histoires dont on ne se vante pas devant tout le monde.</p>
Lettrine avec le pseudo-element ::first-letter
Le pseudo-element first-letter est spécifiquement conçu pour une actions sur la première lettre d'un élément sélectionné. Il faudra lui appliqué quelques modifications de mise en forme pour arrivé au résulat souhaité selon le type de lettrine à créer. Mais cela ne pose pas de problème. Ainsi, le paragraphe de faux-texte suivant, sans autre information particulière que ce style
p::first-letter {
font-family:lobster;
font-size:3.5em;
padding-right:0.2em;
float:left;
color:red;
}donne un résultat immédiat satisfaisant.
