Modèle:Début de colonnes

Documentation

Cette documentation est incluse dans la sous-page de documentation (voir | modifier | historique). Si vous voulez améliorer ce modèle et si celui-ci est protégé, demandez à un administrateur de vous aider.

Utilisation

Le Modèle:Début de colonnes permet d'afficher du texte sur plusieurs colonnes (avec une gouttière de séparation par défaut d’1 em entre elles).

Il fonctionne avec plus de 98 % des navigateurs utilisés par les lecteurs (statistiques de juin 2015). Navigateurs compatibles :

• le moteur de rendu Gecko, ce qui est le cas des navigateurs de la Fondation Mozilla (dont Firefox) ;
• le moteur de rendu WebKit, comme Safari 3 (sur MacOS, iOS, Windows), Google Chrome ou la version libre Chromium sur Linux, les navigateurs par défaut sous Android, et les dernières versions de Microsoft Edge pour Windows 10 testées depuis début 2019 ;
• le moteur de rendu EdgeHTML pour le navigateur Microsoft Edge, abandonné en décembre 2018 au profit du moteur Webkit de Chromium (afin de permettre la compatibilité des contenus et applications entre Windows, MacOS, iOS, Android et Linux).
• le moteur de rendu Trident, à partir de la version 6, c’est le cas d’Internet Explorer 10 (pour les anciennes versions de Windows, logiciel qui n'est plus supporté) ;
• le moteur de rendu Presto, pour certaines versions du navigateur Opera.

En effet, ceux-ci implémentent déjà certaines propriétés des futures CSS3, dont celles concernant les colonnes (voir [1] et [2]).

Ce modèle s'utilise avec {{Fin de colonnes}}.

Syntaxe

Selon le réglage du nombre de colonnes ou de la taille :

• {{Début de colonnes|taille=em}}
• {{Début de colonnes|nombre=n}} (ancienne pratique qui peut exister encore dans certaines pages, et encore supportée pour compatibilité, mais aujourd'hui non recommandée si le paramètre « taille » n’est pas renseigné)

Raccourcis

• Vous pouvez utilisez les raccourcis : Début colonnes et Fin colonnes

Paramètres

Modèle débutant une zone affichée sur plusieurs colonnes. La zone doit être terminée avec {{Fin de colonnes}}

Paramètres du modèle[Modifier les données du modèle]

La mise en forme sur une seule ligne est préférée pour ce modèle.

Paramètre		Description	Type	État
taille	taille	Largeur minimale d’une colonne, en cadratins (''em''), mesuré dans la taille de police courante au début de l'inclusion de ce modèle. Ne pas indiquer d'unité de mesure (un cadratin correspond environ à 2 lettres latines). Pour faciliter la lecture du texte, il est conseillé d'éviter une valeur supérieure à 40 (des lignes trop longues sont plus difficiles à suivre visuellement pour les retours à la ligne) ou inférieure à 12 (lignes trop courtes avec trop de retours à la ligne, taille des blancs entre les mots excessive en cas de justification, marge excessives et trop irrégulières en fin de ligne au sein des paragraphes). Une taille voisine 36 convient bien aux paragraphes de texte, une taille voisine de 18 convient souvent pour les listes de noms simples ou composés, des tailles inférieures sont possibles pour des listes de codes courts ou la présentation compacte de listes d'icônes ou de glyphes. Ne pas indiquer de taille inférieure à 4 pour les listes à puce et listes numérotées, tenir compte des marges d'indentation des contenus. Exemple 30	Nombre	suggéré
Colonnes	nombre	Nombre maximum de colonnes (déconseillé si le paramètre « taille » n’est pas renseigné)	Nombre	facultatif
écart	écart	Largeur de la gouttière d'écartement entre les colonnes. Doit indiquer une mesure CSS valide, suffisante pour l'éventuel filet vertical. En absence de tout filet, peut être positionnée à « 0 » pour les listes numérotées et listes à puces qui sont indentées de façon suffisante. Par défaut 1em	Ligne de texte	facultatif
filet	filet	Largeur, style et couleur du filet vertical facultatif séparant deux colonnes, au centre de l'écart. 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 cependant d'indiquer un écart supérieur à la largeur du filet. Exemple 1px solid #AAA	Ligne de texte	facultatif
Marge verticale	marge	Marge verticale avant le contenu : la valeur par défaut « .3em » convient si le contenu est une liste à puces ou numérotée (y compris les listes de références), ce qui est le cas d'utilisation le plus fréquent ; utiliser « .5em » si le contenu à presenter en colonnes est constitué d'un ou plusieurs paragraphes de texte (y compris un poème). 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. Par défaut .3em	Ligne de texte	facultatif
Styles du conteneur	style1	Styles 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	Chaîne	facultatif
Styles du contenu	style	Styles CSS supplémentaires applicable 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	Chaîne	facultatif
class	class	Classe supplémentaire applicable au conteneur des colonnes	Chaîne	facultatif

Les colonnes vont se créer automatiquement en fonction de la largeur minimale spécifiée, pour occuper toute la largeur du bloc contenant ce modèle. La largeur conseillée pour une liste de mots est 18 em, et il est dans ce cas plutôt déconseillé de restreindre le nombre de colonnes. Les détails du comportement peuvent être consultés dans les documents mentionnés précédemment.

Attention : Pour faciliter la lecture sur les écrans de taille réduite, il est recommandé de spécifier la taille plutôt que le nombre de colonnes seul.

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}}

• 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

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 é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 ;
⁵ 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.
¹⁰ 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 :
¹⁵ […]

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, consectetur 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, consectetur 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, consectetur 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ée à 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}}

• Sceau-cylindre
• Disque de Phaistos
• Xylographie
• Taille-douce
• Presse typographique
• Lithographie
• Chromolithographie
• Flexographie
• Quadrichromie
• Sérigraphie
• Photocopieur
• Imprimante laser
• Imprimante matricielle
• Imprimante thermique

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

Cette utilisation est non recommandé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 cet largeur minimale), et laisser alors le nombre de colonnes s'ajuster librement.

{{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

Voir aussi

• {{Début de bloc solidaire}} et {{Fin de bloc solidaire}}, pour éviter qu’un bloc (une liste, par exemple) se trouve séparé sur plusieurs colonnes;
• {{Colonnes}} et {{Bloc solidaire}}, équivalents équilibrés.