Cette page fait l’objet d’une mesure de semi-protection étendue.

Modèle:Début de colonnes

Une page de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche

 Documentation[modifier] [purger]

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 :

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

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

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

ParamètreDescriptionTypeStatut
Tailletaille

Largeur minimale d’une colonne, en cadratin

Exemple
30
Nombresuggéré
Colonnesnombre

Nombre maximum de colonnes (déconseillé si le paramètre « taille » n’est pas renseigné)

Nombrefacultatif
Écartécart

Largeur du blanc entre les colonnes, mesure CSS valide

Par défaut
1em
Lignefacultatif
Filetfilet

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
Lignefacultatif
Marge verticalemarge

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
Lignefacultatif
Styles du conteneurstyle1

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înefacultatif
Styles du contenustyle

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înefacultatif
Classclass

Classe supplémentaire applicable au conteneur des colonnes

Chaînefacultatif

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.

Icône pour souligner l'importance du texte
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}}

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

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 à .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).

{{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 […]

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

Avec les paramètres taille et é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

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

{{Début de colonnes|nombre=2}}
* [[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