Chronique familiale




La chronique familiale pas à pas

Mise en page du texte

 

 Retour à la ligne et saut de ligne


Le langage wiki, comme le langage HTML d'ailleurs, ne tient pas compte de vos retours à la ligne effectués avec la touche "Entrée".
 
Et en cas de redoublement de ladite touche, il considère que vous souhaitez créer un nouveau paragraphe et donc laisse une ligne vide, avec l'inconvénient (comme nous le verrons plus loin) de perdre la mise en page et en forme du texte.

Il faudra donc employer la balise <br>1 pour signifier qu'on souhaite effectuer un retour à la ligne.


Et on peut par exemple écrire :

Mignonne, allons voir si la rose<br>Qui ce matin avoit desclose<br>Sa robe de pourpre au Soleil,<br>A point perdu ceste vesprée<br>Les plis de sa robe pourprée,<br>Et son teint au vostre pareil.

Cependant, pour ma part, et même si le résultat est identique, je préfère aller à la ligne après chaque balise <br> afin de bien repérer mes changements de ligne :

Mignonne, allons voir si la rose<br>
Qui ce matin avoit desclose<br>
Sa robe de pourpre au Soleil,<br>
A point perdu ceste vesprée<br>
Les plis de sa robe pourprée,<br>
Et son teint au vostre pareil.



Et le résultat :

Mignonne, allons voir si la rose
Qui ce matin avoit desclose
Sa robe de pourpre au Soleil,
A point perdu ceste vesprée
Les plis de sa robe pourprée,
Et son teint au vostre pareil.




Et si l'on veut carrément faire un saut de ligne, autrement dit laisser une ligne vide, il faudra redoubler la balise <br> :

Mignonne, allons voir si la rose<br><br>Qui ce matin avoit desclose<br><br>Sa robe de pourpre au Soleil...

Mais là aussi, pour une meilleure lisibilité de mon code, à résultat identique, je préfère l'écrire comme ceci :

Mignonne, allons voir si la rose
<br>
<br>
Qui ce matin avoit desclose
<br>
<br>
Sa robe de pourpre au Soleil...



Et le résultat :

Mignonne, allons voir si la rose

Qui ce matin avoit desclose

Sa robe de pourpre au Soleil...


 

 Faire un paragraphe


Pour faire un paragraphe, nous utiliserons la balise <p>....</p>. Comme la balise <span> elle admet des attributs et des propriétés, mais à la différence de cette dernière, et comme nous le verrons plus loin, les propriétés de la balise <p> affectent tout le paragraphe 2 .


Exemple avec la balise <p> :

<p>Lorem ipsum benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</p><p>Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.</p><p>Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.<p>


Et le résultat obtenu :

Lorem ipsum 3 benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.

Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.


Encore une fois, et bien que ce ne soit pas obligatoire, je préfère l'écrire comme ceci :

<p>Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</p>
<p>Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.</p>



Comme je l'ai précisé plus haut, la balise <p> admet des propriétés destinées à mettre en forme le texte. Vous pouvez fort bien écrire :

<p style="font-style:italic;">Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</p>
<p style="color:darkviolet;">Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.</p>



Et vous obtiendrez ceci :

Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.



 

 Faire plusieurs paragraphes


Je me dis qu'une fois les propriétés d'un paragraphe définies et si je souhaite les conserver pour les suivants, il serait bon de ne pas avoir à tout recommencer chaque fois. Après tout, ce qui définit un paragraphe, c'est le fait de sauter une ligne. Essayons donc de sauter des lignes :

<p style="color:darkviolet; font-family:times new roman;">
Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit.

Et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.
</p>


Résultat :

Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit.

Et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.


Aïe ! Aïe ! Aïe ! Ça ne va pas du tout ! C'est ce que vous disais ici : Saut de ligne ↗


Pas de panique, il suffit donc d'utiliser la balise <br> pour ne pas perdre la mise en forme :

<p style="color:darkviolet; font-family:times new roman;">
Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit.
<br>
<br>

Et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.
</p>


Et ça fonctionne parfaitement :

Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit.

Et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.



Notez bien que si vous voulez conserver une mise en forme, il est impératif de ne pas laisser de ligne vide !


Cette page : Les balises et le style ↗ vous permettra de mieux appréhender l'influence des diverses balises sur la mise en page du texte.

 

 Aligner le texte


La balise <p> va surtout nous être utile pour mettre en page notre texte. En effet, à l'aide de la propriété text-align4 on peut très facilement :

1 - Aligner un texte à droite :

<p style="text-align:right;">Sans mentir, si votre ramage se rapporte à votre plumage, vous êtes le phénix des hôtes de ces bois.</p>

et on obtient ceci :

Sans mentir, si votre ramage se rapporte à votre plumage, vous êtes le phénix des hôtes de ces bois.



On doit réserver ces alignements à droite (comme au centre d'ailleurs) à des phrases courtes. Comme le montre la page suivante, les textes longs avec un tel alignement ne sont pas du meilleur effet : Un texte aligné à droite, c'est pas bô ! ↗


2 - Aligner un texte au centre :

<p style="text-align:center;">Rien ne sert de courir, il faut partir à point !</p>

et le résultat :

Rien ne sert de courir, il faut partir à point !



3 - Aligner un texte à gauche :

<p style="text-align:left;">Ici le texte que vous voulez aligner</p>

et le résultat : Page de texte aligné à gauche ↗


4 - Justifier un texte :

<p style="text-align:justify;">Ici le texte que vous voulez aligner</p>

et le résultat : Page de texte justifié ↗

 

 Tabulation et texte en retrait


Les langages wiki ou HTML ne reconnaissent pas la touche tabulation touche tabulation de votre clavier.

Si vous souhaitez malgré tout réaliser une tabulation, il vous faudra utiliser la propriété text-indent associée à la balise <p> et à une valeur exprimant la largeur 5 de cette tabulation.Comme ceci :

<p style="text-indent:4em;">
Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.
</p>


Et vous obtiendrez ceci :

Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.


Pour mettre tout un paragraphe en retrait 6, il faudra utiliser la propriété margin-left :

<p style="margin-left:10em;">
Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.
</p>


Et vous obtiendrez ceci :

Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum.


J'ai volontairement mis une valeur de 10em pour que l'on se rende bien compte du retrait.

 

 Les espaces insécables



Tout d'abord, à quoi sert une espace insécable ?

À éviter que le visiteur de votre chronique (selon la taille et de la résolution de son écran) connaisse ce genre de mésaventure :

Ô Ciel ! Ô disgrâce imprévue ! Ô misérable père
! Pauvre Géronte, que feras-tu ?

Autrement dit, qu'en cas de retour à la ligne un signe de ponctuation soit séparé du texte qui le précède, un nombre avec séparateur soit coupé en deux, etc. On va donc insérer une espace insécable entre le texte et ce qui le suit.

Nous avons déjà vu l'espace fine insécable qui s'écrit &#8239; en code ISO et que :

... Le code typographique français recommande d'insérer... devant les signes de ponctuation haute (composés d'un point sous un autre signe) : point-virgule, point d'interrogation et point d'exclamation, ainsi que comme séparateur de milliers, entre un nombre et son unité, et comme séparateur sans valeur facilitant la lecture des numéros de téléphone ou des numéros et codes d'identification, etc. Certains symboles, à l'instar des unités, sont également précédés d'une espace insécable (étroite), comme %, et les symboles monétaires comme €...

Extrait de la page Wikipédia ↗

Mais aussi en général toutes les symboles d'unité qui suivent un nombre.

Par exemple :

Ô rage&#8239;! ô désespoir&#8239;! ô vieillesse ennemie&#8239;!

Et le résultat :

Ô rage ! ô désespoir ! ô vieillesse ennemie !



Il existe aussi une espace insécable "normale" notée indifféremment &#160; ou &nbsp; en HTML, qui servira essentiellement pour les deux-points et aussi (selon les sources) pour les guillemets-chevrons, aussi appelés guillemets français («...»).

Pour écrire cette espace, j'ai un faible pour la seconde forme &nbsp; (d'après les initiales de nbreaking space en anglais), car il est facile de se souvenir de la traduction peu orthodoxe mais mnémotechnique : "non sécable espace" en français.


Exemple :

«&nbsp;Voici un texte entre guillemets&nbsp;»

Et le résultat : « Voici un texte entre guillemets »


Notez cependant qu'en PAO française l'usage de l'espace fine insécable se généralise, y compris pour le deux-points et les guillemets.

Et à mon avis, on doit pouvoir étendre cet usage aux pages web et ne plus utiliser que l'espace fine insécable.

 

 Mettre un commentaire


Quand vous ferez des pages assez longues, ou bien pour être sûr que vous êtes au bon endroit quand vous voudrez modifier une page ou un paragraphe, il peut être judicieux d'intégrer des commentaires dans le code. Tous les développeurs font ça et c'est possible dans tous les langages informatiques évolués. Son avantage réside dans le fait qu'il n'est pas visible une fois la page validée.

Pour ce faire, il est encadré par la balise <!-- ... --> comme ceci :

<!-- Ceci est un commentaire qui n'apparait pas dans ma page -->

Notez qu'il faut laisser au minimum une espace entre les -- et le texte qui les suit ou les précède.

Exemple :


exemple d'écriture d'un commentaire




Et le résultat : Commentaires dans le code ↗

Vous voyez que les commentaires n'apparaissent pas dans la page validée. Vous pourrez employer aussi bien des minuscules que des majuscules ainsi que tous les caractères spéciaux que vous voudrez.



 

 Notes

 
1. <br> est une balise qui n'a pas besoin d'être "fermée". On considère en langage HTML qu'il n'y a pas lieu de fermer une balise qui n'encadre pas un élément, il n'existe donc pas de balise </br>.

Le langage XHTML, plus contraignant mais qui n'est plus développé, exigeait lui la fermeture de toutes les balises et on avait donc créé une balise à la fois "ouvrante" et "fermante" : <br />. Même si elle est reconnue par le HTML5, il est inutile de l'employer.

En effet le W3C préconise d'utiliser la balise de saut de ligne <br> ↗. Voici la traduction d'une partie de la page :

L'exemple suivant illustre l'utilisation correcte de l'élément br :

<p> P. Sherman <br>
42 Wallaby Way <br>
Sydney </p>

 
2. Sans rentrer dans des détails trop techniques, la balise <span> est une balise "inline" ("en ligne" en français du certoch) et la balise <p> est une balise "block" ("bloc" en français). Pour faire simple, une balise "inline" sera utilisée pour modifier une portion de texte et ne provoquera pas de retour à la ligne, une balise "block" sera plutôt utilisée pour la mise en page et provoque obligatoirement un retour à la ligne.
 
3. Ne vous précipitez pas sur le Gaffiot de vos jeunes années de collège, non plus que sur le forum latin de Geneanet, le texte concerné par cette note ne veut rien dire. Le "Lorem ipsum", appelé ainsi parce que les paragraphes commencent souvent par ces mots, ou faux-texte était utilisé en imprimerie pour l'agencement des articles dans une page. Il a conservé le même rôle en infographie et développement web. De petits outils en ligne permettent de générer du faux-texte, vous en trouverez un dans Utilitaires ↗. Pour les plus curieux, voici l'article Wikipédia ↗ sur le sujet.
 
4. L'ancien attribut align que l'on pouvait affecter à la balise <p> est lui aussi déprécié en HTML5 et même s'il est pour le moment encore reconnu par les navigateurs, il est préférable de recourir à l'attribut style suivi de la propriété text-align.
 
5. En employant les em comme unités pour réaliser une tabulation, nous sommes sûrs que celle-ci sera toujours proportionnelle à la police utilisée et à sa taille. J'ai pour ma part spécifié 4em qui correspondent à peu près à une tabulation standard de huit caractères ; vous pouvez bien sûr mettre la valeur que vous voulez.
 
6. Citons pour mémoire la balise wiki : (deux-points), qui placée en début d'un paragraphe et suivie immédiatement (sans espace) du texte à décaler va créer un retrait légèrement inférieur à une tabulation. Elle génère les balises HTML <dl> et <dd> ↗ détournées ici de leur usage car initialement destinées à encadrer une définition ou une description.

Elle présente deux inconvénients :
- Elle crée un retrait de largeur fixe qu'on ne peut pas modifier à sa guise.
- Elle supprime toute mise en forme du texte définie auparavant et oblige donc à la spécifier à nouveau dès le début de celui-ci.

Il est donc aussi rapide et plus correct sémantiquement d'utiliser la balise <p> et la propriété margin-left.



───── oOo ─────


Index des pages