Les ateliers du klafoutis

Les outils de mise en forme typographique et sémantique

Les champs de saisie des billets sont surmontés d’une barre d’outils, comme dans les traitements de texte, permettant la mise en forme et la structuration. Selon vos choix opérés dans Mes préférences > Mes options, cette barre d’outil présentera de légères différences mais on retrouve peu ou prou les mêmes mises en forme possibles. Dans ce billet, un petit panorama des différents enrichissements, ce qui permet de visualiser en une seule page le rendu des différentes formes dans un thème en démonstration.

Les niveaux de titres (ici le niveau 3)

Lorsqu’on veut structurer un billet à l’aide d’intertitres, il est préférable d’utiliser la sémantique plutôt que modifier à la main l’aspect de ceux-ci. Ainsi, que votre billet soit restitué dans votre blog, dans un outil d’abonnement ou par des vocalisateurs d’écran, la hiérarchie sera restituée.

Dans Dotclear, le titre du blog est de premier niveau (<h1> en html) et le titre des billets sont de niveau 2 (<h2> en html). C’est pour cette raison que la petite barre d’outils au-dessus du champ de saisie du billet propose des niveaux de titre commençant au troisième (<h3> en html).

Titre de niveau 4

Fort logiquement, si on veut ajouter un niveau hiérarchique pour un intertitre, on utilisera les titres de niveau 4.

Titre de niveau 5

Et à encore un niveau en dessous, les titres de niveau 5. Il est important de ne pas rompre la hiérarchie : on n’utilisera pas un titre de niveau 5 en enfant direct d’un titre de niveau 3.

Enrichissements au sein du texte (gras, italique, etc.)

Entre parenthèses, le tag html correspondant mais vous n’avez pas besoin de le connaître si vous utilisez les barres d’outils.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. un passage en gras (<strong>). Integer mollis nonummy magna. Donec tristique lorem a pede. Nunc scelerisque sodales justo. Phasellus tempus eros. Praesent feugiat, mauris at malesuada blandit, justo nisl dignissim tortor, a ornare sem nulla in ante. Integer elit orci, tempor eu, rhoncus ut, tristique eu, tellus. quelques mots en italique. (<em>) Sed sodales, purus et luctus adipiscing, orci nulla scelerisque orci, at lobortis ante sapien vitae felis. Aenean varius tempor ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras malesuada commodo leo. des mots soulignés (<ins> senectus et netus et malesuada fames ac et des mots surlignés (<mark>). {{Une citation (<q>)}}

Pour finir, une portion de texte barré et un appel de note ¹.

Mise en forme de paragraphes

Paragraphes et retours à la ligne

Un paragraphe est créé lorsqu’on retourne à la ligne puis qu’on laisse une ligne vierge avant le paragraphe suivant. En html ça correspond à la balise <p>.

Le simple retour à la ligne (<br>) ne devrait être utilisé que dans des cas spécifiques, par exemple pour de la poésie :

C’est un trou de verdure où chante une rivière
Accrochant follement aux herbes des haillons
D’argent ; où le soleil, de la montagne fière,
Luit : c’est un petit val qui mousse de rayons.

Paragraphe de citation

Votre billet pourrait faire référence à un passage de texte, une citation longue d’un ou plusieurs paragraphes. On appelle ça un bloc de citation (<blockquote>). En ce cas, le rendu est celui-ci, variable bien sûr selon le thème choisi.

Morbi sed erat. Maecenas rutrum nunc a erat. Nam libero nunc, mattis eget, pellentesque nec, molestie in, wisi. Phasellus rutrum neque nec eros. Donec lectus lacus, lacinia in, lacinia non, semper eget, lectus. In hac habitasse platea dictumst.

Texte préformaté

On utilise les paragraphes de texte préformaté (<pre>) pour des usages particuliers, où le respect des éventuelles espaces successives est important. On l’emploie par exemple pour de la poésie ou de l’ASCII. Ci-dessous, un extrait d”Un coup de dés n’abolira jamais le hasard*, de Stéphane Mallarmé.

 Choit
           la plume
                     rythmique suspens du sinistre
                                                                         s'ensevelir
                                                    aux écumes originelles
           naguère d'où sursauta son délire jusqu'à une cime
                                                              flétrie
                           par la neutralité identique du gouffre

On rencontre aussi fréquemment cette mise en forme pour citer du code, comme dans l’exemple ci-dessous.

 figure {
    display: table;
 }
 figcaption {
    display: table-caption;
    caption-side: bottom;
 }

Les listes

Liste et sous-listes non-ordonnées (<ul>, <li>)

• Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
• Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
  • Cras wisi sapien
  • dictum id,
  • fringilla ut,
  • gravida sed, mi
• Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
• Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
• Vivamus mollis. (<ul><li>)

Vivamus risus. Maecenas eros arcu, dictum ut, euismod et, dictum id, tellus. Etiam nonummy vestibulum mi. Donec leo dui, congue et, rhoncus eu, accumsan eu, arcu. Morbi id enim vel elit varius cursus.

Liste et sous-listes ordonnées (<ol>, <li>)

1. Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
2. Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
   1. Cras wisi sapien
   2. dictum id,
   3. fringilla ut,
   4. gravida sed, mi
3. Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
4. Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
5. Vivamus mollis. (<ol><li>)

Ci-dessus l’insertion d’une ligne horizontale. Que ce soit en wiki ou en markdown, le raccourci est le même, quatre traits d’union successifs sur une même ligne.

Sous cet article, quelques commentaires et rétroliens pour en faire la démonstration de présentation.