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

16.11.2008

Une lettrine pour prendre le tableau à la lettre (révisée)

Cette note a été révisée le 13 mars, lors de la publication de la note expliquant la modification de la feuille de styles automatisant le passage en lettrine de la première lettre du premier paragraphe. Je joins une capture d'écran avant modification de la CSS. Chez vous, cela peut donner quelque chose de sympathique, vous ne risquez rien à essayer. Ici, mon petit bricolage donne un résultat... que l'on ne saurait poursuivre.

geemee-lettrine-avant-css.jpg

L'adoption du numérique ne doit pas nous faire abandonner toutes les traditions de l'imprimerie, ni même du livre quand il n'était encore qu'aux mains des copistes.

A

dmettons ensemble que la lettrine peut être une chose sympathique pour commencer une note. C'est pourquoi je vous donne un moyen de le faire vous-même. Cet exercice nous donne aussi l'occasion de faire connaissance avec les tableaux en HTML. Si vous trouvez déjà que c'est une vraie galère avec un traitement de texte, c'est que vous n'avez pas encore fait connaissance avec l'un des passages aussi redouté qu'obligé des webmasters.

Vous ne cherchez pas à devenir webmestre ? Je m'en doute, sinon, vous ne seriez pas sur une plateforme de blog. Cela étant, les tableaux rendent bien des services pour structurer la mise en forme de la page. D'ailleurs cette page n'est elle-même qu'un vaste tableau à 3 colonnes.

Comment créer un tableau

Je crains qu'il ne vous faille à nouveau passer en mode HTML, mais pour l'instant continuez ici, si vous le voulez bien. Il nous faudra ouvrir une table, puis le "corps" : ouvrir une ligne, ouvrir une cellule, en donner le contenu. Puis fermer la cellule, la ligne, le corps et le tableau.

• Copiez donc le code :
<table>
<tbody>
<tr>
<td>Archaea</td>
</tr>
</tbody>
</table>
• Passez en mode HTML
• Collez le code
• Cliquez sur [Mettre à jour]

on obtient :

Archaea

Même pas je vois que c'est un tableau... et en plus je suis coincé, je ne peux pas écrire avant ni après. Il est effectivement préférable de taper deux caractères repères, ne serait-ce que "xx", entre lesquels vous collerez le code. Cela vous permettra de reprendre la main sans passer par l'éditeur HTML.

Mettons que j'indique une bordure de 1 pixel d'épaisseur, pour le tableau, et un fond de couleur orchidée pour la cellulle.
Avec le code :
<table border=1 >
<tbody>
<tr>
<td bgcolor="orchid">Archaea</td>
</tr>
</tbody>
</table>

On obtient :

Archaea

C'est moche, mais cela ressemble bien à une cellule de tableau...

Passons au code de la lettrine.

Nous avons besoin d'un tableau "mono-cellulaire".
Sa hauteur doit être suffisante pour afficher la lettrine, mais ne pas créer trop de lignes décalées.
Le texte doit s'aligner autour du tableau sur la gauche.
La lettre doit s'aligner verticalement dans la cellule sur le milieu.
La taille de la lettre doit être suffisante pour créer son effet, en adoptant éventuellement une autre fonte.

Pour la lettrine de cette note, le code est le suivant :
<table style="height: 70px;" align="left" border="0">
<tbody>
<tr>
<td valign="middle" background="http://geemee.hautetfort.com/media/00/00/1795889500.gif"><B><span style="line-height: 70px; font-size: 60px; font-family: verdana,arial;">A</span></B></td>
</tr>
</tbody>
</table>

Pour l'analyser dans le détail :

<table style="height: 70px;" La hauteur spécifiée est de 70 pixels.
align="left" Le texte va s'aligner à gauche de la page contre le tableau.
border="0"> Pour ne pas avoir de bordure, mieux vaut déclarer une épaisseur à "0".
<tbody>
<tr>
On déclare le corps,
puis la première ligne.
<td 
valign="middle"
On ouvre la cellule,
on centre le contenu verticalement.
background="http://
geemee.hautetfort.com/
media/00/00/1795889500.gif">
au lieu d'utiliser un fond de couleur, j'ai téléchargé une image dont j'ai noté l'adresse (clic droit "copier l'adresse du lien" dans Tableaux de bord / Fichiers / Médias).
Si l'image est trop petite, elle sera répétée.
Si elle est trop grande, elle sera tronquée.
<B> Vous retrouvez le B que vous connaissez pour "bold"
<span
style="line-height: 70px;
On commence la mise en forme de la lettre elle même.
Ici on donne la taille de l'interligne.
font-size: 60px; Ici on donne la taille de la police : 60 pixels.
font-family: verdana,arial;"> On donne le nom de la police. Il est plus prudent d'en donner deux. Si "verdana" n'est pas sur le poste, il affichera avec "arial".
A
</span>
</B>
"A" est le seul texte.
On ferme le style,
on ferme "bold".
</td>
</tr>
</tbody>
</table>
On ferme la cellule,
la ligne,
le corps,
puis le tableau.

Vous serez certainement obligés de faire des ajustements successifs pour trouver le bon compromis entre la taille de la cellule et celle du caractère. L'image de fond, ou la couleur, etc.

Ne vous fiez pas à l'aperçu de l'éditeur Haut&Fort, son interprétation n'est pas celle de notre navigateur. Voyez ce qu'il affiche pour cette note.

HF_voir_la_note_lettrine.jpg

Vous devrez faire des allers-retour entre votre éditeur Haut&Fort et la note publiée. Quitte à modifier la date de publication pour la rendre indisponible "un certain temps".

 

12:30 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : blog, html, lettrine, tableau | |  del.icio.us | | Digg! Digg |  Facebook