Traduction
Tutoriel CSS - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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...
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.
Les coupures de mot se font n'importe où. C'est l'inconvénient de la vieille propriété word-break
La propriété Colum-rule est suivie de 3 valeurs car c'est un raccourci qui remplace : column-rule-width, colum-rule-width, colum-rule-color
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...
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.
Les césures sont propres : entre deux syllabes.
Le texte est contenu dans la boite ARTICLE et est identique à celui de l'exemple 1.
Quant au CSS quelques différences à signaler :
A la place de "word-break" j'ai utilisé "hyphens".
La propriété hyphens est en cours d'implémentation par les navigateurs. En 2023 les principaux navigateurs l'ont implémenté
(Chrome & Firefox).
Il faut aussi préciser dans le code HTML la langue car les règles de césure varient selon les langues.
Ces conditions remplis, la césure se fait entre deux syllabes.
Le texte étant ici en français, il faut donc écrire dans la partie HEAD : < html lang ="fr" >
Si le navigateur ne reconnait pas la propriété hyphens il n'y aura pas de coupures de mot ce qui devient génant dans le
cadre du multicolonnage.
L'idéal serait qu'a défaut de propriété "hyphens" ce soit la propriété "word-break" qui s'applique ...
Sachez que c'est désormais possible grâce à une règle démarrant par @supports ; on crée une règle de style incluant un test.
Savoir créer un style conditionnel
Lorsqu'un liste (à puces ou numérotée) comprend un grand nombre d'items, la disposition normale peut devenir génante.
Pourquoi ne pas répartir une liste sur plusieurs colonnes ?
Le code ne présente aucune difficulté.