Texte en colonnes auto (column)

Un paragraphe trop large est inconfortable à lire. Mais il n'est pas toujours possible de placer le texte en colonnes.

 

Heureusement, il est possible de forcer un paragraphe à s'afficher en colonnes lorsque la largeur le permet, à l'aide de la propriété column .

 

Parmi les multiples description de cette propriété, j'ai apprécié la clarté de cet article : Les multi-colonnes en CSS3 par Raphaël sur alsacréations.

L'article d'alsacréations étant bien fait, inutile de tout expliquer à nouveaux.

En déterminant une largeur de colonne (column-width), le texte inséré dans un contenant à largeur variable se déroulera sur plusieurs colonnes dès que la largeur le permet. Le nombre de colonnes (column-count) détermine, selon la valeur de column-width, soit le nombre de colonnes, soit le nombre maximal de colonnes.

Précautions :

Suivant ce qui est ciblé, on peut obtenir des résultats imprévus. Si vous ciblez les paragraphes d'un contenant, le déroulé du texte peut être incohérent (pour la lecture). Chaque ligne de texte balisée en <p></p> étant coupée indépendamment de sa position relative dans le texte complet. La solution dans ce cas, est de composer le texte en effectuant des sauts de ligne (<br />).



Bloc Texte+Image de largeur proportionnelle à la page

C'est déjà un cas particulier, mais justement… C'est une situation suscitée par les limites de Jimdo. SI ce module est très utile, il est parfois impossible de l'associer à des textes en colonne, et cela peut poser problème, démonstration…

Si vous affichez cette page dans une fenêtre large, vous verrez du texte formant un bloc à gauche et une image à droite. Les lignes sont longues, à la limite de l'acceptable. Les dernières lignes passent sous l'image.


Bloc texte plus image :

Un bloc de texte, justifié, avec des sauts de paragraphes. 

Ô cette chaude matinée de février. Le Sud inopportun vint relever nos souvenirs d'indigents absurdes, notre jeune misère.

Henrika avait une jupe de coton à carreau blanc et brun, qui a dû être portée au siècle dernier, un bonnet à rubans, et un foulard de soie. C'était bien plus triste qu'un deuil. Nous faisions un tour dans la banlieue. Le temps était couvert, et ce vent du Sud excitait toutes les vilaines odeurs des jardins ravagés et des prés desséchés.

Cela ne devait pas fatiguer ma femme au même point que moi. Dans une flache laissée par l'inondation du mois précédent à un sentier assez haut elle me fit remarquer de très petits poissons.

La ville, avec sa fumée et ses bruits de métiers, nous suivait très loin dans les chemins. Ô l'autre monde, l'habitation bénie par le ciel et les ombrages ! Le sud me rappelait les misérables incidents de mon enfance, mes désespoirs d'été, l'horrible quantité de force et de science que le sort a toujours éloignée de moi. Non ! nous ne passerons pas l'été dans cet avare pays où nous ne serons jamais que des orphelins fiancés. Je veux que ce bras durci ne traîne plus une chère image.

Column :

J'applique sur le bloc parent du texte ci-après les propriétés :

column-width :200px; column-count:2

Si j'écris les préfixes destinés aux autres navigateurs cela donne : 

-moz-column-width:250px; -webkit-column-width:200px; -o-column-width:200px; column-width:200px;

-moz-column-count:2; -webkit-column-count:2; -o-column-count:2; column-count:2;    

Constatez (en réduisant la fenêtre) que la largeur de colonne pilote sa largeur minimale.

 

La blague est faite, on peut passer à la suite…


Bloc texte plus image affecté par la propriétés column

  • Le texte ne se déroule pas sous l'image, laissant un vide inutile.
  • La gouttière (l'espace entre les colonnes) est trop étroite.

 

Ô cette chaude matinée de février. Le Sud inopportun vint relever nos souvenirs d'indigents absurdes, notre jeune misère.

Henrika avait une jupe de coton à carreau blanc et brun, qui a dû être portée au siècle dernier, un bonnet à rubans, et un foulard de soie. C'était bien plus triste qu'un deuil. Nous faisions un tour dans la banlieue. Le temps était couvert, et ce vent du Sud excitait toutes les vilaines odeurs des jardins ravagés et des prés desséchés.

Cela ne devait pas fatiguer ma femme au même point que moi. Dans une flache laissée par l'inondation du mois précédent à un sentier assez haut elle me fit remarquer de très petits poissons.

La ville, avec sa fumée et ses bruits de métiers, nous suivait très loin dans les chemins. Ô l'autre monde, l'habitation bénie par le ciel et les ombrages ! Le sud me rappelait les misérables incidents de mon enfance, mes désespoirs d'été, l'horrible quantité de force et de science que le sort a toujours éloignée de moi. Non ! nous ne passerons pas l'été dans cet avare pays où nous ne serons jamais que des orphelins fiancés. Je veux que ce bras durci ne traîne plus une chère image.

Ajustement gouttière :

La propriété prévoit cette option :

column-gap :30px

Il faudra écrire les 3 autres déclinaisons avec les préfixes -moz- , -webkit- , -o- 

Ajustement du déroulé sous l'image :

On peut essayer de cibler les paragraphes plutôt que leur contenant :

#identifiantDuParent p 


Paragraphes <p> du bloc [texte plus image] affectés par les propriétés column-width / column-count / column-gap : 

  • Le texte est coupé en colonnes à chaque paragraphe, dispersant le texte.
  • Les colonnes ne sont pas régulières, à cause de l'image.

Ô cette chaude matinée de février. Le Sud inopportun vint relever nos souvenirs d'indigents absurdes, notre jeune misère.

Henrika avait une jupe de coton à carreau blanc et brun, qui a dû être portée au siècle dernier, un bonnet à rubans, et un foulard de soie. C'était bien plus triste qu'un deuil. Nous faisions un tour dans la banlieue. Le temps était couvert, et ce vent du Sud excitait toutes les vilaines odeurs des jardins ravagés et des prés desséchés.

Cela ne devait pas fatiguer ma femme au même point que moi. Dans une flache laissée par l'inondation du mois précédent à un sentier assez haut elle me fit remarquer de très petits poissons.

La ville, avec sa fumée et ses bruits de métiers, nous suivait très loin dans les chemins. Ô l'autre monde, l'habitation bénie par le ciel et les ombrages ! Le sud me rappelait les misérables incidents de mon enfance, mes désespoirs d'été, l'horrible quantité de force et de science que le sort a toujours éloignée de moi. Non ! nous ne passerons pas l'été dans cet avare pays où nous ne serons jamais que des orphelins fiancés. Je veux que ce bras durci ne traîne plus une chère image.

Ajustement de la largeur des colonnes :

La solution logique est d'adapter l'image à la largeur (proportionnelle) d'une colonne. Après tout, il s'agit d'une disposition esthétique qui s'avère nécessaire.

j'augmente également le column-width en conséquence (ici à 350px).

 

Ajustement du déroulé du texte :

Solution simple : remplacer les <p> qui coupent maladroitement le texte par des sauts de ligne <br />.

Il ne reste qu'un seul paragraphe en fin de texte susceptible d'être coupé en colonnes. 

le dernier paragraphe se coupe de moitié. Des essais successifs préciseront la meilleure coupe. 


Paragraphe unique du bloc [texte plus image] affecté par les propriétés column-width / column-count / column-gap.

Image de largeur proportionnelle 50% de l'espace - 10px de marge

  • Selon le contenu, il faut ajouter ou enlever des saut de paragraphe, en vérifiant que le texte ne se "disperse" pas selon la largeur du contenant, en particulier lorsque il est au plus étroit.

Ô cette chaude matinée de février. Le Sud inopportun vint relever nos souvenirs d'indigents absurdes, notre jeune misère. Henrika avait une jupe de coton à carreau blanc et brun, qui a dû être portée au siècle dernier, un bonnet à rubans, et un foulard de soie. C'était bien plus triste qu'un deuil. Nous faisions un tour dans la banlieue. Le temps était couvert, et ce vent du Sud excitait toutes les vilaines odeurs des jardins ravagés et des prés desséchés. Cela ne devait pas fatiguer ma femme au même point que moi.

Dans une flache laissée par l'inondation du mois précédent à un sentier assez haut elle me fit remarquer de très petits poissons. La ville, avec sa fumée et ses bruits de métiers, nous suivait très loin dans les chemins. Ô l'autre monde, l'habitation bénie par le ciel et les ombrages ! Le sud me rappelait les misérables incidents de mon enfance, mes désespoirs d'été, l'horrible quantité de force et de science que le sort a toujours éloignée de moi. Non ! nous ne passerons pas l'été dans cet avare pays où nous ne serons jamais que des orphelins fiancés. Je veux que ce bras durci ne traîne plus une chère image.

Conclusion

 

Column sera d'un grand renfort pour le responsive : évitant des textes trops longs et les colonnes trop étroites. Le cas du texte + image repousse la propriété dans ses retranchements, l'image repoussant les paragraphes de façon peu prévisible. 

 

Autres variantes de la propriété column

L'article cité présente les possibilités de contrôle sur les coupure forcées ou interdites des colonnes, ou la faculté à s'étaler sur plusieurs colonnes. Comme elles ne sont pas raisonnablement supportées, je les ai évitées.

 

Le code placé pour cette page, sur le dernier des exemples

(comme toujours, il faut adapter à vos identifiants)

#cc-m-textwithimage-10372257898 p{-moz-column-width:350px; -webkit-column-width:350px; -o-column-width:350px; column-width:350px;-moz-column-count:2; -webkit-column-count:2; -o-column-count:2; column-count:2;-moz-column-gap :30px;-webkit-column-gap :30px;-o-column-gap :30px;column-gap :30px;}#cc-m-10372257898.j-textWithImage .cc-imagewrapper {max-width: calc(50% - 10px)!important;}


0 commentaires