CSS : un texte réparti sur plusieurs colonnes

D'après mes tests cette page s'affiche correctement avec Firefox et Edge mais, une fois n'est pas coutume, mal sur Chrome (pas de césures).
Donc un peu de patience ...

Titre principal

Comme je viens de te le dire Florence, ce n’est malheureusement pas une blague. David a travaillé sur deux anciennes technologies abandonnées depuis longtemps et il les a couplées. Séparées, elles ne valaient rien, mais, il les a réunies et a démarré le processus. Comme tu dois le savoir, il y a maintenant plus d’ordinateurs sur terre que d’humains et tous ces ordinateurs sont connectés entres eux grâce au réseau des réseaux : Internet.

Il a recommencé et recommencé. Pratiquement tout les ordinateurs existants furent sous son contrôle. Il ne laissait pas de trace, ne se montrait pas. Et puis, il a découvert les dialogues en direct via Internet, le téléphone, la visio conférence, la domotique...

Sous-titre

Dans le plancher pour savoir si quelqu'un marchait et quel poids il faisait. Le cœur pouvait alors déterminer de quelle personne il s'agissait. Dans les murs, des cellules photosensibles, des micro-caméras et tout un réseau de détecteurs divers (magnétique, pression, infrarouge...) permettait de déterminer la position exacte de chaque personne et objet dans la maison, de ventiler ou chauffer en conséquence, d'allumer ou d'éteindre la lumière...

La grande porte s’ouvrit lourdement en coulissant sur le côté gauche sans faire le moindre bruit. Derrière la porte, une nouvelle route, éclairée par de multiples projecteurs accrochés de chaque côtés, s’enfonçait dans les profondeurs de cet ouvrage. Cette route était faite de zigzag incessant, certainement pour empêcher le souffle d’une bombe atomique pensa David.

La grande porte s’ouvrit lourdement en coulissant sur le côté gauche sans faire le moindre bruit. Derrière la porte, une nouvelle route, éclairée par de multiples projecteurs accrochés de chaque côtés, s’enfonçait dans les profondeurs de cet ouvrage. Cette route était faite de zigzag incessant, certainement pour empêcher le souffle d’une bombe atomique pensa David.

Le code de la page (extraits)

... <style> article { width : 96% ; margin : 10px auto 10px auto ; background : lightgrey; text-align : justify ; column-count :3 ; column-gap :20px ; column-rule : 2px solid silver; -webkit-hyphens : auto ; -moz-hyphens : auto ; -ms-hyphens : auto ; hyphens : auto; } p {margin : 10% ; } article h2 {column-span : all;} article h3 {break-before :column; text-align :center;} ... <article> <h2>Titre principal</h2> <p>Comme je viens de te le dire Florence, ce n’est malheureusement pas une blague. David a travaillé sur deux anciennes technologies abandonnées depuis longtemps et il les a couplées. Séparées, elles ne valaient rien, mais, il les a réunies et a démarré le processus. Comme tu dois le savoir, il y a maintenant plus d’ordinateurs sur terre que d’humains et tous ces ordinateurs sont connectés entres eux grâce au réseau des réseaux : Internet. <p>Il a recommencé et recommencé. Pratiquement tout les ordinateurs existants furent sous son contrôle. Il ne laissait pas de trace, ne se montrait pas. Et puis, il a découvert les dialogues en direct via Internet, le téléphone, la visio conférence, la domotique... <h3>Sous-titre</h3> ... </article> ...

Commentaire du code

Pouvoir répartir proprement du texte sur plusieurs colonnes sans prise de tête. Voila un vieux rêve des développeurs WEB qui enfin se réalise enfin.

Plutôt que de fixer le nombre de colonnes on peut fixer la largeur de chaque colonne : column-width.

La propriété hyphens

La propriété hyphens doit encore être préfixée !

Il faut aussi préciser dans le code HTML la langue car les règles de césure varient selon les langues.
Dans l'exemple le texte est en français dans il faut écrire dans la partie HEAD :

<html lang ="fr">

Rappel : testez cette page avec Firefox ou Edge pour observez les césures !

Lorsqu'elle sera implémentée la propriété hyphens est préférable à la propriété word-break qui coupe les mots mais n'importe ou !
Retour menu