Accéder au contenu.
Menu Sympa

typographie - Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)

Objet : Liste consacrée aux discussions à propos de la composition et de la typographie

Archives de la liste

Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)


Chronologique Discussions 
  • From: Jean-Luc BLARY <jeanluc.blary AT eons.fr>
  • To: typographie AT listes.irisa.fr
  • Subject: Re: Re : Re : [typo] Lettrine du Monde sur internet (code amélioré)
  • Date: Sat, 17 Nov 2007 09:33:46 +0100
Superbe !

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 :
 
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 vers Yahoo! Mail

Archives gérées par MHonArc 2.6.16.

Haut de le page