Médiaforma

Lettrines

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Beaucoup de livres papier utilisent des lettrines au début de chaque chapitre. Que diriez-vous d’en faire autant sur une page Web ?

Vous vous en doutez certainement : l’affichage de lettrines se fera en CSS.

Commençons par définir un paragraphe contenant un peu de texte. A titre d’information, ce texte provient du site http://fr.lipsum.com/. Nous affectons la classe lettrine à ce texte.

Il ne reste plus qu’à définir le code CSS correspondant à cette classe. Pour différentier le premier caractère des suivants, nous définirons deux styles : .lettrine qui s’adresse à tous les caractères de classe lettrine et .lettrine:first-letter qui ne concerne que le premier caractère de classe lettrine.

Commençons par le style lettrine.

La ligne 7 définit la hauteur des lignes. La valeur 1.5em aère les lignes verticalement.

La ligne 8 définit la largeur de la zone d’affichage : 30em.

Enfin, la ligne 9 définit :

  • une marge extérieure supérieure et inférieure de 3em,
  • une marge gauche et droite également répartie. Le bloc est donc centré horizontalement.

Examinons le style de la première lettre.

La ligne 14 fait flotter la première lettre à gauche, de telle sorte que plusieurs lignes de texte épousent son contour.

La ligne 15 définit la taille de la première lettre. Ici, trois fois la taille normale.

La ligne 16 définit la hauteur de la ligne : ici, une fois la taille de 3em.

Enfin, la ligne 17 définit la marge extérieure à droite de la lettrine.

Le résultat est bien conforme à ce qui était attendu :

A des fins expérimentales, je vous suggère de supprimer la ligne float:left;, puis de modifier les propriétés font-size et line-height dans la classe .lettrine:first-letter.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply