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.
Voici une procédure possible :
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.
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.
<p class="premier"><span class="lettrine">C’</span>est des histoires dont on ne se vante pas devant tout le monde.</p>
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.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.