====== Syntaxe de mise en page avancée (utilisation de Wrap) ======
Le module [[doku>plugin:wrap|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>

<WRAP column 30%>
__**Utilisation de mise en forme**__

Toutes sont supportées :
  * **Gras**
  * //Italique//
  * __Soulignage__
  * ''Code « machine à écrire »''
  * <del>Barré</del>

Et leur combinaison.

Vous pouvez aussi utiliser des blocs en ligne : 
<wrap hi>bloc important</wrap> ou <wrap lo>peu important</wrap>
</WRAP>

<WRAP column 30%>
**__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.

</WRAP>

<WRAP column 30%>
//**__Largeurs__**//

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

^type^exemple^remarque^
^''%''|''30%''|recommandé pour les thèmes adaptatifs, <wrap important>mais attention sur mobile si le bloc est seul dans la largeur il sera réduit !</wrap>|
^''px''|''420px''|Si vous avez une image de largeur fixe dans votre contenant, mais attention à la lecture sur mobile ! |
^''em''|''20em''|Si 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%**
</WRAP>

<wrap em>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.</wrap>

<WRAP clear></WRAP>

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

<WRAP col3>
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>
</WRAP>

==== Colonnes multiples (pour les mobiles) ====

=== 2 colonnes ===

<WRAP group>
<WRAP half column box>
colonne de gauche\\
  <WRAP half column box>
</WRAP>
<WRAP half column box>
colonne de droite
  <WRAP half column box>
</WRAP>
</WRAP>

<WRAP group>
<WRAP third column box>
colonne de gauche (largeur 1 tiers)
  <WRAP third column box>
</WRAP>
<WRAP twothirds column box>
colonne de droite (largeur 2 tiers)
  <WRAP twothirds column box>
</WRAP>
</WRAP>

=== 3 colonnes ===

<WRAP group>
<WRAP third column box>
colonne de gauche
  <WRAP third column box>
</WRAP>
<WRAP third column box>
colonne du milieu
  <WRAP third column box>
</WRAP>
<WRAP third column box>
colonne de droite
  <WRAP third column box>
</WRAP>
</WRAP>

=== 4 colonnes ===

<WRAP group>
<WRAP quarter column box>
colonne de gauche
  <WRAP quarter column box>
</WRAP>
<WRAP quarter column box>
colonne du milieu gauche
  <WRAP quarter column box>
</WRAP>
<WRAP quarter column box>
colonne du milieu droit
  <WRAP quarter column box>
</WRAP>
<WRAP quarter column box>
colonne de droite
  <WRAP quarter column box>
</WRAP>
</WRAP>

==== Aligner le texte dans un container ====
<WRAP col3>
Il faut utiliser l'un des mot clé suivant

  * ''leftalign''
  * ''rightalign''
  * ''centeralign''
  * ''justify''

Et cela fonctionne même en multi-colonnes :
<WRAP leftalign>
Texte aligné à gauche ...
</WRAP>

<WRAP centeralign>
Texte centré
</WRAP>

<WRAP rightalign>
... Texte aligné à droite.
</WRAP>
Voici le code correspondant :
<code>
<WRAP leftalign>
Texte aligné à gauche ...
</WRAP>

<WRAP centeralign>
Texte centré
</WRAP>

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

</WRAP>

==== Boites et Notes ====

<WRAP round box 400px left>

<code>
<WRAP round box 400px left>
</code>
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

</WRAP>
=== Notes avec icones ===

<WRAP info 30% left>
<code>
 <WRAP info 30% left></WRAP>
</code>
</WRAP>

<WRAP tip 30% left>
<code>
 <WRAP tip 30% left></WRAP>
</code>
</WRAP>

<WRAP important 30% left>
<code>
 <WRAP important 30% left></WRAP>
</code>
</WRAP>

<WRAP alert 30% left>
<code>
 <WRAP alert 30% left></WRAP>
</code>
</WRAP>

<WRAP help 30% left>
<code>
 <WRAP help 30% left></WRAP>
</code>
</WRAP>

<WRAP download 30% left>
<code>
 <WRAP download 30% left></WRAP>
</code>
</WRAP>

<WRAP todo round 50% left>
<code>
 <WRAP todo round 50% left></WRAP>
</code>
</WRAP>

<WRAP clear></WRAP>

=== Notes simples ===

La syntaxe est similaire :
<code>
<WRAP Type left 18%>Texte</WRAP>
</code>
où Type vaut l'une des valeurs suivantes.
<WRAP danger left 18%>
Type : danger
</WRAP>

<WRAP warning left 18%>
Type : warning
</WRAP>

<WRAP caution left 18%>
Type : caution
</WRAP>

<WRAP round notice left 18%>
Type : notice
</WRAP>

<WRAP round safety left 18%>
Type : safety
</WRAP>

<WRAP clear></WRAP>

<wrap tip>On a utilisé la mention round pour les deux dernières.</wrap>

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:\\
<wrap info>info</wrap>, <wrap help>help</wrap>, <wrap alert>alert</wrap>, <wrap important>important</wrap>, <wrap tip>tip</wrap>, <wrap download>download</wrap>, <wrap todo>todo</wrap> et <wrap box>box</wrap>, <wrap danger>danger</wrap>, <wrap warning>warning</wrap>, <wrap caution>caution</wrap>, <wrap notice>notice</wrap>, <wrap safety>safety</wrap>.


==== Marquer le texte ====

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

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

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

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

=== Décalage négatif ===

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

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

=== Encadrement avec passage à la ligne ===

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

  <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é : <wrap spoiler>Après la pluie vient le beau temps. (et vice versa)</wrap>

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

<wrap tip>Sélectionnez la boite pour faire apparaitre le texte.</wrap>


=== Texte caché ===

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

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

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

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

=== Texte uniquement pour impression ===

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

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

<WRAP round box 350px right rightalign>
**Boite arrondie de 350px flottante à droite**

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


<code>
<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>
</code>

===== 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//.

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

<code dokuwiki utilisation.txt>
<WRAP note>Voici ma note</WRAP>
</code>

<WRAP note>Voici ma note</WRAP>

<wrap hi>Attention ces styles personnalisés ne sont pas rendus correctement en PDF</wrap>

Consultez aussi les [[doku>plugin:wrap:extensions|styles utiles]] créés par les utilisateurs de ce module.

/*  Bas de page */

~~SNIPPET_O1777465460~~wiki:snippets:parcourir_le_site~~
<WRAP round box center centeralign 100% noprint>
===== Parcourir le site =====
/* Pages principales du site */
<nspages : -h1 -textPages="" -simpleLine -exclude>
/* Espaces collaboratifs */
[[wiki:]], [[playground:]]
/* Pôles associatif */
<nspages wiki: -subns -nopages -h1 -hideNoSubns  -simpleLine -textNS="" -exclude:snippets: -exclude:impressions: >
/* Contribuer et utiliser */
<WRAP center 60% noprint>
<nspages wiki: -h1 -simpleLine -textPages="Contribuer et utiliser" -actualTitle=4 -exclude:sommaire -exclude>
</WRAP>

</WRAP>
~~SNIPPET_C~~wiki:snippets:parcourir_le_site~~