Chronique familiale




La chronique familiale pas à pas

Texte sur plusieurs colonnes



Dans les journaux, le texte est la plupart du temps présenté en colonnes. Arrivé en bas de la première colonne, le texte continue en haut de la deuxième et ainsi de suite.

On comprend aisément que ce type de présentation ne peut pas être réalisé à l'aide de cellules de tableaux ou de conteneurs (<div>) juxtaposés. En effet, il serait fort difficile (voire impossible) de savoir quelle quantité de texte attribuer à chaque contenant.

C'est toutefois réalisable en HTML et dans la chronique avec les propriétés :

- column-count qui va définir le nombre de colonnes.

- column-gap pour spécifier l'espace entre les colonnes. Cette option est facultative, le navigateur affecte un intervalle par défaut.

- column-rule pour le style et l'épaisseur du trait vertical entre les colonnes. Cette option est également facultative. Par défaut il n'y pas de trait vertical entre les colonnes.


Qu'on va par exemple intégrer dans une balise <div> comme ceci :


<div style="column-count:3; column-gap:3em; column-rule:solid 1px; text-align:justify;">

Inter quos Paulus eminebat notarius ortus in Hispania...
... detrahique patiuntur, ut iis amici potius quam ipsi fruantur.


</div>



Explications :


column-count:3 le nombre de colonnes doit impérativement être un entier positif. Faites des essais pour savoir qu'elle est le meilleur choix 1.

column-gap:3em la valeur en em permet de toujours respecter une proportionnalité avec le texte.

column-rule: solid 1px Cette propriété admet les mêmes styles que les bordures de tableau ↗ ou de <div> et les pixels pour la valeur de l'épaisseur conviennent parfaitement pour cet usage. On peut également affecter une couleur à ce trait.

text-align:justify n'est pas obligatoire. Cependant dans les journaux le texte est la plupart du temps justifié.


Et résultat : Texte sur trois colonnes ↗


On peut intégrer une image dans ces colonnes avec cette syntaxe :

<div style="column-count:3; column-gap:3em; column-rule:solid 1px; text-align:justify;">

Inter quos Paulus eminebat notarius ortus in Hispania...
<img src="https://... ...JPG" style="width:100%; padding:1em 0em;">
... detrahique patiuntur, ut iis amici potius quam ipsi fruantur.


</div>


La largeur est à 100% pour que l'image occupe toute la place disponible, la propriété padding2 permet de créer un espace entre l'image et le texte. Il conviendra de faire des essais sur l'emplacement de la photo afin qu'elle s'intègre harmonieusement dans la page.


Résultat : Colonnes avec photo ↗

 

 Notes

 
1. En effet la césure est encore mal maîtrisée en HTML. Or, sans césure, avec un texte justifié et une faible longueur de ligne, on risque de se retrouver avec des "trous" dans le texte peu élégants comme dans cette page ↗.
 
2. Les valeurs sont affectées à chaque côté dans le sens horaire en commençant par le haut. Si une seule valeur est précisée, elle sera affectée aux quatre côtés, si deux valeurs sont précisées (comme dans le cas présent), la première sera affectée aux côtés haut et bas, la seconde aux côtés droit et gauche.



───── oOo ─────


Index des pages