NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Effet sur la première lettre d'un paragraphe

Effet sur la première lettre d'un paragraphe


C'est un fait, la mise en page pour le web ne se conçoit pas comme la mise en page pour l'impression. Pourtant certains effets typographiques usuels comme les "initiales en capitales" et les "lettrines" peuvent donner un cachet des plus intéressants à votre site.

Les CSS nous permettent de gérer de tels effets avec une facilité déconcertante, gr‚ce au pseudo-élément ::first-letter qui désigne la première lettre formatée d'un élément et peut être attaché à tout élément.

Comment ça marche ?



Le comportement du pseudo-élément ::first-letter est similaire à celui d'un élément flottant à ceci prêt que vous n'avez pas besoin de rajouter des balises dans votre code html. C'est le navigateur qui traduira les instructions CSS en une séquence de balises fictives. Ainsi votre code reste propre et si votre prochaine charte graphique ne s'accorde pas avec votre effet typographique il vous suffira de supprimer la série d'instruction CSS.

Voici les propriétés CSS qui s'appliquent aux pseudo-éléments ::first-letter : propriétés de fontes, propriétés de couleurs, propriétés de fonds, 'text-decoration', 'vertical-align' (seulement si 'float' est 'none'), 'text-transform', 'line-height', propriétés de marges externes, propriétés de marges internes, propriétés de cadres, 'float', 'text-shadow', et 'clear'

C'est beau la technologie CSS...

Voyons ça au travers d'un exemple concret: initiale "lettrine" courant sur deux lignes:



Nous obtenons ceci par le code suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
        <head>
        <titre>Drop cap initial letter</title>
        <style type="text/css">
        body            { width: 200px; }
        p               {       font-size: 12pt; line-height: 12pt; }
        p::first-letter {       font-size: 250%;
                                font-style: italic;
                                font-weight: bold;
                                float: left; }
        span            { text-transform: uppercase; }
  </style>
 </head>
 <body>
  <p><span> Le latin </span>est une langue italique de la famille des langues indo-européennes, aujourd'hui considérée comme éteinte, même si elle continue d'être utilisée et développée comme langue écrite.</p>
 </body>
</html>


La séquence de balises fictives est :

<p>
<span>
<p::first-letter>L</p::first-letter>e latin
</span>
est une langue (...)</p>


Les spécifications W3C prévoient que la ponctuation qui précède la première lettre doit être incluse dans le processus de traitement. Ainsi si votre navigateur respecte ses spécification vous pouvez ajouter des guillemets et voir ceci:



Il est distrayant de noter qu'Internet Explorer respecte cette spécification. Elle a due être tirée dans les bon paquet du plouf plouf. En revanche, il se comporte mal à un autre niveau en présence de ce pseudo-élément. Comme on dit, il ne faut pas trop en demander à un produit microsoft.

Enfin, nous finirons en parlant d'une spécificité de ::first-letter, les balises du pseudo élément entourent le contenu, la première lettre. Alors que la balise de début du pseudo-élement ::first-line est insérée immédiatement la balise de début de l'élément auquel il est attaché. Dans notre exemple, elle se sera donc placée entre <p> et <span>.

Le calcul des tailles de polices peut-être relativement approximatif en fonction des navigateurs, mais rien de bien méchant puisque un web designer sait qu'une interface de site ne se conçoit pas au pixel près. Mais comme d'habitude, il faut encore composer avec la mauvaise volonté des développeurs de IE.
Le 09/04/2006 par D.C.M.

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

Ajouter un commentaire sur ce tutoriel

CSS, Lettrine, Paragraphe, Effet, Typographie, Lettre
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)