View source for Template:Début de colonnes/Documentation

{{Sous-page de documentation}}

== 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 [[Cadratin|''em'']] entre elles). Il permet de mieux utiliser l'espace de l'écran et d'éviter d'avoir une marge blanche sur la droite.

Il fonctionne avec plus de 98 % des navigateurs utilisés par les lecteurs ([http://stats.wikimedia.org/archive/squid_reports/2015-06/SquidReportClients.htm statistiques de juin 2015]). Navigateurs compatibles :
* le moteur de rendu [[Gecko (moteur de rendu)|Gecko]], ce qui est le cas des navigateurs de la [[Mozilla Foundation|Fondation Mozilla]] (dont [[Mozilla Firefox|Firefox]]) ;
* le moteur de rendu [[WebKit]], comme [[Safari (logiciel)|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 (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 [[Feuilles de style en cascade#CSS3|CSS3]], dont celles concernant les colonnes (voir [http://www.w3.org/TR/2001/WD-css3-multicol-20010118/] et [https://developer.mozilla.org/en/CSS/CSS3_Columns]).

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

== Syntaxe ==

Selon le réglage du nombre de colonnes ou de la taille :
* <code>{{((}}Début de colonnes|taille=''em''}}</code>
* <code>{{((}}Début de colonnes|nombre=''n''}}</code> (ancienne pratique qui peut exister encore dans certaines pages, et encore supportée pour compatibilité, mais aujourd'hui non recommandée)
: Les pages utilisant le paramètre « nombre=''n'' » sont suivies dans la [[:Catégorie:Page utilisant une présentation en colonnes avec un nombre fixe de colonnes]].

=== Raccourcis ===
* Vous pouvez utilisez les raccourcis : <code><nowiki>Début colonnes</nowiki></code> et <code><nowiki>Fin colonnes</nowiki></code>

== Paramètres ==
<templatedata>
{
	"description": "Modèle débutant une zone affichée sur plusieurs colonnes. La zone doit être terminée avec {{Fin de colonnes}}",
	"params": {
		"taille": {
			"example": "30",
			"type": "number",
			"suggested": true,
			"description": "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."
		},
		"nombre": {
			"label": "Colonnes",
			"description": "Nombre maximum de colonnes (déconseillé si le paramètre « taille » n’est pas renseigné)",
			"type": "number"
		},
		"écart": {
			"description": "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.",
			"type": "line",
			"default": "1em"
		},
		"filet": {
			"description": "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.",
			"example": "1px solid #AAA",
			"type": "line"
		},
		"marge": {
			"label": "Marge verticale",
			"description": "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.",
			"type": "line",
			"default": ".3em"
		},
		"style1": {
			"label": "Styles du conteneur",
			"description": "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",
			"type": "string"
		},
		"style": {
			"label": "Styles du contenu",
			"description": "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",
			"type": "string"
		},
		"class": {
			"description": "Classe supplémentaire applicable au conteneur des colonnes",
			"type": "string"
		}
	},
	"format": "inline"
}
</templatedata>

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 [[cadratin|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|dimension=16|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 <code>taille</code> ===
<pre>{{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}}</pre>
{{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 <code>&lt;poem&gt;</code> (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 <code>taille</code> et <code>écart</code> ===
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.

<pre>{{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}}
</pre>

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

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) :

<pre>{{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}}</pre>
{{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}}

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.
<pre>{{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}}</pre>
{{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 <code>nombre</code> ===
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.
<pre>{{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}}</pre>
{{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}}

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

<includeonly>
[[Catégorie:Modèle colonne|Debut de colonnes]]
</includeonly>