Tags :
Le plugin Wrap permet «d'envelopper» le texte à l'intérieur de conteneurs div
ou span
et de leur attribuer\ :
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.
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é,…
~~UP~~
<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\ :
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.
~~UP~~
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\ :
leftalign
rightalign
centeralign
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.
~~UP~~
Bloc simple
Syntaxe : <WRAP center box 60%> texte </WRAP>
Bloc simple avec les coins arrondis
Syntaxe : <WRAP center round box 60%> texte </WRAP>
~~UP~~
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>
~~UP~~
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>
~~UP~~
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…
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…
~~UP~~
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>
~~UP~~
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.
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>
~~UP~~
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>
~~UP~~
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é.
~~UP~~
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…
~~UP~~
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%.
~~UP~~
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 !
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.
~~UP~~
À 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>
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.
~~UP~~
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 rangthird
pour 3 colonnesquarter
pour 4 colonnesEt la syntaxe est simplement :
<WRAP half column>Texte...</WRAP>
Attention :
<WRAP clear></WRAP>
après la dernière colonne d'un rang.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\ ?
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\ ?
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\ ?
~~UP~~
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 ...
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.
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.
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.
~~UP~~
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.
~~UP~~
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.
~~UP~~
~~UP~~
Pages dans la catégorie :