Archive Liste Typographie
Message : Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)
(P a t r i c k ~ H o) - Samedi 17 Novembre 2007		 Navigation par date [ Précédent    Index    Suivant ]
Navigation par sujet [ Précédent    Index    Suivant ]
Subject:    Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)
Date:    Sat, 17 Nov 2007 18:22:20 +0100
From:    P a t r i c k ~ H o <patrick.ho@xxxxxxxxxxx>
J'ai beau augmenter la taille du texte, les lettrines ne changent pas. Diantre ! Le Monde utilise des lettrines (les rouges) fabriquées avec une image de fond. Ainsi pour cet article : 

http://www.lemonde.fr/web/article/0,1-0@2-3242,36-979235@51-972460,0.html

Voici la l'image-lettrine utilisée (le D) :

http://medias.lemonde.fr/mmpub/img/let/d.gif
En changeant la lettre avant le «.gif», on fait ainsi défiler l'alphabet en DIN. 
Peu propice à un alignement correct !

+

Patrick Ho


FMichaud a écrit :

Amélioration du code : je n'en ferais plus, promis ;=)
Le code ci dessous laisse libre le lecteur de changer la taille de la fonte. Il est aussi plus souple avec les diverses fontes. A tester sur la page de la même façon que mon message précédent : 
 http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline_letter
Le premier paragraphe reprend le style du Monde. Le second paragraphe illustre la mise en forme spéciale de la première ligne. Faites varier la taille de la fonte avec votre navigateur pour vous en rendre compte. Faites aussi varier la taille de la fenêtre d'affichage. --------DEBUT DU CODE-------- 
<html>
<head>
<style type="text/css">
body { font-size: 100%; }
p
{
font-family:Georgia, Norasi, serif;
font-size:1em;
line-height:1.2em;
text-align:justify;
}
p.lemonde:first-letter
{
color: #950002;
float:left;
font-size:3em;
font-family:"Arial Black" ,Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-weight:bold;
line-height:0.72em;
}
p.firstline:first-letter
{
color: #1111ff;
float:left;
font-size:3em;
font-weight:bold;
line-height:0.75em;
}
p.firstline:first-line
{
color: #888888;
font-variant: small-caps;
font-weight:bold;
}
</style>
</head>
<body>
<u>Présentation comme Le Monde</u> (class="lemonde")
<p class="lemonde">
La situation dans les transports publics, paralysés depuis le lancement de la grève contre la réforme des régimes spéciaux de retraite le 13 novembre, ne devrait pas s'améliorer ce week-end. Vendredi, la plupart des syndicats ont appelé à la poursuite du mouvement, largement suivis par les assemblées générales de salariés qui ont décidé de poursuivre la grève ...</p> <u>Présentation avec première ligne en petites majuscules</u> (class="firstline") <p class="firstline">Pellentesque congue. Ut in risus volutpat libero pharetra tempor et patati et patata. Cras vestibulum bibendum augue. Praesent egestas leo in pede vamos a la playa. Praesent blandit odio eu enim. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo ... 
</p>
</body>
</html>
--------FIN DU CODE--------
A vous d'en faire bon usage ! A+ Frédéric Michaud 

------------------------------------------------------------------------
Ne gardez plus qu'une seule adresse mail ! Copiez vos mails <http://www.trueswitch.com/yahoo-fr/> vers Yahoo! Mail