Une page d’un ouvrage moyenâgeux contenant une lettrine
Tandis que les tendances en web-design se dirigent avec la minimisation (notamment avec le flat design), une problématique est de plus en plus souvent étudiée: la mise en avant du contenu, dans l’objectif d’améliorer la lecture de celui-ci. Et cela passe parfois par une recherche de ressemblance avec le format papier : de la typographie avec empattement, un agrandissement de la hauteur de la ligne et de la taille de police par rapport à ce qu’on avait l’habitude de voir sur le web. Tout cela pour une meilleure lisibilité.
Aujourd’hui voici un court tutoriel pour réaliser une lettrine au début de vos pages web en CSS. Une lettrine est une grand lettre qui introduit généralement une page. Elle trouve son origine dans le travail des moines copistes qui cultivaient particulièrement l’art des lettrines dans leurs ouvrages. C’est donc une référence directe au format papier, mais pour une page web !
Les objectifs pour en réaliser en CSS :
- Sélectionner la première lettre du premier paragraphe.
- Agrandir sa taille.
- Lui appliquer une propriété d’affichage permettant au reste du texte de s’afficher sur sa droite.
Voici le code final, que je vais expliquer ci-dessous :
p:first-of-type:first-letter {
float:left;
font-size: 6em;
padding: 0.05em 0.05em 0 0;
}
- Le p:first-of-type va sélectionner le premier p (paragraphe) si il y a plusieurs paragraphes.
- Le :first-letter va sélectionner la première lettre. Donc avec ce sélecteur, on va sélectionner la première lettre du premier paragraphe.
- Puis dans ce sélecteur on va lui appliquer un float: left; qui va faire de cette première lettre un élément flottant.
- Avec le font-size on va agrandir la taille de la lettre en question. Et enfin on va mettre en place des petites marges intérieure avec la propriété padding bien que ça soit optionnel.
Et voici une petite mise en situation pour finir