Wikilivres/Présentation des pages

Cette page explique comment présenter le texte des chapitres d'un livre, les citations, ... Les modèles permettent d'aider à présenter une page :

• voir Aide:Modèles pour la syntaxe permettant d'inclure un modèle,
• voir Wikilivres:Modèles pour la liste des modèles disponibles.

Présentation sur deux ou trois colonnes

La présentation sur plus d'une colonne permet de combler le vide en juxtaposant plusieurs parties du texte l'une à côté de l'autre, ou bien de présenter une illustration pour le texte d'à côté. Cependant sur téléphone mobile, la largeur de l'écran ne permet pas une telle juxtaposition de manière lisible et pratique. Voir Version mobile.

Toutefois, voici deux moyens de faire une présentation adaptative : sur deux ou trois colonnes quand la largeur de l'écran le permet, ou sur une seule colonne (une partie sous l'autre) sur les écrans de petite largeur.

Zones

Cette façon de faire utilise les balises <div> de la syntaxe HTML.

Pour deux colonnes, la syntaxe à utiliser est la suivante :

<div class="flex-content">

<div class="flex-content-half">
<!-- La première partie -->
</div>

<div class="flex-content-half">
<!-- La seconde partie -->
</div>

</div>

Pour trois colonnes :

<div class="flex-content">

<div class="flex-content-third">
<!-- La première partie -->
</div>

<div class="flex-content-third">
<!-- La deuxième partie -->
</div>

<div class="flex-content-third">
<!-- La troisième partie -->
</div>

</div>

Tableau

L'autre façon de présenter sur deux ou trois colonnes utilise la syntaxe wiki des tableaux, en utilisant la classe CSS "flexible".

Sur 2 colonnes :

{| class="flexible"
|
<!-- La première partie -->
|
<!-- La seconde partie -->
|}

Sur 3 colonnes :

{| class="flexible"
|
<!-- La première partie -->
|
<!-- La deuxième partie -->
|
<!-- La troisième partie -->
|}

Sans découpe prédéterminée

Les deux premières façons supposent que le contenu a des parties prédéterminées répartissable sur deux ou trois colonnes. Cette troisième façon de faire s'utilise quand le texte n'a pas de découpe prédéterminée entre les colonnes et utilise la fonctionnalité columns des feuilles de style. Comme illustré ci-dessous, quand la largeur d'affichage est en dessous du seuil paramétré (350 pixels dans l'exemple), le contenu s'affiche sur une colonne.

Sur 2 colonnes :

<div style="columns: 2 350px;">

<!-- Le contenu à répartir sur deux colonnes, ou une seule en dessous de 350 pixels de largeur par colonne. -->

</div>

Sur 3 colonnes :

<div style="columns: 3 350px;">

<!-- Le contenu à répartir sur trois colonnes, ou une seule en dessous de 350 pixels de largeur par colonne. -->

</div>

Citations

Exemple :

{{Modèle:BlocCitation|Lorem ipsum dolor sit amet, consectetur adipiscing elit. (… etc; etc. citation longue …) lorem varius purus. Curabitur eu amet.|auteur=[[w:Faux-texte|Pas d’auteur]] - texte sans signification (aurait originellement été tiré d'un ouvrage écrit par Cicéron en 45 av. J.-C.)}}

«
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. (… etc; etc. citation longue …) lorem varius purus. Curabitur eu amet.
	»
	— Pas d’auteur - texte sans signification (aurait originellement été tiré d'un ouvrage écrit par Cicéron en 45 av. J.-C.)

Voir Modèles de citation pour d'autres modèles.