Outils pour utilisateurs

Outils du site


wiki:plugins:wrap




Wrap plugin

Description

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.

Attention !

Le plugin Wrap n'est actuellement pas supporté par le plugin ODT. Ainsi le texte mis en forme avec WRAP ne sera pas correctement rendu lors d'un export au format ODT !

Si vous souhaitez qu'une page soit correctement et intégralement exportée dans ce format, vous devrez vous diriger vers d'autres plugins tels que Box, Columns, Note ou Styler pour une mise en forme plus sophistiquée que celle permise par la syntaxe de base de dokuwiki.


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.

Les outils du plugin wrap dans la barre des outils de l'éditeur de texte

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é,…

La syntaxe

La syntaxe de base :
<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.

Les blocs <div> prédéfinis

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…

Aligner le texte

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>

Texte centré…

Texte à droite…

Texte à gauche…

Texte justifié… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ? Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Le bloc simple


Bloc simple

Syntaxe : <WRAP center box 60%> texte </WRAP>

Bloc simple avec les coins arrondis

Syntaxe : <WRAP center round box 60%> texte </WRAP>

Les blocs avec une icône de notification

Ils remplacent avantageusement les notes que procurent le plugin Note !


information

Syntaxe : <WRAP center round info 60%> texte </WRAP>

astuce

Syntaxe : <WRAP center round tip 60%> texte </WRAP>

important

Syntaxe : <WRAP center round important 60%> texte </WRAP>

alerte

Syntaxe : <WRAP center round alert 60%> texte </WRAP>

aide

Syntaxe : <WRAP center round help 60%> texte </WRAP>

téléchargement

Syntaxe : <WRAP center round download 60%> texte </WRAP>

travaux

Syntaxe : <WRAP center round todo 60%> texte </WRAP>

Les blocs sans icône de notification


danger

Syntaxe : <WRAP danger center 60%> texte </WRAP>

danger avec les coins arrondis

Syntaxe : <WRAP danger center round 60%> texte </WRAP>

avertissement

Syntaxe : <WRAP warning center round 60%> texte </WRAP>

prudence

Syntaxe : <WRAP caution center round 60%> texte </WRAP>

avis

Syntaxe : <WRAP notice center round 60%> texte </WRAP>

sécurité

Syntaxe : <WRAP safety center round 60%> texte </WRAP>

Les blocs <span> prédéfinis

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

Les retours à la ligne introduits dans le texte (et sa mise en forme) à l'intérieur des balises <wrap></wrap> ne sera pas pris en compte :!:

Exemple de code :

<wrap info>les retours

à la ligne

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

Résultat : les retours à la ligne ne sont pas pris en compte…

Les span avec icônes :

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.

Les span sans icônes :

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.

Les span avec les coins arrondis :

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

Définir la largeur

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.

Syntaxe : <WRAP center round box> texte </WRAP>

Syntaxe : <WRAP center round box 60%> texte </WRAP>

<WRAP center round box 40%> texte </WRAP>

Syntaxe : <WRAP center round box 600px> texte </WRAP>

Syntaxe : <WRAP center round box 400pt> texte </WRAP>

<WRAP center round box 100mm> texte </WRAP>

<WRAP center round box 10cm> texte </WRAP>

Problème de largeur maximale


Attention !

Ne pas utiliser la valeur de 90% (ou plus) pour les blocs car ils risquent de sortir de l'espace imparti par le thème de votre site !

Pour les blocs avec une icône, la largeur par défaut qui occupe 100% de l'espace disponible, correspond à une valeur explicite de +/- 90% !

Pour les blocs simples, la largeur par défaut qui occupe 100% de l'espace disponible, correspond à une valeur explicite de +/- 97%…

Il semble dès lors conseillé de ne pas utiliser de valeur supérieure à 80% pour les différents blocs.
Si vous souhaitez obtenir un bloc qui occupe toute la largeur disponible, il suffit de ne pas indiquer la largeur du bloc et celui-ci occupera automatiquement tout l'espace disponible.

Blocs simples :

Un bloc simple dont la valeur de la largeur n'est pas définie
Il occupe 100% de l'espace disponible.

Syntaxe : <WRAP center round box> texte </WRAP>

Un bloc simple dont la valeur de la largeur est définie à 97%
Il occupe +/-100% de l'espace disponible !

Syntaxe : <WRAP center round box 97%> texte </WRAP>

Un bloc simple dont la valeur de la largeur est définie à 100% !!!
Il occupe plus de 100% de l'espace disponible et il déborde de l'espace imparti par le thème :!:

Syntaxe : <WRAP center round box 100%> texte </WRAP>

Blocs avec une icône :

Un bloc avec une icône dont la valeur de la largeur n'est pas définie
Il occupe 100% de l'espace disponible.

Syntaxe : <WRAP center round info> texte </WRAP>

Un bloc avec une icône dont la valeur de la largeur est définie à 90%
Il occupe +/-100% de l'espace disponible !

Syntaxe : <WRAP center round info 90%> texte </WRAP>

Un bloc avec une icône dont la valeur de la largeur est définie à 95% !!!
Il occupe plus de 100% de l'espace disponible et il déborde de l'espace imparti par le thème :!:

Syntaxe : <WRAP center round info 95%> texte </WRAP>

Les blocs "flottants"


Bloc simple flottant à gauche Syntaxe : <WRAP left round box 40%> texte </WRAP>

Bloc simple flottant à droite Syntaxe : <WRAP right round box 40%> texte </WRAP>


ATTENTION :

Le plugin Wrap permet la syntaxe <WRAP clear></WRAP> et il est vivement conseillé d'insérer ce code après le dernier bloc flottant sans quoi on peut avoir des surprises avec du texte qui s'insère entre les blocs alors que l'on souhaite redémarrer un nouveau paragraphe sous les blocs !

On peut également utiliser le plugin Clearfloat qui ajoute la macro ~~CLEARFLOAT~~ (ou ~~CL~~ en abrégé).

Tout comme la syntaxe <WRAP clear></WRAP>, cette macro permettra de retrouver un comportement normal pour les différents éléments de la page en supprimant le caractère “flottant” de ceux-ci.

On peut utiliser indifféremment l'une ou l'autre syntaxe, à condition bien entendu que le plugin Clearfloat soit également installé.

Démonstration du problème

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 !

Bloc simple flottant à gauche

Bloc simple flottant à droite

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

Bloc simple flottant à gauche

Bloc simple flottant à droite

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

Bloc simple flottant à gauche

Bloc simple flottant à droite

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

Les colonnes de texte

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

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

La première colonne occupe 30% de l'espace disponible…

La deuxième colonne occupe également 30% de l'espace disponible…

La troisième colonne occupe toujours 30% de l'espace disponible !…


Tout comme pour les blocs flottants, il convient d'insérer le code <WRAP clear></WRAP> (ou la macro ~~CLEARFLOAT~~) après la dernière colonne sans quoi on peut avoir des surprises avec du texte qui s'installe dans “une colonne supplémentaire” alors qu'on souhaitait redémarrer à la ligne !

Attention !

Ne pas utiliser une valeur totale supérieure à +/- 90% pour la largeur totale attribuée à l'ensemble des colonnes que vous souhaitez faire tenir côte à côte.

Cette valeur maximale dépend du nombre de colonnes mais aussi de la résolution en largeur du navigateur client !
Il convient dès lors de vérifier mais la valeur totale de 90% ne posera généralement pas de problème avec 2 ou 3 colonnes. Pour 4 colonnes, il faut réduire la valeur totale à +/- 85%.

Exemple avec 3 colonnes trop larges :

La première colonne occupe 30% de l'espace disponible…

La deuxième colonne occupe également 30% de l'espace disponible…

La troisième colonne occupe cette fois 40% de l'espace disponible :!:
Même si le total est n'est “que” de 100%, cette troisième colonne ne tient pas dans l'espace imparti… C'est qu'il faut compter avec l'espace entre les colonnes !

Exemple avec 4 colonnes :

La première colonne occupe 21% de l'espace disponible…

La deuxième colonne occupe 21% de l'espace disponible…

La troisième colonne occupe 21% de l'espace disponible…

La quatrième colonne occupe 21% de l'espace disponible…


Vous pouvez définir la 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 colonnes, voire aussi des px (pixel) pour les colonnes avec une largeur fixe, pour des images par exemple. Pour plus de détail sur les unités CSS, vous pouvez consulter cette page.

Émulation des lignes de titre

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

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, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Le texte est simplement formaté en gras et en italique en utilisant cette syntaxe :
**//en gras et en italique//**

:!: L'ordre dans lequel on applique les attributs gras, italique et souligné est important.


L'émulation des lignes de titre s'applique aussi à toutes les <div> prédéfinies comme les boîtes et notes avec ou sans icône de notification.

Taille automatique

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.
Exemple avec half :

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Exemple avec third :

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Exemple avec quarter :

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ?

Multi-Colonnes

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 ...
Exemple avec col2 :

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ? Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Exemple avec col3 :

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ? Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Exemple avec col4 :

Texte… Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret ? Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

Problèmes connus

Incompatibilité avec le plugin ODT

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.

Exporter la page en format Open Document

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.

Choix de la couleur des blocs simples impossible

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.


Une boite simple “classique”

Syntaxe de cette boite : <WRAP left round box 40% > texte </WRAP>

Une boite simple avec un code de couleur !

Syntaxe de cette boite : <WRAP right round box 40% #557799> texte </WRAP>

Le code de couleur reste sans effet…

Si vous souhaitez personnaliser la couleur d'une boite, vous pouvez utiliser le plugin Box.

Liens

Liens externes

wiki/plugins/wrap.txt · Dernière modification: 2018/04/24 21:49 (modification externe)