En Communs

Réflexions et Actions Communes

Outils pour utilisateurs

Outils du site


wiki:logiciels:dokuwiki:wrap

Mise en page (utilisation de Wrap)

Le module Wrap est installé sur ce site. Il permet des mises en page sophistiquées. Une démo de ce module est disponible ici : http://demo.selfthinker.org/plugin:wrap

Syntaxe de base

En majuscules <WRAP> crée un «div» et doit être utilisé pour des containers, entourant des paragraphes, listes, tables, etc.

<WRAP classes width :language>
Block multi-lignes
</WRAP>

En minuscule, <wrap> crée un span et doit être utilisé pour des contenants internes aux paragraphes, listes, tables, etc.

<wrap classes width :language>Quelques mots</wrap>

:!: Dans ce cas on ne peut pas aligner le contenant ni définir sa taille ou créer des colonnes.

Classes et Styles

Colonnes et éléments flottants

Pour créer une colonne utiliser la classe column et une largeur :

<WRAP column 30%>...content...</WRAP>

Utilisation de mise en forme

Toutes sont supportées :

  • Gras
  • Italique
  • Soulignage
  • Code « machine à écrire »
  • Barré

Et leur combinaison.

Vous pouvez aussi utiliser des blocs en ligne : bloc important ou peu important

Elements flotants

Vous pouvez spécifier la position de l'élément par l'une des classes suivantes :

  • column place l'élément à gauche de l'élément précédent. Donc les éléments column seront placé de gauche à droite tant que la largeur globale de la page le permet puis l'on passe à la ligne suivante.
  • left Place l'élément à gauche de la page sur sa ligne.
  • right Place l'élément à droite de la page sur sa ligne.
  • center Place l'élément au centre de la page sur sa ligne.

Largeurs

Toutes les expressions de largeur sont autorisées mais il est recommandé d'utiliser l'une de celle-ci :

typeexempleremarque
%30%recommandé pour les thèmes adaptatifs, mais attention sur mobile si le bloc est seul dans la largeur il sera réduit !
px420pxSi vous avez une image de largeur fixe dans votre contenant, mais attention à la lecture sur mobile !
em20emSi votre thème est basé sur les tailles de police

La largeur d'une table dans une colonne ou une boite est par défaut de 100%

Après avoir utilisé des éléments flottants vous pouvez avoir ce genre d'affichage. L'élément suivant est affiché en partie sur l'espace de la page non utilisé par les éléments précédents.

… Pour éviter cela il vous faut rétablir le flux

<WRAP clear></WRAP>

après le dernier élément flottant.

:!: Attention: L'utilisation d'une largeur peut s'afficher différement suivant les navigateurs. Il est prudent de prévoir une marge et de ne pas utiliser les 100% de la page mais par exemple 30% par colonne si l'on a 3 colonnes.

Texte Multi-colonnes

Avec les navigateurs actuels vous pouvez répartir le texte facilement sur plusieurs colonnes. Il suffit d'utiliser col2 pour 2 colonnes, col3 pour 3 colonnes, col4 pour 4 colonnes and col5 pour 5 colonnes.

Ce texte est réparti sur 3 colonnes en utilisant la syntaxe.

<WRAP col3>
texte réparti sur 3 colonnes
</WRAP>

Colonnes multiples (pour les mobiles)

2 colonnes

colonne de gauche

<WRAP half column box>

colonne de droite

<WRAP half column box>

colonne de gauche (largeur 1 tiers)

<WRAP third column box>

colonne de droite (largeur 2 tiers)

<WRAP twothirds column box>

3 colonnes

colonne de gauche

<WRAP third column box>

colonne du milieu

<WRAP third column box>

colonne de droite

<WRAP third column box>

4 colonnes

colonne de gauche

<WRAP quarter column box>

colonne du milieu gauche

<WRAP quarter column box>

colonne du milieu droit

<WRAP quarter column box>

colonne de droite

<WRAP quarter column box>

Aligner le texte dans un container

Il faut utiliser l'un des mot clé suivant

  • leftalign
  • rightalign
  • centeralign
  • justify

Et cela fonctionne même en multi-colonnes :

Texte aligné à gauche …

Texte centré

… Texte aligné à droite.

Voici le code correspondant :

<WRAP leftalign>
Texte aligné à gauche ...
</WRAP>

<WRAP centeralign>
Texte centré
</WRAP>

<WRAP rightalign>
... Texte aligné à droite.
</WRAP>

Boites et Notes

<WRAP round box 400px left>

Cette syntaxe créée une boite box de 400px de large avec des coins arrondis round. Les couleurs de la boite sont fixées par les paramètres de couleur __background_alt__ et __text__ du thème.

La mention round ne fonctionne pas avec tous les navigateurs

Notes avec icones

 <WRAP info 30% left></WRAP>
 <WRAP tip 30% left></WRAP>
 <WRAP important 30% left></WRAP>
 <WRAP alert 30% left></WRAP>
 <WRAP help 30% left></WRAP>
 <WRAP download 30% left></WRAP>
 <WRAP todo round 50% left></WRAP>

Notes simples

La syntaxe est similaire :

<WRAP Type left 18%>Texte</WRAP>

où Type vaut l'une des valeurs suivantes.

Type : danger

Type : warning

Type : caution

Type : notice

Type : safety

On a utilisé la mention round pour les deux dernières.

Le texte précédent utilise la mention tip dans un élément wrap minuscule. Voici un récapitulatif des styles présentés en ligne:
info, help, alert, important, tip, download, todo et box, danger, warning, caution, notice, safety.

Marquer le texte

On peut surligner le texte, le minimiser ou encore le mettre en avant.

Voici le code correspondant à cette phrase :

On peut <wrap hi>surligner le texte</wrap>, <wrap lo>le minimiser</wrap> ou encore <wrap em> le mettre en avant</wrap>.

:!: La présentation du texte dépend de la personalisation du thème.

Autres mise en forme de texte

Décalage

Ce texte est décalé vers l'intérieur de la page.

<wrap indent>Ce texte est décalé vers l'intérieur de la page.</wrap>

Décalage négatif

Ce texte est décalé vers l'extérieur de la page.

<wrap outdent>Ce texte est décalé vers l'extérieur de la page.</wrap>

Encadrement avec passage à la ligne

A l'intérieur de ce bloc de 250 pixels de large, le texte de code passe automatiquement à la ligne quand la largeur est atteinte. 
<WRAP prewrap 250px>
<code>
A l'intérieur de ce bloc de 250 pixels de large, le texte de code passe automatiquement à la ligne quand la largeur est atteinte. 
</code>
</WRAP>

Texte sympathique

Voici un bloc de texte caché : Après la pluie vient le beau temps. (et vice versa)

Voici un bloc de texte caché : <wrap spoiler>Après la pluie vient le beau temps. (et vice versa)</wrap>

Sélectionnez la boite pour faire apparaitre le texte.

Texte caché

Le texte suivant est caché Merci de relire cette page.

Le texte suivant est caché <wrap hide>Merci de relire cette page.</wrap>

:!: Attention avec les anciens navigateurs le texte apparait et l'on peut faire une recherche. Ne pas utiliser pour stocker des informations confidentielles.

Gestion des pages

Il est possible d'insérer des sauts de page ou au contraire de les éviter. Ces éléments n'ont aucun effet sur l'affichage mais sont uniquement utile pour les impressions.

Saut de page

<WRAP pagebreak></WRAP>

Bloc d'un seul tenant

<WRAP nopagebreak>Contenu à imprimer sur une même page (table par exemple)</WRAP>

Impressions

Texte sans impression

Ce texte apparait à l'écran mais ne sera pas imprimé.

<wrap noprint>Ce texte apparait à l'écran mais ne sera pas imprimé.</wrap>

Texte uniquement pour impression

Ce texte n'apparait pas à l'écran mais sera imprimé.

<wrap onlyprint>Ce texte n'apparait pas à l'écran mais sera imprimé.</wrap>

Combinaisons et inclusions de blocs

Il est possible de combiner tous les types de bloc comme le montre cet exemple :

Boite arrondie de 350px flottante à droite

texte aligné à droite.

Boite de 165px incluse à gauche, texte aligné à gauche.
Inclue un texte surligné.

Suite du texte après la boîte incluse.
Il est aligné à droite, et placé dans l'espace resté disponible

Astuce, le flux est rétabli par un clear.
Le texte reste aligné à droite.

<WRAP 165px left leftalign>
Boite de 165px incluse à gauche, texte aligné à gauche.\\
<wrap em hi>Inclue un texte surligné</wrap>.
</WRAP>

Suite du texte après la boîte incluse.\\
<wrap info>Il est aligné à droite, et placé dans l'espace resté disponible </wrap>

<WRAP clear></WRAP>

<WRAP round tip>
Astuce, le flux est rétabli par un **clear**.\\
<wrap info>Le texte reste aligné à droite.</wrap>
</WRAP>

</WRAP>

Ajouter des styles de bloc

Il est possible d'ajouter des styles de bloc en utilisant les feuilles de style personnalisées.

Il suffit d'associer au nom de classe choisi (obligatoirement en minuscules) le préfixe wrap_

Exemple

Définition d'une classe note.

classe.css
.dokuwiki div.wrap_note{ /* added */
    background-color: #eee;
    color: #000;
    padding: .5em .5em .5em .5em;
    margin-bottom: 1em;
    overflow: hidden;
}
utilisation.txt
<WRAP note>Voici ma note</WRAP>

Voici ma note

Question ?

Attention ces styles personnalisés ne sont pas rendus correctement en PDF

Consultez aussi les styles utiles créés par les utilisateurs de ce module.


Retour à Dokuwiki

wiki/logiciels/dokuwiki/wrap.txt · Dernière modification: 2019/06/02 17:47 par bruno_genere