Retour vers l'accueil de la catégorie Wiki:Plugins

Le plugin Wrap permet «d'envelopper» le texte à l'intérieur de conteneurs div ou span et de leur attribuer :

• une classe (qui peux être choisie parmi les nombreuses classes prédéfinies) ;
• une largeur ;
• une langue avec la direction du texte associée.

Il remplace potentiellement plusieurs plugins et semble dès lors une bonne alternative pour ceux-ci.

Le plugin Wrap ajoute également le bouton dans la barre d'outils de l'éditeur de texte, bouton qui permet d'accéder à une série d'outils facilitant l'introduction dans le texte de divers blocs avec la syntaxe appropriée.

L'intérieur des conteneurs div permet d'accueillir pratiquement toute la syntaxe classique de Dokuwiki.

Pour les conteneurs span, il convient de se limiter aux mises en forme de base telles gras, italique, souligné, combiné ou encore supprimé,…

<WRAP classes #id width :language>
"grand" contenu
</WRAP>

ou
<block classes #id width :language>
"grand" contenu
</block>

ou
<div classes #id width :language>
"grand" contenu
</div>

L'utilisation de <WRAP> en majuscules (ou encore <block> ou <div>) crée un conteneur div qui sera utilisé pour la mise en forme des “grands” blocs de texte.

<wrap classes #id width :language>"petit" contenu</wrap>

ou
<inline classes #id width :language>"petit" contenu</inline>

ou
<span classes #id width :language>"petit" contenu</span>

L'utilisation de <wrap> en minuscule (ou encore <inline> ou <span>) crée un conteneur span qui sera utilisé pour la mise en forme des “petits” blocs de texte, soit une portion de texte à l'intérieur d'un paragraphe, d'une liste, d'un tableau,…

Notez bien que certaines choses ne fonctionnent pas avec les conteneurs span :

• les alignements (incluant des alignements produits en changeant la direction de texte)
• les multi-colonnes
• et les largeurs

si on utilise pas conjointement un attribut “flottant” tel que column, left, right ou center.

Exemple :

Le code suivant permet d'obtenir du texte sur une colonne de 400 pixels de large sur la droite de la page grâce à l'utilisation de l'attribut right :

<wrap right notice 400px>Texte...</wrap>

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Alors que le code suivant ne fonctionne pas :

<wrap notice 400px>Texte...</wrap>

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ils fournissent principalement des boites et des notes qui peuvent remplacer celles que l'on peut obtenir avec les plugins Box et Note. Ils permettent également de centrer du texte comme on peut le faire avec le plugin Styler ou de le mettre en colonnes…

Les différentes possibilités pour les alignements de texte sont :

• Texte à gauche avec leftalign
• Texte à droite avec rightalign
• Texte centré avec centeralign
• Texte justifié avec justify

<WRAP centeralign>Texte centré...</WRAP>
<WRAP rightalign>Texte à droite...</WRAP>
<WRAP leftalign>Texte à gauche...</WRAP>
<WRAP justify>Texte justifié...</WRAP>

Ils remplacent avantageusement les notes que procurent le plugin Note !

Pour rappel, les conteneurs «en ligne» span permettent de mettre en forme une portion du texte dans le cours du paragraphe. Ils s'obtiennent avec l'utilisation de la syntaxe <wrap> en minuscule ou encore <inline> ou <span>.

<wrap info>les retours

à la ligne

ne sont pas pris en compte...</wrap>

La syntaxe <wrap info>info</wrap> donne info dans le corps du texte.

Tout comme pour les blocs <div> avec icône, on dispose des variantes info, help, alert, important, tip, download et todo.

La syntaxe <wrap danger>danger</wrap> donne danger dans le corps du texte.

Les autres variantes sont warning, caution, notice, safety, ou encore simplement box.

Même si ce n'est pas très visible, tant les <span> avec que sans icône peuvent se voir attribués l'attribut round qui permet d'obtenir des coins arrondis…

Voici par exemple un bloc warning avec les coins arrondis ou encore un bloc info avec les coins arrondis…

Par défaut les boites ou blocs simples occupent 100% de l'espace disponible en largeur. Vous pouvez modifier cette largeur en %, en px (pixel), en pt (point), en mm ou cm,… Ou encore tout autre unité valide pour les CSS (feuille de style en cascade) telle em, ex, pc (pica) ou in (inch). Vous utiliserez généralement des % pour définir la largeur des blocs. Pour plus de détail sur les unités CSS, vous pouvez consulter cette page.

Code sans la syntaxe <WRAP clear></WRAP> :

<WRAP left round box 40%>**Bloc simple flottant à gauche**</WRAP>
<WRAP right round box 40%>**Bloc simple flottant à droite**</WRAP>
Ce texte ici est petit et se glisse entre les blocs et les boites flottantes !

Ce texte ici est petit et se glisse entre les blocs et les boites flottantes ! Pour éviter ce problème, il faut insérer la syntaxe <WRAP clear></WRAP> ou la macro ~~CLEARFLOAT~~…

Correction avec <WRAP clear></WRAP> :

<WRAP left round box 40%>**Bloc simple flottant à gauche**</WRAP>
<WRAP right round box 40%>**Bloc simple flottant à droite**</WRAP>
<WRAP clear></WRAP>
Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes...

Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes…

Correction avec la macro ~~CLEARFLOAT~~ :

<WRAP left round box 40%>**Bloc simple flottant à gauche**</WRAP>
<WRAP right round box 40%>**Bloc simple flottant à droite**</WRAP>
~~CLEARFLOAT~~
Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes...

Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes…

Les colonnes de texte s'obtiennent avec l'utilisation de la classe column à laquelle on ajoute une largeur :

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

À l'intérieur des colonnes de texte, il est possible de simuler les lignes de titre avec les syntaxes suivantes :

• //**__Ligne de titre principale__**// pour une ligne de titre de 1er niveau
• //**Ligne de titre secondaire**// pour une ligne de titre de niveau inférieur

<WRAP column 50%>
//**__Ligne de titre principale__**//
Cette colonne occupe 50% de l'espace disponible...

//**Ligne de titre secondaire**//
Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ...

Le texte est simplement formaté **//en gras et en italique//** ...
</WRAP>
<WRAP clear></WRAP>

Il est possible d'utiliser des mots clés pour définir la largeur des colonnes de texte. Il en existe 3 :

• half pour 2 colonnes sur un rang
• third pour 3 colonnes
• quarter pour 4 colonnes

Et la syntaxe est simplement :

<WRAP half column>Texte...</WRAP>

Attention :

• Cette syntaxe est expérimentale et peut ne pas fonctionner comme espéré. De plus elle ne fonctionne pas avec Internet Explorer 8 et les versions antérieures.
• Il est également impératif d'utiliser <WRAP clear></WRAP> après la dernière colonne d'un rang.

Les «multi-colonnes» permettent de répartir automatiquement le texte sur plusieurs colonnes dans un bloc qui occupe toute la largeur disponible. On obtient un résultat qui ressemble à la mise en page des journaux. Un fin filet est également ajouté dans la “gouttière”, l'espace qui sépare 2 colonnes.

Attention : seuls les navigateurs modernes comme Firefox, Chrome et Safari sont capable de restituer ces mises en forme.

Il est possible de définir de 2 à 5 colonnes en utilisant col2, col3, col4 ou col5 :

<WRAP col2>Texte...</WRAP>

ou
<WRAP col3>Texte...</WRAP>

ou ...

Comme souligné dans l'introduction, le plugin Wrap n'est malheureusement pas supporté par le plugin ODT qui permet un export au format ODT, le format utilisé par le traitement de texte Writer des suites bureautique LibreOffice et Apache OpenOffice.

Comme vous pouvez le constater en réalisant un export de cette page (il suffit de cliquer sur l'icône ci-contre), tous les conteneurs <div> et <span> introduits avec la syntaxe de Wrap ne sont pas rendus avec leur mise en forme…

C'est gênant tout particulièrement pour les notes car elles sont régulièrement utilisées. Si vous souhaitez que les notes (blocs avec une icône de notification) soient correctement exportées, vous devrez plutôt utiliser celles utilisant la syntaxe du plugin Note.

Ce n'est pas vraiment un problème mais plutôt un choix délibéré de l'auteur du plugin ! Il n'est pas possible de choisir la couleur des boites/blocs simples… Elle est définie par le thème de votre site et ne peut être modifiée que par l'administrateur via les CSS (feuilles de styles en cascade).

Notez également que les couleurs de tous les autres blocs prédéfinis, avec ou sans icône, sont fixées par le plugin Wrap et ne peuvent pas être modifiées.

• Le plugin Box qui permet également de créer des boites…
• La syntaxe de Dokuwiki
• …

• La page du plugin Wrap sur le site officiel [en]
• "Examples for the Wrap Plugin" sur le site de l'auteur [en]
• La page du plugin Box sur le site officiel [en]
• …