Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les lettrines

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 29 juillet 2008

Nous allons à travers cet article étudier les méthodes pour créer des lettrines en CSS.

Définition

Une lettrine est une lettre initiale majuscule placée en tête d'un texte et occupant une hauteur supérieure à la ligne. Elle commence et décore une inscription, un paragraphe ou un chapitre d'ouvrage tout en servant de repère au lecteur.

Solutions

Le pseudo-élément : first-letter

Le pseudo-élément :first-letter est un sélecteur CSS qui va permettre de mettre en forme de manière particulière la première lettre d’un texte.

Le pseudo-élément 'first-letter' s'utilise pour obtenir des effets typographiques courants comme la “lettrine”.

Une lettrine simple

Nous allons créer une lettrine pour les paragraphes en définissant le sélecteur p:first-letter. Nous définirons ensuite une taille de caractères de 250 % avec la propriété font-size.

La lettrine aura donc un caractère 2,5 fois plus grand que le texte.

 p:first-letter {
	font-size: 250%;
}
 <p>Google a beaucoup travaillé sur son système de crawl et d'indexation,  afin d'arriver à avoir un index à la fois très grand et récemment mis à  jour (&quot;frais&quot; comme ils disent). Google dit également s'être amélioré  dans la compréhension des concepts abordés sur les pages web, même si  certains mots-clés n'y figurent pas. On sait que cela peut venir de  l'analyse du profil du <a href="http://seminaires.ranking-metrics.fr/formation-referencement-module-b.php" hreflang="fr">netlinking</a> des pages (et du site). Cela peut venir également de nombreuses autres  analyses, que l'ingénieur de Google ne détaille pas ici bien entendu.  Google peut très bien par exemple déterminer le lieu géographique  associé à un site (si c'est pertinent) et positionner ses pages en  bonne place parmi les résultats sur des requêtes incluant ce lieu, même  s'il ne figure pas dans le texte de la page.</p>
<p>Le dernier point-clé réside dans l'analyse des internautes eux-mêmes,  en plus de leur requête. L'idée est d'arriver à mieux comprendre ce  qu'ils ont en tête quand ils font leurs recherches. Un des points  essentiels est la prise en compte du pays dans lequel se trouve  l'internaute (et/ou de l'interface de Google qu'il utilise :  google.fr ? google.com ? google.be ? etc.). Une même requête doit être  traitée de façon différente par Google selon ces cas de figure. Amit  Singhal prend un exemple pour les francophones : un Français qui tape  [Côte d'Or] cherche a priori des informations sur le département du  même nom, tandis qu'un Belge (ou un français gourmand) s'intéresse  plutôt à la marque de chocolat du même nom. </p>

Mise en forme avancée de la lettrine

Nous allons modifier le rendu visuel de notre lettrine afin de lui donner une apparence un peu plus standard. Notamment, nous allons étendre notre lettrine sur plusieurs lignes et non plus sur la première ligne.

De plus, notre lettrine possèdera une couleur d’arrière-plan ainsi que des bordures.

La propriété float sort un élément HTML du flux normal de positionnement et en fonction de sa valeur, left ou right, pousse cet élément vers le bord gauche ou droite de son bloc parent. Le flux normal quand à lui se déroule sur le côté opposé du flottement.

Nous allons donc définir la propriété float sur notre sélecteur p :first-letter avec une valeur left afin que notre lettrine soit positionnée à gauche et que le reste du texte (le flux normal) vienne se placer à droite de la lettrine.

La couleur d’arrière-plan sera définie avec la propriété background-color et la bordure sera définie avec la propriété border.

Pour avoir plus d’espace entre la lettre de la bordure, nous allons indiquer une marge intérieure (padding). Nous indiquerons aussi une marge à droite de la lettrine (margin-right) pour espacer le texte de la lettrine.

 p:first-letter {
	font-size: 250%;
	float: left;
	background-color: #FFFFC6;
	border: 2px solid #CC3300;
	padding: 5px;
	margin: 3px;
}

Le résultat est identique sous IE6, IE7, Firefox, Safari et Opéra

Utilisation d’un sélecteur de classe

Une autre technique consiste à utiliser un sélecteur de classe pour appliquer notre lettrine à notre premier caractère. Cette technique permet également de créer une lettrine sur plusieurs caractères.

Pour rappel, un sélecteur de classe est un sélecteur qui permet plusieurs utilisations d’une règle CSS dans un même document XHTML. Le sélecteur de classe peut-être appliqué à des éléments HTML différents.

Lettrine sur le premier caractère

Nous allons créer une classe CSS nommée lettrine et nous allons réutiliser les mêmes propriétés que pour notre pseudo-sélecteur first :letter en changeant simplement la couleur d’arrière-plan et la couleur de bordure.

 .lettrine {
	font-size: 250%;
	float: left;
	background-color: #FFFFC6;
	border: 2px solid #CC3300;
	padding: 5px;
	margin: 3px;
}

Nous utiliserons l’élément HTML span et son attribut class pour affecter la classe CSS lettrine au premier caractère de nos paragraphes.

 <p><span class="lettrine">G</span>oogle a beaucoup travaillé sur son système de crawl et d'indexation,  afin d'arriver à avoir un index à la fois très grand et récemment mis à  jour (&quot;frais&quot; comme ils disent). Google dit également s'être amélioré  dans la compréhension des concepts abordés sur les pages web, même si  certains mots-clés n'y figurent pas. On sait que cela peut venir de  l'analyse du profil du <a href="http://seminaires.ranking-metrics.fr/formation-referencement-module-b.php" hreflang="fr">netlinking</a> des pages (et du site). Cela peut venir également de nombreuses autres  analyses, que l'ingénieur de Google ne détaille pas ici bien entendu.  Google peut très bien par exemple déterminer le lieu géographique  associé à un site (si c'est pertinent) et positionner ses pages en  bonne place parmi les résultats sur des requêtes incluant ce lieu, même  s'il ne figure pas dans le texte de la page.</p>
<p><span class="lettrine">L</span>e dernier point-clé réside dans l'analyse des internautes eux-mêmes,  en plus de leur requête. L'idée est d'arriver à mieux comprendre ce  qu'ils ont en tête quand ils font leurs recherches. Un des points  essentiels est la prise en compte du pays dans lequel se trouve  l'internaute (et/ou de l'interface de Google qu'il utilise :  google.fr ? google.com ? google.be ? etc.). Une même requête doit être  traitée de façon différente par Google selon ces cas de figure. Amit  Singhal prend un exemple pour les francophones : un Français qui tape  [Côte d'Or] cherche a priori des informations sur le département du  même nom, tandis qu'un Belge (ou un français gourmand) s'intéresse  plutôt à la marque de chocolat du même nom. </p> 

Là aussi, le résultat est le même dans les navigateurs.

Une lettrine sur plusieurs caractères

Nous pourrons créer la lettrine sur plusieurs caractères en utilisant l’élément span autour par exemple des 3 premier caractères.

 <p><span class="lettrine">Goo</span>gle a beaucoup …

Une image en tant que lettrine

Une image pourra être utilisée en tant que lettrine afin de donner un aspect typographique avancé notamment par exemple l’utilisation d’une police de caractères fantaisiste.

Afin d’étendre notre lettrine sur plusieurs lignes, nous allons définir la propriété float à left. Puis nous définirons une marge droite afin de ne pas coller le texte à l’image.

 .lettrine {
	float: left;
	margin-right: 3px;
} 

La classe lettrine sera appliquée à nos deux images.

 <p><img src="lettrineG.png" alt="" width="50" height="50" class="lettrine" />oogle a beaucoup travaillé sur son système de crawl et d'indexation,  afin d'arriver à avoir un index à la fois très grand et récemment mis à  jour (&quot;frais&quot; comme ils disent). Google dit également s'être amélioré  dans la compréhension des concepts abordés sur les pages web, même si  certains mots-clés n'y figurent pas. On sait que cela peut venir de  l'analyse du profil du <a href="http://seminaires.ranking-metrics.fr/formation-referencement-module-b.php" hreflang="fr">netlinking</a> des pages (et du site). Cela peut venir également de nombreuses autres  analyses, que l'ingénieur de Google ne détaille pas ici bien entendu.  Google peut très bien par exemple déterminer le lieu géographique  associé à un site (si c'est pertinent) et positionner ses pages en  bonne place parmi les résultats sur des requêtes incluant ce lieu, même  s'il ne figure pas dans le texte de la page.</p>
<p><img src="lettrineL.png" alt="" width="50" height="50" class="lettrine" />e dernier point-clé réside dans l'analyse des internautes eux-mêmes,  en plus de leur requête. L'idée est d'arriver à mieux comprendre ce  qu'ils ont en tête quand ils font leurs recherches. Un des points  essentiels est la prise en compte du pays dans lequel se trouve  l'internaute (et/ou de l'interface de Google qu'il utilise :  google.fr ? google.com ? google.be ? etc.). Une même requête doit être  traitée de façon différente par Google selon ces cas de figure. Amit  Singhal prend un exemple pour les francophones : un Français qui tape  [Côte d'Or] cherche a priori des informations sur le département du  même nom, tandis qu'un Belge (ou un français gourmand) s'intéresse  plutôt à la marque de chocolat du même nom. </p>

En savoir plus