Modèle:Début de colonnes
Utilisation
Ce modèle permet d'afficher du contenu sur plusieurs colonnes, typiquement une liste.
Le modèle {{Début de colonnes}} s'utilise avec {{Fin de colonnes}}.
Ils sont fréquemment associés à {{Début de bloc solidaire}} et {{Fin de bloc solidaire}}, qui permettent de délimiter des parties du contenu ne pouvant pas être scindés en plusieurs colonnes.
Syntaxe
Syntaxe de base :
{{Début de colonnes|taille=em}}
contenu
{{Fin de colonnes}}
Avec en plus l'indication d'un nombre maximal de colonnes :
{{Début de colonnes|taille=em|nombre=n}}
contenu
{{Fin de colonnes}}
Paramètres
taille- Largeur minimale de chaque colonne, indiquée en em, mais sans l'unité
em(un cadratin correspond environ à 2 lettres latines). - Le contenu sera divisé en autant de colonnes que possible.
- Exemple :
12 - Valeurs suggérées (à adapter au contexte) :
8à12: Convient généralement bien pour des listes de codes courts, de courtes légendes d'images (avec {{Légende}}) ou une liste d'icônes ou glyphes.12à20: Idéal pour la plupart des listes à puces/numérotées, à adapter selon la longueur moyenne des éléments.18à24: Pour des listes contenant des éléments relativement longs (comme des références ou une liste détaillée d'ouvrages bibliographiques).20à40: Divers contenu dont la mise en colonnes permet d'éviter une perte de place ou d'en améliorer la présentation ; galeries d'images, tableaux contigus, paragraphes de texte.
nombre- Nombre maximal de colonnes à afficher.
Ce paramètre ne devrait pas être utilisé sans que le paramètre taillene soit défini.- Ce paramètre sert à empêcher une division du contenu dans un nombre excessif de colonnes. Ainsi, on est assuré que le nombre de lignes par colonne restera suffisant en tous temps et ne déséquilibrera pas la présentation même sur un écran très large (on peut généralement souhaiter que le nombre de lignes de chaque colonne soit au moins égal à trois).
[Déprécié] — Utilisation sans indication de taille: pour des raisons de rétro-compatibilité, l'indication d'un nombre de colonnes sans indication d'une largeur avectaillescindera le contenu en autant de colonnes qu'indiqué quelle que soit la largeur de l'écran. Cela cause de sérieux problèmes de lisibilité des articles sur les appareils de type smartphones ou tablettes, ainsi que pour les lecteurs malvoyants utilisant un niveau de zoom important dans leur navigateur. Cette syntaxe n'est conservée qu'à des fins de compatibilité avec l'ancien fonctionnement du modèle, et ses utilisations actuelles devraient être complétées — ou remplacées — par une indication de largeur des colonnes. Ces utilisations dépréciées sont catégorisées dans Catégorie:Page utilisant une présentation en colonnes avec un nombre fixe de colonnes.écart- Largeur de l'écart entre les colonnes, sous la forme d'une valeur CSS valide (px, em ou % ; indiquer
0pour aucun écart). - Valeur par défaut :
.3em - Une valeur de
.3em(par défaut) ou plus est nécessaire si unfiletest défini. - Pour les listes à puces ou numérotées situées dans un espace restreint, il est possible de définir l'écart à
0(les listes à puces/numérotés sont déjà naturellement indentées). Aucunfiletoptionnel ne doit alors être défini. filet- Largeur, style et couleur du filet vertical facultatif séparant deux colonnes, sous la forme d'un trio de valeurs CSS pour bordures
taille style couleur. - Les filets ne sont pas nécessaires pour les listes à puces, mais sont utiles dans le cas de colonnes de texte si le texte est justifié en colonnes étroites, surtout si on veut aussi réduire leur écart par défaut en dessous de « 1em » pour augmenter la compacité des colonnes en utilisant aussi la justification du texte des colonnes, afin de bien visualiser leurs marges latérales très réduites. L'utilisation des filets nécessite d'indiquer un
écartsupérieur à la largeur du filet. - Exemple :
1px solid #AAA marge- Marge verticale avant le contenu, sous la forme d'une valeur CSS valide (px, em ou %). La valeur indiquée devrait correspondre à la marge supérieure du contenu lui-même, que ce paramètre permet d'annuler et de reporter hors des colonnes, pour ne pas l'appliquer à la seule première colonne affichée, mais simultanément à toutes les colonnes qui seront ainsi correctement taillées et alignées verticalement.
- Valeur par défaut :
.3em - Valeurs suggérées :
.3em(par défaut) : pour une liste à puces ou numérotée ;.5em: pour un ou plusieurs paragraphes de texte (y compris un poème) ;- autres valeurs en em/px : pour des cas particuliers où le premier élément de la première colonne est décalé par rapport aux éléments des autres colonnes.
style- Propriétés CSS supplémentaires applicables au contenu des colonnes elles-mêmes (et non au conteneur groupant toutes les colonnes).
- À utiliser pour les styles qui ne dépendent pas directement de la disposition des colonnes, comme la mise en évidence du texte ou son alignement dans chaque colonne.
style1- Propriétés CSS supplémentaires applicable au conteneur groupant toutes les colonnes (et non directement au contenu des colonnes elles-mêmes, même si elles en héritent).
- Surtout utile pour modifier l'échelle relative des polices de caractères et adapter correctement la largeur des colonnes indiquée en cadratins ainsi que l'interlignage, qui doivent en tenir compte.
class- Classes CSS supplémentaires applicables au conteneur des colonnes.
Exemples
Avec le paramètre taille
{{Début de colonnes|taille=12}}
* [[Sceau-cylindre]]
* [[Disque de Phaistos]]
* [[Xylographie]]
* [[Taille-douce]]
* [[Presse typographique]]
* [[Lithographie]]
* [[Chromolithographie]]
* [[Flexographie]]
* [[Quadrichromie]]
* [[Sérigraphie]]
* [[Imprimante matricielle]]
* [[Imprimante thermique]]
* [[Imprimante à jet d'encre]]
* [[Photocopieur]]
* [[Imprimante laser]]
{{Fin de colonnes}}
Ce mode est idéal pour faciliter la lecture de long textes avec des lignes pas trop longues et faciles à suivre visuellement. Les colonnes occupent toute la largeur de la page ce qui permet de continuer à utiliser l'espace d'écran disponible. Il facilite la lecture des textes sur les écrans larges. La largeur conseillée est voisine de 40 à 70 caractères, soit environ 20 à 36 em, et devrait suffire aussi pour les textes en vers formatés avec la balise <poem> (pour de simples listes de mots en français simplement séparées par des sauts de lignes sans puces, cette largeur conseillée peut alors être réduite à 16 em).
Avec les paramètres taille et nombre
{{Début de colonnes|taille=12|nombre=3}}
* [[Sceau-cylindre]]
* [[Disque de Phaistos]]
* [[Xylographie]]
* [[Taille-douce]]
* [[Presse typographique]]
* [[Lithographie]]
* [[Chromolithographie]]
* [[Flexographie]]
* [[Quadrichromie]]
* [[Sérigraphie]]
* [[Imprimante matricielle]]
* [[Imprimante thermique]]
* [[Imprimante à jet d'encre]]
* [[Photocopieur]]
* [[Imprimante laser]]
{{Fin de colonnes}}
Cet exemple est identique au précédent, mis à part l'indication d'un nombre maximal de colonnes. Cela permet d'éviter d'étaler inutilement certaines listes sur des écrans larges, et de se retrouver qu'avec un ou deux éléments dans chaque colonne.
Avec les paramètres taille et écart
Noter que dans l'exemple ci-dessous, le contenu est non pas une liste mais un ensemble de paragraphes (même s'ils sont formatés avec une balise « poem ») et la marge verticale est ajustée à 0.5em pour qu'elle s'applique à l'ensemble des colonnes et pas seulement la première, et donc dimensionner et aligner alors correctement le contenu de chaque colonne). Indiquer simplement une largeur suffisante évitant la coupure des lignes de vers dans les poèmes. L'utilisation de filets dans les gouttières est facultative en absence de justification (qui ne devrait pas être nécessaire pour les vers de poésie ou dramatiques) mais il peut être utile de réduire un peu la gouttière par défaut (1em) en utilisant un filet, afin d'augmenter le nombre de colonnes utilisables.
{{Début de colonnes|taille=19|marge=.5em|écart=.5em|filet=1px solid #AAA}}
<poem>
Carles li reis, nostre emper[er]e magnes
Set anz tuz pleins ad estet en Espaigne :
Tresqu’en la mer cunquist la tere altaigne.
N’i ad castel ki devant lui remaigne ;
<sup>5</sup> Mur ne citet n’i est remes a fraindre,
Fors Sarraguce, ki est en une muntaigne.
Li reis Marsilie la tient, ki Deu nen aimet ;
Mahumet sert e Apollin recleimet :
Nes poet guarder que mals ne l’i ateignet.
<sup>10</sup> Li reis Marsilie esteit en Sarraguce.
Alez en est en un verger suz l’umbre ;
Sur un perrun de marbre bloi se culchet,
Envirun lui plus de vint milie humes.
Il en apelet e ses dux e ses cuntes :
<sup>15</sup> […]
</poem>
{{Fin de colonnes}}
Carles li reis, nostre emper[er]e magnes
Set anz tuz pleins ad estet en Espaigne :
Tresqu’en la mer cunquist la tere altaigne.
N’i ad castel ki devant lui remaigne ;
5 Mur ne citet n’i est remes a fraindre,
Fors Sarraguce, ki est en une muntaigne.
Li reis Marsilie la tient, ki Deu nen aimet ;
Mahumet sert e Apollin recleimet :
Nes poet guarder que mals ne l’i ateignet.
10 Li reis Marsilie esteit en Sarraguce.
Alez en est en un verger suz l’umbre ;
Sur un perrun de marbre bloi se culchet,
Envirun lui plus de vint milie humes.
Il en apelet e ses dux e ses cuntes :
15 […]
Pour les textes compactés en colonnes étroites et justifiés à droite et à gauche, il est vivement recommandé d'utiliser un filet vertical pour faciliter la lecture (en effet la justification des blancs entre les mots peut produire des espacements supérieurs entre eux qu'entre les colonnes, même avec la largeur de gouttière par défaut de 1em). Et il faut alors aussi un écart suffisant pour séparer les contenus de ce filet (qui sera centré dans l'écart entre colonnes), mais celui-ci peut être réduit à 5 pixels ou 0.4em pour un filet de 1 pixel, afin de compacter davantage la présentation (veiller dans ce cas à éviter les colonnes de moins de 15em pour les écritures alphabétiques et alphasyllabaires, afin d'éviter une justification excessive des blancs) :
{{Début de colonnes|taille=15|marge=.5em|écart=.4em|filet=1px solid #AAA|style1=font-size:87%;line-height:normal|style=text-align:justify}}
{{Lorem ipsum|3}} {{Lorem ipsum|3}} {{Lorem ipsum|3}}
{{Fin de colonnes}}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
Indiquer un écart à 0 convient aux listes à puces et listes numérotées, car elles sont déjà indentées à gauche en interne, et aucun écart supplémentaire n'est nécessaire entre les colonnes. En revanche cela ne convient pas si le contenu est constitué de paragraphes de texte non indentés ou si on utilise un filet vertical (inutile pour les listes à puces) qui doit se centrer dans cet écart.
{{Début de colonnes|taille=12|écart=0}}
* [[Sceau-cylindre]]
* [[Disque de Phaistos]]
* [[Xylographie]]
* [[Taille-douce]]
* [[Presse typographique]]
* [[Lithographie]]
* [[Chromolithographie]]
* [[Flexographie]]
* [[Quadrichromie]]
* [[Sérigraphie]]
* [[Photocopieur]]
* [[Imprimante laser]]
* [[Imprimante matricielle]]
* [[Imprimante thermique]]
{{Fin de colonnes}}
Note : Pour voir la différence, on peut jouer sur la largeur de fenêtre. En effet, la largeur calculée est uniquement une largeur minimale de colonne, et l'écart entre colonnes est lui aussi un écart minimum qui est élargi en fonction de la place restant disponible après avoir disposé un nombre suffisant de colonnes qui seront alors réparties équitablement dans cet espace. Un écart de 0 permet de caler souvent une colonne de plus dans la largeur de fenêtre. Mais il ne doit être utilisé que pour les listes à puces ou listes numérotées qui incluent une marge à gauche (voisine déjà de « 2em » selon le navigateur et son mode de rendu sur un périphérique) avant la puce ou le numéro. Il ne doit pas être utilisé pour disposer les paragraphes d'un long texte sur plusieurs colonnes (dans ce cas, l'écart par défaut « 1em » est généralement suffisant, sauf si le texte inclus dans les colonnes agrandit la taille des caractères).
Avec le paramètre nombre uniquement
Cette utilisation est dépréciée, car elle ne s'adapte pas correctement aux différentes tailles d'écran : il peut y avoir trop peu de colonnes (sur des écrans larges, avec des marges excessives et une taille verticale alors trop grande ne facilitant pas la lecture puisqu'on doit alors faire défiler le texte verticalement et remonter pour revenir en haut de la colonne suivante) ou bien trop de colonnes (sur des écrans étroits, le contenu contient des sauts de ligne en excès ou déborde parfois des colonnes qui alors superposent partiellement leurs contenus, ce qui est illisible). Il est préférable d'adapter le contenu pour qu'il puisse s'afficher dans une largeur minimale mais suffisante (quitte à revoir la taille des images incluses ou insérer des sauts de ligne ou césures dans le texte, et même si dans de rares cas cela nécessitera une barre de défilement horizontale pour voir la seule colonne qui reste affichée dans cette largeur minimale), et laisser alors le nombre de colonnes s'ajuster librement.
Les pages utilisant cette syntaxe dépréciée sont catégorisées dans la catégorie de maintenance Catégorie:Page utilisant une présentation en colonnes avec un nombre fixe de colonnes.
{{Début de colonnes|nombre=2}}
* <span style="white-space:nowrap">contenu plus large que prévu, qui pourrait déborder sur la colonne suivante sur des écrans peu larges</span>
* [[Sceau-cylindre]]
* [[Disque de Phaistos]]
* [[Xylographie]]
* [[Taille-douce]]
* [[Presse typographique]]
* [[Lithographie]]
* [[Chromolithographie]]
* [[Rotative|Presse rotative]]
* [[Flexographie]]
* [[Quadrichromie]]
* [[Sérigraphie]]
* [[Photocopieur]]
* [[Imprimante laser]]
* [[Imprimante matricielle]]
* [[Imprimante thermique]]
{{Fin de colonnes}}
- contenu plus large que prévu, qui pourrait déborder sur la colonne suivante sur des écrans peu larges
- Sceau-cylindre
- Disque de Phaistos
- Xylographie
- Taille-douce
- Presse typographique
- Lithographie
- Chromolithographie
- Presse rotative
- Flexographie
- Quadrichromie
- Sérigraphie
- Photocopieur
- Imprimante laser
- Imprimante matricielle
- Imprimante thermique
Compatibilité
Depuis mars 2020 ce modèle n'utilise plus que des propriétés CSS normalisées (i.e. sans vendor prefixes), celles-ci étant maintenant implémentées par tous les navigateurs, notamment :
- Mozilla Firefox (moteur de rendu Gecko) : à partir de la version 52
- Google Chrome (moteur de rendu Blink) : à partir de la version 50
- Internet Explorer (moteur de rendu Trident) : à partir de la version 10
- Microsoft Edge (moteurs de rendu EdgeHTML puis Blink) : à partir de la version 12
- Safari (moteur de rendu WebKit) : à partir de la version 10
- Opera (moteur de rendu Blink) : à partir de la version 37
En cas de navigateur non-compatible, l'ensemble du contenu est visible, mais sans mise en colonnes (affichage sur une seule colonne).
TemplateData
Début d'affichage d'un contenu (liste) sur plusieurs colonnes. Utiliser {{Fin de colonnes}} pour terminer l'affichage en colonnes.
| Paramètre | Description | Type | État | |
|---|---|---|---|---|
| Colonnes - largeur | taille largeur | Largeur minimale de chaque colonne, en em (cadratins).
| Nombre | suggéré |
| Colonnes - nombre | nombre | Nombre maximal de colonnes. Déconseillé si le champ « Colonnes - largeur » n’est pas renseigné.
| Nombre | facultatif |
| Colonnes - écart entre colonnes | écart | Largeur de l'écart entre les colonnes, sous la forme d'une valeur CSS valide (px, em ou % ; « 0 » pour aucun écart). Fonctionnalité avancée à n'utiliser qu'en cas de besoin.
| Ligne de texte | facultatif |
| Colonnes - style filet vertical | filet | Largeur, style et couleur du filet vertical facultatif séparant deux colonnes. Fonctionnalité avancée à n'utiliser qu'en cas de besoin.
| Ligne de texte | facultatif |
| Colonnes - marge avant début contenu | marge | Marge verticale avant le début du contenu : « .3em » (par défaut) pour une liste à puces ou numérotée ; « .5em » pour un ou plusieurs paragraphes de texte. Fonctionnalité avancée à n'utiliser qu'en cas de besoin.
| Ligne de texte | facultatif |
| Styles CSS additionnels - conteneur | style1 | Propriétés CSS supplémentaires pour la mise en forme du conteneur. Fonctionnalité avancée à n'utiliser qu'en cas de besoin. | Ligne de texte | facultatif |
| Styles CSS additionnels - contenu | style | Propriétés CSS supplémentaires pour la mise en forme du contenu. Fonctionnalité avancée à n'utiliser qu'en cas de besoin. | Chaîne | facultatif |
| Classes CSS additionnelles | class | Classes CSS supplémentaire applicables au conteneur des colonnes. Fonctionnalité avancée à n'utiliser qu'en cas de besoin. | Ligne de texte | facultatif |
Voir aussi
- {{Colonnes}}, pour afficher du contenu sur plusieurs colonnes
- {{Bloc solidaire}}, pour éviter qu’un bloc (par ex. une liste) se trouve séparé sur plusieurs colonnes
- {{Début de colonnes}} et {{Fin de colonnes}}, qui permettent d'éviter les problèmes avec les caractères
|et=- {{Début de bloc solidaire}} et {{Fin de bloc solidaire}}, pour éviter qu'un bloc (par ex. une liste) se trouve séparé sur plusieurs colonnes
La documentation de ce modèle est générée par le modèle {{Documentation}}.
Elle est incluse depuis sa sous-page de documentation. Veuillez placer les catégories sur cette page-là.
Les éditeurs peuvent travailler dans le bac à sable (créer) et la page de test (créer).
Voir les statistiques d'utilisation du modèle sur l'outil wstat.