Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

13.03.2009

Afficher une lettrine en début de note, grâce à la feuille de styles (révisée)

Mise à jour du 17 mars : L'affichage automatique de la lettrine par les CSS est neutralisé en attendant que l'interprétation du code par les navigateurs soit homogène. Autant dire que nous ne serons pas loin des calendes grecques. Pour la révision de cette note, j'ai triché.

J'ai retiré <div class="texte_note"> du modèle de la page, et sans rétablir ma feuille de style dans son état préalable, je suis intervenu dans le code Html de la note. J'ai encadré le premier paragraphe de <div class="texte_note"> et </div>.

 

*** Note d'origine ***

Je vous ai déjà donné une méthode en novembre dernier, en voici une autre, et vous jugerez de celle qui vous convient le mieux. Peut-être aucune.

Dans une note qui commence à sérieusement dater, à l'échelle de la péremption ultra-rapide des informations communiquées sur un blog, je vous disais comment afficher une lettrine avec un tableau. Ce n'était pas forcément la méthode la plus aisée, puisqu'il fallait rentrer dans le code HTML. Au titre des avantages, on peut tout de même retenir que l'on peut utiliser une image de fond pour « enluminer ». La méthode requérant votre intervention, il vous est loisible de ne presque jamais vous en servir, ou de multiplier les lettrines dans un même texte, fut-ce au dam des typographes patentés (qui en ont vu d'autres). Mais du passé...

Tabula rasa
Dans la méthode actuellement utilisée sur ce blog, le traitement est automatique, puisque que l'on se repose sur les propriétés CSS. C'est tout ou rien. On tâtonne pour trouver un résultat satisfaisant, mais après c'est très confortable.

Je vous donne le code avant quelques explications
Dans le modèle de la page « lien permanent » j'ai modifié les lignes suivantes :
<h3 id="p1"><span>{$post.title}</span></h3>
<div class="posttext">
<div class="posttext-decorator1">
<div class="posttext-decorator2">
{if $post.extended}<div class="introductory">{/if}
{$post.source|trimlonglines:60}
{if $post.extended}</div>{/if}
{if $post.extended}<a id="more"></a><br />{$post.extended}{/if}
<div style="clear:both;"></div>
</div>
</div>
</div>


pour ne changer que cela :
<h3 id="p1"><span>{$post.title}</span></h3>
<div class="texte_note">
<div class="posttext-decorator1">
<div class="posttext-decorator2">


Dans la feuille de styles, après l'élément .content ul li on trouve dorénavant les instructions suivantes :
/**************************************************/
.texte_note p {
padding: 5px 28px 5px 28px;
margin: 5px 0px 5px 0px;
font-size: 1em;
line-height: 1.25em;
}
.texte_note p + p {
margin: 0;
}
.texte_note p:first-letter { /*** Pour la 1ère lettre du 1er § ***/
font-size: 3.5em; /*** La taille est multipliée par 3,5 ***/
line-height: 1em;
font-weight: 400; /*** "graisse" normale, donc maigre ***/
float: left;
margin: 0;
}
.texte_note p:first-line { /*** Pour la 1ère ligne du 1er § ***/
font-weight: 800; /*** "graisse" accentuée ***/
}
.texte_note p + p:first-letter { /*** Pour la 1ère lettre des autres § ***/
font-size: 1em; /*** La taille revient à la normale ***/
line-height: 1.25em;
float: none;
margin: 0;
}
.texte_note p + p:first-line { /*** Pour la 1ère ligne des autres § ***/
font-weight: 400; /*** La graisse revient à la normale ***/
}

/*** à partir du code http://jontangerine.com/silo/typography/p/ ***/

/*****************************************************/


Comment ça marche ?


L'élément « texte_note » donne des indications pour p et p+p ; en fait pour le premier paragraphe, puis pour les suivants.
Le code utilise les « pseudo-formats » CSS first-letter et first-line pour appliquer des styles particuliers à la première lettre et à la première ligne du premier paragraphe (p), puis les corrige, rétablit la normale, en appliquant d'autres styles aux paragraphes suivants (p+p).

Mais la méthode a ses limites. En rétablissant la « graisse » de la première lettre, de la première ligne, des paragraphes suivants, le code retire le gras que vous avez éventuellement appliqué en début de paragraphe dans l'éditeur de note. Et pourtant me direz-vous, il y a bien ici des « sous-titres » avec un début de paragraphe en gras ? Oui mais, j'ai triché, il y a un retour à la ligne avant la première lettre. Et si je ne le fais pas...

Voilà ce que cela donne.

C'est pire encore avec Internet explorer qui semble ne pas accepter l'argument (p+p), et donc ne pas savoir distinguer le premier paragraphe des suivants.

Je m'en contente, considérant même que ce retour à la ligne forcé contribue à la bonne mise en forme du texte. Mais c'est une affaire de goût. Le code d'origine comportait une identation (un retrait positif en première ligne), mais cela rendait visible cette astuce du retour à la ligne pour récupérer le gras dès le premier caractère. Il y a peut être une solution plus élégante techniquement, et il ne faut pas hésiter à critiquer tant que l'on apporte une solution.

Sauf à vouloir faire afficher un autre lettrine (et sous IE seulement), il ne faut utiliser que des sauts de lignes (Maj+Entrée). C'est finalement trop pénible à l'usage de vérifier tous les sauts de lignes, aussi vais-je ce code dans la CSS mardi prochain avant de trouver une solution acceptable.

Et merci CUI ?

Merci à Comme Une Image d'avoir éclairé ma lanterne en me donnant l'adresse du site Jon TANgerine. Il est exclusivement anglophone, ce qui peut-être un avantage quand on maîtrise mal l'italien [;-)], et vous donne ici douze modes de mise en forme "typo" de paragraphe.

08:20 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : personnaliser, blog, hautetfort, lettrine, css | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

@ Gee Mee » Ravi d'avoir pu ouvrir des horizons !

Deux petites remarques :
1/ Rien n'empêche, au contraire, via CSS, d'ajouter des images « enluminures » (et en terme d'accessibilité Web, c'est largement préférable : penser à afficher une page en désactivant les styles, pour voir si elle reste utilisable : Affichage / Style de la page / Aucun style)

2/ Tu remarqueras que le rendu de ta page, sur cet article, est fort différent entre IE7 et FF3.
La faute au sélecteur CSS « + » pas géré par IE, il me semble.

Écrit par : Comme une image | 13.03.2009

Répondre à ce commentaire

@ CUI : Je suis énervé.
J'en ai marre de voir à quel point IE n'est pas à la hauteur. Mais surtout, au-delà de tout, je m'énerve d'avoir encore oublié de vérifier. Sinon, j'apprécie la délicatesse avec laquelle tu signales que mes pages sont en vrac.

Pour les images en CSS, tu as raison, c'est préférable notamment pour l'accessibilité. Les logiciels qui interprètent les pages pour les personnes déficientes sont moins perdus avec des CSS qu'avec des tableaux. D'ailleurs je n'utilise plus de tableaux.

Pour autant, l'image en fond sous la lettrine avec CSS... J'ai des doutes. Gérer la taille, l'alignement, la différence entre un I et un M... Je suis sûr que c'est possible, mais au prix de quelles contorsions ?

Non sérieusement, tu reviens quand tu veux, tu me fais progresser c'est sûr.

Merci encore, donc.

Avec mes excuses à tous les internautes IEphiles. Je vais corriger tout ça.

Écrit par : Gee Mee | 13.03.2009

Répondre à ce commentaire

Les commentaires sont fermés.