95% webdesign is typography

Afin illustrer les propos d’Oliver Reichenstein, je vais vous expliquer comment réaliser en css un ornement typographique archi-classique dans le monde du print mais très peu utilisé sur le web : la lettrine.

Pseudo sélecteurs

Supposons que je souhaite appliquer un effet lettrine au premier paragraphe des billets de mon blog. Pour ce faire, je pourrais tout simplement entourer la première lettre du paragraphe d’un tag span et lui affecter une classe lettrine. Mais non, je ne le ferais pas. Rajouter un tag juste pour faire un effet de style c’est fastidieux, et teeeeeeellement web1.0… En 2007, les webdesigners disposent d’outils modernes tels que les css2 et les pseudo- sélecteurs qui permettent de cibler la première lettre ou la première ligne d’un paragraphe sans rajouter le moindre tag. Démonstration.

Cibler

Dans wordpress, le contenu d’un billet est en général contenu dans un div ’storycontent’. Pour cibler le premier paragraphe de ce div, j’utilise le pseudo sélecteur :first-child

#content div.storycontent > p:first-child

Je cible ensuite la première lettre de ce paragraphe grâce au pseudo sélecteur :first-letter :

div.storycontent > p:first-child:first-letter

A noter : le pseudo sélecteur :first-child n’est pas supporté par Internet Explorer 6. Pour palier à ce manque et pour ne pas léser les internautes qui utiliseraient encore ce navigateur d’un autre âge, on peut appliquer une classe chapo au premier paragraphe. La règle devient alors :

p.chapo :first-child:first-letter

Styler

Une fois l’élément atteint, il ne me reste plus qu’à lui appliquer quelques règles de styles pou lui donner un effet lettrine :

div.storycontent > p:first-child:first-letter {
font-size: 4em; /* augmente la taille de la police*/
line-height: 80%; /* diminue l'interlignage - pour Safari */
float: left; /* pour faire flotter le texte autour de ma lettrine */
padding-right: .1em; /* histoire de donner un peu d'espace */
color: #666; /* les goûts et les couleurs... */
}

Et voilà !

Sur le même sujet