Wrap Plugin

---- plugin ----
description: Universal plugin which combines the functionality of many other plugins. Wrap wiki text inside containers (divs or spans) and give them a class (choose from a variety of preset classes), a width and/or a language with its associated text direction.
author     : Anika Henke
email      :
type       : syntax, action, helper
lastupdate : 2018-04-22
compatible : Anteater, Rincewind, Angua, Adora Belle, Weatherwax, Binky, Ponder Stibbons, Hrun, Detritus, Elenor Of Tsort, Frusterick Manners, Greebo, Hogfather
depends    : 
conflicts  : 
similar    : bootnote, bootswrapper, box, button, class, clearfloat, color, columns, comment, commentsrc, div_span_shorthand, divalign, divalign2, emphasis, fontcolor, fontfamily, fontsize, fontsize2, hide, highlight, htmlcomment, important_paragraf, importanttext, lang, layout, ltr, noprint, note, outdent, pagebreak, pagebreak, side_note, spoiler, styler, tab, tablewidth, tip, typography, wpre, admnote
tags       : anchor, annotations, bookmark, boxes, columns, formatting, hide, highlight, icons, language, printing, style, tabs, typography, instructions

bugtracker :
sourcerepo :

This plugin gives you the ability to wrap wiki text inside containers (divs or spans) and give them

  1. a certain class (with loads of useful preset classes)
  2. a width
  3. a language with its associated text direction

It potentially replaces a lot of other plugins and is IMHO the better alternative for many.

It fully replaces: class, clearfloat, div_span_shorthand, divalign2, divalign, emphasis, hide, important_paragraf, importanttext, lang, ltr, noprint, pagebreak, side_note, tip, wpre

It partly replaces: box, button, color, columns, fontcolor, fontfamily, fontsize2, fontsize, highlight, layout, note, styler, tab, tablewidth, typography

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Basic Syntax:

<WRAP classes #id width :language>
"big" content

<block classes #id width :language>
"big" content

<div classes #id width :language>
"big" content

An uppercase <WRAP> (or alternatively <block> or <div>) creates a div and should be used for “big” containers, surrounding paragraphs, lists, tables, etc.

<wrap classes #id width :language>"small" content</wrap>

<inline classes #id width :language>"small" content</inline>

<span classes #id width :language>"small" content</span>

A lowercase <wrap> (or alternatively <inline> or <span>) creates a span and should be used for “small” containers, inside paragraphs, lists, tables, etc.

Since version 2013-06-13 there is also a shorthand syntax (for wraps without content):

<WRAP classes #id /> or <block classes #id /> or <div classes #id />


<wrap classes #id /> or <inline classes #id /> or <span classes #id />

:!: Please note, some things won't work with spans: alignments (including alignments generated by changing the text direction), multi-columns and widths if the according wrap isn't floated as well.

The plugin comes with an example page, which should explain a lot and looks like this in the default template (see below).

The following classes are currently available:

class name description/notes
columns – similar to columns, side_note, styler, tip
column same as left in LTR languages and same as right in RTL languages
left same as column, will let you float your container on the left
right will let the container float right
center will position the container in the horizontal center of the page
col2..col5 will show the text in multiple columns determined by their amount (2, 3, 4 or 5), only works in modern browsers (no IE9 and below)
colsmall, colmedium, collarge will also show the text in multiple columns but determined by their width (small, medium or large), only works in modern browsers (no IE9 and below)
widths:!: experimental, might not work as expected, includes mobile support
half fits two columns in a row, should be used in pairs
third fits three or two columns in a row, should be used in triplets or together with twothirds
twothirds fits two columns in a row when used together with third, one 1/3 wide and another 2/3 wide
quarter fits four columns in a row, should be used in quads
alignments – similar to divalign, columns, styler:!: don't work with spans!
leftalign aligns text on the left
rightalign aligns text on the right
centeralign centers the text
justify justifies the text
boxes and notes – similar to box, note, tip
box creates a box around the container (uses colours from style.ini)
info (was information in first version) creates a blue box with an info icon
important creates an orange box with an important icon
alert (:!: was warning in previous versions) creates a red box with an alert icon
tip creates a yellow box with a tip icon
help creates a violet box with a help icon
todo creates a cyan box with an todo icon
download creates a green box with a download icon
round adds rounded corners to any container with a background colour or a border (only works in modern browsers, i.e. no IE)
danger creates a red danger safety note
warning creates an orange warning safety note
caution creates a yellow caution safety note
notice creates a blue notice safety note
safety creates a green safety note
marks – similar to emphasis, important_paragraf, importanttext
hi marks text as highlighted
lo marks text as less significant
em marks text as especially emphasised
clear similar to clearfloat, should preferably be used with divs, i.e. uppercase <WRAP>s
tabs if wrapped around a list of links, will show those as tabs
hide hides the text per CSS (the text will still appear in the source code, in non-modern browsers and is searchable)
noprint displays text on the screen, but not in print, similar to noprint
onlyprint displays text only in print, but not on the screen
pagebreak forces a new page in printouts (not visible on the screen), similar to pagebreak
nopagebreak tries to avoid a pagebreak in printouts (not visible on the screen)
spoiler shows white text on a white background, only to be revealed by highlighting it; similar to hide
button when wrapped around a link, styles it like a button
tablewidth sets widths of tables inside to whichever width the wrap gets, partly replaces tablewidth
indent indents the text, could be used instead of tab
outdent “outdents” the text, could partly be used instead of outdent
prewrap wraps text inside pre-formatted code blocks, similar to wpre

Known restrictions

  • WRAPs export to ODT format but not everything works 100%
  • Round corners only work in modern browsers (no IE8 and below).
  • Multiple columns only work in modern browsers (no IE9 and below).
  • Width classes are experimental and only work in modern browsers (no IE8 and below).
  • Normal DokuWiki Headlines used to not work and a work-around was added. Now that headlines do work, the work-around is not needed anymore but kept for backwards-compatibility. It was deprecated in version 2018-04-22 and disabled by default. They can be enabled by using the emulatedHeadlines config option. The following syntax would then produce two different kinds of emulated headlines inside any wrap:
    • //**__Big Underlined Headline__**// (They will look a bit different in safety notes.)
    • //**Small Headline**//
  • do not include within a WRAP noprint block

You might need to adjust a few of the classes to your template's needs, especially hi, lo and em. If you have a dark or otherwise heavily coloured theme, please use the darkTpl config option.

The classes are easily adjustable and extensible. Any wishes are welcome.

You can set any valid widths on any uppercase <WRAP> container: %, px, em, rem, ex, ch, vw, vh, pt, pc, cm, mm, in. Just set the width before or after or with the classes, e.g.

<WRAP someclass 50% anotherclass>...

All except percentages will be reduced to have the maximum width available on smaller screens.

You can also use the width keywords half, third, twothirds and quarter. To work correctly they need another wrap around them. E.g.

<WRAP group>
  <WRAP half column>...</WRAP>
  <WRAP half column>...</WRAP>

will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices.

To define an anchor, the following syntax applies:

<wrap #ankername />

The anchor is accessible via: #ankername

You can change the language and the direction of a container by simply adding a colon followed by the language code, like this:

<wrap :en>This text is explicitly marked as English.</wrap>

The text direction (rtl, right to left or ltr, left to right) will get inserted automatically and is solely dependent on the language. The list of currently supported languages is taken from:

If you like to mark a text with a different text direction than the default one, you should use divs, i.e. uppercase <WRAP>s. Otherwise the text alignment won't change as well.

This makes it a better replacement of ltr (and lang).

You can see a demo of the plugin on

“Examples” (demo) in Russian (for v2011-05-15). Source.

Option Description Default value
noPrefix Which (comma separated) class names should be excluded from being prefixed with “wrap_” (* and ? wildcards allowed) tabs, group
restrictedClasses Restrict usage of plugin to these (comma separated) classes (* and ? wildcards allowed) (empty)
restrictionType Restriction type, specifies if classes above shall be included or excluded 0
syntaxDiv Which syntax should be used in the toolbar picker for block wraps? WRAP (other choices: div, block)
syntaxSpan Which syntax should be used in the toolbar picker for inline wraps? wrap (other choices: span, inline)
darkTpl Optimise colours for dark templates? 0
emulatedHeadlines Use emulated headings? (deprecated) 0

FIXME There have been more updates to the Wrap as well as the ODT plugin, so more stuff works. The below should be updated with what works and what doesn't.

Since version 2015-06-13 the Wrap plugin supports exporting most of its functionality/styling to ODT when using at least version 2015-06-29 of the ODT Plugin. By default, Wrap syntax will be exported to ODT using 'print' CSS styles. This means the exported Wrap elements will look the same when printing a wiki page. If you want to have the ODT exported Wrap elements look like displayed in the browser (i.e. with 'screen' CSS styles), then use the following ODT plugin configuration settings:

  • add wrap to the 'usestyles' config setting
  • set the 'media_sel' setting to 'screen'

If you prefer a user defined CSS style for the Wrap ODT export, then simply place a file 'odt.css' into the Wrap plugin folder with your own CSS code (and set config setting 'media_sel' to 'print').

Here is what is currently not supported:

  • columns: left/right/center/column is partly supported; they are positioned correctly, but content is not floating around them
  • widths are not supported except % and half/third/quarter
  • boxes and notes: hardly any formatting inside them is supported, therefore emulated headings also don't work
  • tabs will just show a list of links
  • noprint
  • nopagebreak
  • onlyprint only works on boxes
  • languages are set correctly but do not seem to affect text alignment
  • shorthand syntax
  • Not supported because not relevant in ODT: clear, prewrap

The wrap picker in the editing toolbar adds the most common wrap syntaxes.

  • “columns” creates a set of half columns
  • “simple centered box” creates a standard box (60% wide, centered)
  • “info, tip, important, alert, help, download, todo box” creates specifically themed boxes (also 60% wide, centered)
  • “clear floats” creates a <WRAP clear/>
  • “especially emphasised, highlighted, less significant” creates the respective marks

If you like to add your own classes and styles to the plugin, you can simply add the styles for your class preceded by “wrap_” to your user styles. Please note, any classes need to be lower case.

E.g. if you need a <WRAP myclass>, you edit (or create if it doesn't exist) your conf/userstyle.css and add your .wrap_myclass{} with its style definitions to it. (If necessary, edit conf/userprint.css1) for the print view, conf/userrtl.css2) for RTL languages and conf/userall.css3) for all styles as well.)

User permissions for every file used must be similar to original DokuWiki files.

Since version 2010-03-14 you have the possibility to exclude certain class names from being prefixed with “wrap_”. Just add a comma separated list of class names into the config option “noPrefix” in the configuration manager.

in style.css

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

call in DW-page:

<WRAP note>...</WRAP>

Here are some useful Wrap extensions created by users of this plugin.

The old typography classes were removed in version 2011-05-15. If you need something similar, use the Block plugin instead. Or you can use your own and copy them to your own user styles (see above).

From version 2011-05-15 on the plugin includes a helper plugin which you can use to add classes, width and lang/dir to any other plugin.

// get lang from wrap helper plugin
$lang = '';
if(!plugin_isdisabled('wrap')) {
    $wrap = plugin_load('helper', 'wrap');
    $attr = $wrap->getAttributes($data);
    if($attr['dir']) $lang = ' lang="'.$attr['lang'].'" xml:lang="'.$attr['lang'].'" dir="'.$attr['dir'].'"';
// add lang to your plugin's output
$renderer->doc .= '<span '.$lang.' class="foo">';

getAttributes() expects the string with “classes #id width :language”. It returns an array with

  • $attr['class']: CSS class(es)
  • $attr['id']: CSS ID
  • $attr['width']: width
  • $attr['lang'] and $attr['dir']: language and text direction
// get attributes from wrap helper plugin
$attr = '';
if(!plugin_isdisabled('wrap')) {
    $wrap = plugin_load('helper', 'wrap');
    $attr = $wrap->buildAttributes($data, 'additionalClass');
// add those attributes to your plugin's output
$renderer->doc .= '<div '.$attr.'">';

buildAttributes() expects the same string as above (“classes #id width :language”) and an optional string for additional classes, in case your plugin has CSS classes of its own which it needs to reuse. It returns a string with all the attributes prepared for HTML.

You can help me with translations and update the language files. There are two files to translate:

Before reporting any issues (bugs or requests), please first take a look at the FAQ on plugin problems.

You can report any issues either on the Issue Tracker or on the separate discussion page.

Not understand how works “tabs”, I create the tabs but how I add the content of the tabs ? If I click on a tab redirect me to page that not exist. — adrianvesa 2016-03-30 19:58

Example how to add new button into the picker: DokuWiki wrap plugin prewrap patch
This patch adds button for <WRAP prewrap> code. — DenisVS 2017-07-11 14:38

Is it possible to edit the selection in the 'Toolbar Picker' I would like to add something. — stud_med 2021-01-19 19:42


Wrap Plugin Discussion

Discussion page for the Wrap plugin

Please start new requests with a new heading.

I'm struggling to understand which css file I should update to change the style of the boxes/admonitions when exporting the PDF via the DW2PDF plugin.

The userall.css file in the /conf/ folder updates my wrap boxes fine in the wiki, but does not affect the PDF export.

I've discovered that I can update them in the PDF by editing the style.less in the /plugins/wrap/ folder but surely this would be overridden if I update the wrap plugin?

Note for others following in the same footsteps: Make sure you disable the DW2PDF cache option in admin configuration too - will save you a lot of headache :)

Is there a way, that the Text e.g. TIP: or WARNING: etc. for the Notes-Boxes could automatically inserted next to his Icon in the corresponding language? — Roland Gantenbein 2018/11/23 14:11

While I understand the appeal to making tables 100% wide within wraps (it makes it possible to adjust the size of tables by adjusting their containing WRAPs), this is not always a desired outcome. For example, when using WRAP simply to allow tables within an ordered list, this forces a table to 100% size rather than a dynamic sizing.

This might be accomplished by a special CSS class that makes 100% wide tables only when that class is applied. Unfortuntately, that would probably break a lot of existing use cases… so I'm sure there's a better way (maybe if the opposite can be done somehow?)

– pv2b 2017-10-20

Yeah, I think that makes sense. Initially I planned to only have 100% wide tables in columns but made them 100% in every single wrap (probably out of laziness, I can't remember). I have just made a change that makes changing table widths optional by adding a new 'tablewidth' class. That will be in the next release. — Anika Henke 2018-04-04 01:47

I enjoy the ability of this plugin to create different types of notes with an associated color and icon. I also use them a lot applied to texts with spans. I would like to request a new type of note: a “sucess” note. I propose that its color should be green (just like the “download” note) and the associated icon a “tick” (“correct answer”) icon.

Thank you, Anika, for considering this request and congratulations for making such a cool and useful plugin! — Branmabon 2017/03/23 14:08

I've just made the CSS work properly with some custom themes using the git master branch, eg one of my own and typo. the trick is to remove all the .dokuwiki in the different classes with a

perl -pi -e 's/\.dokuwiki//g' *.css

Nicolas Thauvin 2009/09/09 23:22

Templates should use the .dokuwiki class and many already do (as does the typo template). See more on the dokuwiki class. — Anika Henke 2009/09/18 00:37

Wouldn't it be nice to add quotation box, too …
- chris

Yes, I thought about that, too. But as the blockquote plugin would be semantically much more correct, I recommend using that instead. — Anika Henke 2009/09/18 00:37

Incredibly useful multipurpose plugin I must say. Thanks for that“ Looking forward to intended ODT compatibility.
Martin 2009/09/14 23:22

This plugin makes the data more standard format and extend the lifespan, in the same time don't lose the flexibility (custom CSS), thank you. — treegb 2016-10-10 21:02.

<WRAP centeralign>

<WRAP info 60%>

This is some text, text , text , text , text , text , text , text , text , text , text , text , text , text , text , text ,
text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , text , text


The result is the text of the info note is centered. If I use leftalign it aligns the whole box left. How do I get the box text to be left aligned and screen centered? peterennis [at] yahoo [dot] com

To position something you shouldn't use an alignment class, but one of the column classes. In this case it's “center” instead of “centeralign”. (And whenever you use “center” you should also give a width.) If you only want the info box to be centred, you can use <WRAP center info 60%>, and the image could be centred by using the normal DokuWiki syntax. — Anika Henke 2009/10/07 07:47

Like using tab-plugin in some places (perhaps tables)

I sometimes need space above or below a paragraph. Fed up fiddling with HTML, PHP methods so I just use . (dot)
Of course, it shows a dot! Is there an easy solution? peterennis [at] yahoo [dot] com
The best way would be to add your own classes. In this case you could use something like ”topspace“ and ”bottomspace“ and add
.dokuwiki .wrap_topspace { margin-top: 1.5em; }
.dokuwiki .wrap_bottomspace { margin-bottom: 1.5em; }

etc. But this depends highly on your template and in which combination you will use those classes. Just fiddle around with the values to change their effect. (And from the semantic point of view you should probably ask yourself why and if you need that space and find a better name if you find a common usage pattern.) — Anika Henke 2009/10/07 08:05

I think too it depent on your template and the combination of classes. Testing with following code I could find something working for me.

css try differend combinations of height, margin, padding and line-height. The colors are only to see the effect. (%, px, em, ex, pt, pc, cm, mm, in):

div.wrap_testing { width: 100%;                                        border: 2px solid yellow; }
div.wrap_empty1  { width: 100%; height: 2em;                           border: 2px solid red; }
div.wrap_empty2  { width: 100%; margin-top: 2em; margin-bottom: 2em;   border: 2px solid violet; }
div.wrap_empty3  { width: 100%; padding-top: 2em; padding-bottom: 2em; border: 2px solid blue; }
div.wrap_empty4  { width: 100%; line-height: 2em;                      border: 2px solid green;  }


<div testing>  <div empty1></div>  </div>
<div testing>  <div empty2></div>  </div>
<div testing>  <div empty3></div>  </div>
<div testing>  <div empty4></div>  </div>

Love this plugin, but the CSS on my page seems to fail CSS3 validity check as a result.

1  	 .dokuwiki div.wrap_round  	 Property -moz-border-radius doesn't exist :  20px
1 	.dokuwiki div.wrap_round 	Property -webkit-border-radius doesn't exist : 20px
1 	.dokuwiki div.wrap_round 	Property -khtml-border-radius doesn't exist : 20px
1 	.dokuwiki span.wrap_round 	Property -moz-border-radius doesn't exist : 2px
1 	.dokuwiki span.wrap_round 	Property -webkit-border-radius doesn't exist : 2px
1 	.dokuwiki span.wrap_round 	Property -khtml-border-radius doesn't exist : 2px 

I'm no CSS expert. Anybody have any suggestions? — michaelrepucci 2009/11/06 22:08

Actually, did some web searches and discovered that since these properties are proprietary, they're not considered part of “valid” CSS, even though they do follow standards. Oh well. When CSS3 is adopted, “border-radius” will replace the proprietary properties and validate. Until then, guess I'll live with it. I'll leave this note here for others who are curious like me. Anyway, nice to have rounded corners :) — michaelrepucci 2009/11/06 22:32

is there any way to skip the generation of the wrap_ “namespace” I'd like to use this for providing a (hidden) geotag on the page like this:

<WRAP hide geo geo-post>  
    <wrap latitude>52.085819</wrap><wrap longitude>5.115348</wrap>

right now that results in:

<div class="wrap_hide wrap_geo wrap_geo-post">  
    <span class="wrap_latitude">52.085819</span><span class="wrap_longitude">5.115348</span>

where I would want:

<div class="wrap_hide geo geo-post"> 
    <span class="latitude">52.085819</span><span class="longitude">5.115348</span>
I wouldn't want to skip the “wrap_” altogether. But it might be a good idea to add a config option for listing all class names which should not be adjusted but taken directly as specified. Then everybody is free to also add other microformat classes and more. I'll implement that as soon as I find the time. — Anika Henke 2010/01/07 01:52
I just implemented this (in the repo). A new release which includes it will follow soon. — Anika Henke 2010/01/31 15:36
                case DOKU_LEXER_ENTER:
                    $wrap = new syntax_plugin_wrap_base();
                    $attr = $wrap->buildAttributes($data);

                    $renderer->doc .= '<div'.$attr.'><p>';

The div version of the plugin merges the first two paragraphs into one. The workaround is to leave a line break immediately after the opening

tag. The above code modification will fix this issue. This issue (and fix) is also present in the box plugin.

As described under known restrictions you can circumvent this by writing one more line after <WRAP> (see the very first syntax example). You solution will not fix this problem but will only cause more invalid code in other cases! This whole issue is due to a bug in the DokuWiki core: See 1797. And it annoys me as well. ;-)Anika Henke 2010/01/15 09:43
This will be fixed in the next version (coming soon) if used with Anteater. — ach 2010/11/20 17:22

Are you planning support for regular dokuwiki headlines syntax? Plugin columns have it, so where is the problem? Thanks.

The columns plugin supports regular headlines, because it re-builds all headlines within its syntax completely from scratch. DokuWiki itself doesn't support headlines in any syntax and it's not possible to support them without such massive overhead. As the “emulated headlines” cover most desirable cases, I don't think I will implement anything which should rather be fixed in the DokuWiki core than patched in a plugin. — Anika Henke 2011/05/02 20:16
The latest version (2011-05-15) now has experimental support for regular headlines implemented. This is not an official feature yet, because there might be unforeseen problems (most likely with section editing). You are free to try it out and please report any problems back. — Anika Henke 2011/05/15 18:12

Is there a way to make the emulated headlines contain “a name=…” anchors, similar to how the regular headlines have such anchors?

No, this is currently not possible and is also not planned. As a work-around you can use the bookmark plugin. — Anika Henke 2010/01/31 15:34
I now implemented experimental support for regular headlines, so those will contain the anchors and will also be added to the TOC. — Anika Henke 2011/05/15 18:12

I've been using a few lines in conf/entities.conf and a template to easily make invisible tables with visible content. I use this to structure math proofs, so relevant parts of equations stay above each other. Is this something you could incorporate in your great plugin?

<bare> <html><div class="baretable"></html>
</bare> <html></div></html >
div.dokuwiki div.baretable th,
div.dokuwiki div.baretable td { border: 0px; }
It's quite easy to implement it yourself by adding your own class, with e.g.
div.dokuwiki div.wrap_baretable table,
div.dokuwiki div.wrap_baretable th,
div.dokuwiki div.wrap_baretable td { border: 0; }

you can use

<WRAP baretable>

Anika Henke 2011/05/02 20:48

Also check out the jsmath plugin.

Anika, sorry for spamming, just wanted to show my appreciation for the work you've done. -Alex.

I second that! -Tina

Me too. Fantastic addition to Dokuwiki. -Brett

Hello Anika, I would like to thank you too for your wonderful work. I use all of your plugins a lot :-) -Hartmut.

One of my favorite plugins and imo one of the most usefull ever!
Thank you very much,
Thomas 2014-06-04 15:00

I just fixed that issue in the repo. (But it's not always working in IE6.) The same issue would occur whenever you float something inside a box with a background colour (or a border), e.g. a right-aligned image in a <WRAP box>. If you don't want to install the adjusted plugin, you can also just put a <WRAP clear></WRAP> before the containing closing ”</WRAP>“, like
<WRAP clear></WRAP>

Anika Henke 2010/06/12 22:20

thats works


I want to use several of the functions as the admin of my wiki (like columns), but I would like my users to only be able to insert the info/important boxes into the pages. Is it possible to hide the editor button, or to hide some of them? I wouldn't mind being able to hide all of the buttons and just telling my users what syntax to type in.

You cat manually edit action.php or simply delete it - all buttons described there. Malamut
To edit Textlabels of the editor buttons: /plugins/wrap/lang/en/lang.php

It's a great plugin, but why uppercase for WRAP? All other Doku syntax and plugins use lovercase or case insensitive. May be replace wrap with “textwrap” and WRAP with “boxwrap”? It's more clear, as I think. Malamut 09.10.2010

UPD: It will be really great if you add two options to plugin configuration: words for div's and span's. I prefer to use box and text for it and now I simply modify wrap plugin's source to implement it, but it's not a good solution.

I have modified WRAP for my use. Download here:

The initial reasoning was to make it similar to DokuWiki's core html and php embedding (<html|HTML> and <php|PHP>).
Adding anything to the configuration options is a bad idea, as it would make the syntax different in every installation and could potentially break many things (other plugins, for example). (Although it would be beneficial for internationalization.)
I updated the code to use <block> and <div> additionally to <WRAP> and <inline> and <span> additionally to <wrap>. (Using <box> would conflict with the box plugin which is quite popular.) It will be in the next release (coming soon). — ach 2010/11/20 17:03

Some PNGs are not present in the picker. In folder images/note/16 “tb_” should be deleted in the filenames.

There are no and have never been any images with “tb_”. Could it be someone (e.g. from your team?) renamed them deliberately to remove them from the picker? — ach 2010/11/20 17:00

:!: 20/01/2011 : This plugin doesn't produce anything, either on this page or on my installation with the very latest Dokuwiki version.

This plugin is not installed on, so wouldn't work on this page. Did you have a look at the FAQ on plugin problems?
Thanks for your answer. Well, I tried what's suggested over there, installing through the manager, various methods to force a page refresh, etc, still nogo. Not sure if there is a way to debug or log the failure ?
Hmm, this is weird, especially since the plugin is a really simple one. You could start by defining what “doesn't produce anything” means? E.g. if you write <WRAP tip>test</WRAP> what do you see?
a) ”<WRAP tip>test</WRAP>“
b) “test” (unstyled)
c) nothing at all
Don´t forget to set the class! In this case


— Peter

It worked when I deleted the contents of <dokuwiki>/data/cache/ ,I think it's the solution –Zhe
23/10/2012 : I had the same problem with Adora Belle and clear the cache too, then it worked. –Pierre

It would be nice if there could be a shorter code for empty divs like

Good idea. But this has not a very high priority for me. If someone sends a patch, I will implement it. — Anika Henke 2011/05/02 20:50
To better keep track of things, I just added this request to the bugtracker. — Anika Henke 2011/05/29 13:44

The following CSS statement leads to different behaviour between firefox and internet explorer:

/* tables in columns and boxes should span the whole width */
.dokuwiki .plugin_wrap table {
    width: 100%;

If you create boxes like this one:

<WRAP column>
^Column 1 Row 1 |Column 2 Row 1  | 
^Column 1 Row 2 |Column 2 Row 2  | 
^Column 1 Row 3 |Column 2 Row 3  | 
^Column 1 Row 4 |Column 2 Row 4  | 
^Column 1 Row 5 |Column 2 Row 5  | 

firefox will display a box as large as needed by the content of the box. Internet explorer (tested with version 7) displays a box with 100% page width.

IMHO table width: 100% is only needed if a fixed size is given. May a class wrap_fixsize should be added to wraps that include size information.

/* tables in columns and boxes should span the whole width */
.dokuwiki .plugin_wrap .wrap_fixsize table {
    width: 100%;

and modified helper.php

            //get width
            if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|pc|cm|mm|in)$/', $token)) {
                $attr['width'] = $token;
                $attr['class'] = (isset($attr['class']) ? $attr['class'].' ' : '')."wrap_fixsize";


I couldn't reproduce this in any IE (tested in IE9, IE8 and IE7). The width in IE7 is much bigger, but not 100% of the page. Maybe it depends on additional styling in your template? I would also only use <WRAP column> together with a width as it makes less sense to use it otherwise. — Anika Henke 2012/08/19 11:36

A quick modification to be able to add an ID to a box (I use it to make empty

that are processed by javascript).

In helpher.php#getAttributes

            //get id
            if (preg_match('/#([A-Za-z0-9_-]+)/', $token)) {
                $attr['id'] = trim($token,'#');

In helper.php#buildAttributes

            if($attr['id']) $out .= ' id="'.hsc($attr['id']).'"';

And then you can use


Thanks for this. I just implemented it, so it will be part of the next release. — Anika Henke 2012/08/19 12:58

Your's is ALWAYS the first plugin I install on a fresh DokuWiki system. Thank you SO MUCH Anika. This is a true jewel.


This is a wonderful plugin. The icing on the cake would be ODT support. Is that a possible future enhancement or is it a bridge too far?

- Lar

ODT export is partly supported since June 2015. There is better support on the way (to be released soon), although a minority of wrap classes are still not supported. — Anika Henke 2018-03-30 21:29

Great plug-in, but default template doesn't display it correctly. Was able to view via Safari on iPad, but not in OSX in any browser. Changed to “vector” template and all is well. -Bruce

I am not aware of any issues with the default template. This will most likely have been due to caching issues and was otherwise working fine. — Anika Henke 2012/08/19 12:17

Hi, is there any possibility to print out the boxes and notes including the icon, which is shown on the screen? I use the vector template. When I open the print preview in this template, everything is ok. When using the print preview of firefox or when printing, the icons are not printed out. - Juergen Schuemmer

This is basically not fixable. See my reply to this issue in the issue tracker for a more exhaustive explanation. — Anika Henke 2012/08/19 12:20

I've created a new style that converts a simple <ul> list into beautiful tabs. It works great. I use it all the time on my wiki so I decided to share it with you. It's designed to play nicely with the new DokuWiki template. Hope you'll like it :)
And thank you Anika for this wonderful plugin ! — Laynee 2012/05/07 17:48

<WRAP tabs>
  * [[Features]]
  * [[Manual]]
  * [[Plugins]]
  * [[Template]]


First tab is a non existing link, second is the current page, third is an existing link and fourth is an existing link hovered.

Add it to your conf/userstyle.css.

/** New Tabs style for the Wrap Plugin
 * Original tabs code : Eric Meyer
 * Dokuwiki convertion : Laynee
.wrap_tabs .li {
.wrap_tabs ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid __text_alt__;
font: bold 12px Verdana, sans-serif;
.wrap_tabs ul li {
list-style: none;
margin: 0;
display: inline;
.dokuwiki .wrap_tabs ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid __text_alt__;
border-bottom: none;
background: __background_alt__;
text-decoration: none;
.dokuwiki .wrap_tabs ul a:link { color: __text__; }
.dokuwiki .wrap_tabs ul a:visited { color: __text__; }
.dokuwiki .wrap_tabs ul li a:hover {
color: black;
background: __background_neu__;
#dokuwiki__content .wrap_tabs ul li span.curid a {
background: __background__;
border-bottom: 1px solid __background__;
font-weight: bold;
I like them and actually planned to do something similar for a while. They will definitely go into the next release. I've also added this to the issue tracker as a reminder (see
I now implemented tabs, but not with this styling. As the core is using tabs since Angua, I simply re-used the styling that is already there. That makes the design more consistent. — Anika Henke 2013/03/24 13:47

I really like the plugin :-D, and it seems to be working properly.

What's the page link to the example page?

What example page do you mean? The one that comes with the plugin? Or are you asking for a demo? There is a demo on, but it's a bit old. I just noticed I forgot to add that to the main page, which I will do now. — Anika Henke 2012/11/21 15:36
Yes, the example page that comes with the plugin.
(I'm using the DokuBook theme is that makes a difference)
And thanks for adding the link, I can't always visualize what a bit of code will do.
There cannot be a direct link to the example page. But there are two ways of getting it into your wiki: Either copy ./lib/plugins/wrap/example.txt to somewhere under your ./data/pages/ or simply open that example.txt file and copy its content to any new or existing page in your wiki. — Anika Henke 2012/11/21 16:36
Thank you, your help and patience have been wonderful.

For the moment a copy of “de”, or a symlink to it is enough, because no “Sie”-form is used yet.

The “de-informal” language has been added now and will be part of the next release. — Anika Henke 2013/12/16 01:01

Is it possible to add color option for box, e.g.

. So that I can use box of different colors on one page. Color code might be in HEX. I know about box plugin but I don't want to use it with WRAP.

No, sorry. As giving the option to change colours makes the design less consistent, the markup less semantic, the page less accessible and everything less professional, I've decided not to do anything like this. That's also why I have removed the typography classes which were included in the first few versions. If you'd really want to have that kind of thing, you can use the block plugin. Or you can implement other colours yourself by adding your own classes. — Anika Henke 2013/03/24 13:47
Thank you very much for your prompt response. From your reply I got my need.

I am able to successfully insert a table and/or make use of the wrap plug-in within numbered lists through the native dokuwiki editor; the numbered list sequence does not get interupted. However, if a user opens that page for editing with the graphical editor, CKEdit in the case of my wiki, the numbered list restarts at 1. I have tried every combination of syntax I could think of to prevent the paragraph break from being introduced after the wrap syntax with no luck. Is there a tip on doing this or it just isn't supported?

Otherwise excellent plug-in.

This will be entirely an issue of the CKEdit plugin as the wrap plugin has no influence on how that interacts with it. So, please report it there. — Anika Henke 2014/01/27 01:10

I use the option pagebreak for pdf export. But only the first pagebreak works. Further pagebreaks are ignored. The code is rendered so it doesn't appear as text, but I haven't a pagebreak in the document.

<WRAP pagebreak></WRAP>

Rene Jungmann 2013/06/08 22:36

I cannot reproduce this. I have tried in latest Chrome, Firefox and IE, and it worked as it should. What is the exact syntax you use? — Anika Henke 2014/01/27 01:08
I'm getting the same problem with Binky and plugin DW2PDF in Chrome 32 (Mac OS 10.9.1). My syntax looks like this:
<WRAP pagebreak></WRAP>

in a free line between the content. The first one is used correctly, every following one is ignored.
Markus Napp 2014/02/06 12:47

Same for me…
Matthias 2014/04/23 14:30

Amazing plugin! I was searching for a class to produce a shadow. If that doesn't exist, it would be great for a future version.

PS: This plugin could become a part of the DokuWiki core package. :-)

Sorry, I won't add classes which describe looks, but only semantics (“round” is an exception). It is easy to extend the Wrap plugin with your own custom styles, though. You can either define a class “shadow” and add the following to your userstyles:
.wrap_shadow {
  box-shadow: 4px 4px 0.5em -0.3em #333;

or you can overwrite existing styles, e.g. if you'd like all normal boxes to have a shadow, you'd use ”.wrap_box“ instead of ”.wrap_shadow“ in the example above. You can use tools like this to create a different style of box shadows. — Anika Henke 2013/12/16 01:58

With Firefox (24.1.0) the alginment within columns did not work, but in Internet Explorer.

<WRAP column 70%>
Lorem Ipsum
<WRAP column 30%>
Lorem ipsum

After some testing I realized, that it worked with lower width (e.g. with 28% as in the example page of the plugin). Changing the “width” and “colum” made it working in both browsers

<WRAP 70% column >
Lorem Ipsum
<WRAP 30% column >
Lrem ipsum
70% and 30% boxes will never work next to each other (in no browser) as boxes always have a right margin of 1.5em. That's why the example syntax says “Attention: Widths can cause problems and will often look different and break in some browsers. If you're not a web developer, you might not understand any problems regarding the box model. Just try to test your columns in all major browsers and make your widths smaller than you initially think they should be.”
You can use lower values (as you already found out). Switching the % and the 'column' will not make any difference. You can also try the experimental width keywords “half” or “third”, but in this case there won't be a 30/70 equivalent. (Maybe I'll add “twothirds” later.) — Anika Henke 2013/12/16 01:32

I have a wrap layout where I have a <WRAP column 30%> followed by a <WRAP column 60%>, this works OK as far as it goes but the table in the 30% column actually looks much nicer if it's in a 20% column. So I need some way to make a <WRAP column 20%>, then a blank 10% column, then the <WRAP column 60%>. Is there any way of doing this easily?

I tried adding indent but although it sort of worked it's not very good and it seemed to lose the outline round one of my tables. A way to insert a blank (but space occupying) wrap column would be ideal.

If it's only for making the table look different, why don't you add a class around your table? E.g. <WRAP narrowtable>…table inside…</WRAP> and some CSS which makes the table narrower, e.g. .dokuwiki .wrap_narrowtable table { width: 80%; }. Otherwise you could also add some special column width classes which create a larger margin on the side of the 30% column. — Anika Henke 2015-05-04 18:03

It would be great to have a standalone configuration page for WRAP as it exists for the custombuttons plugin.


This page should allow to set own box and inline styles similar to the “Add Button” form of plugin:custombuttons.
See Examples

  • Name
  • Icon
  • background colour
  • foreground colour
  • did I miss one?

At the top of the page it should show a table with the defined parameters which has a delete button for each line. Similar to the “Buttons List” of the plugin:custombuttons config page.

There should be a config directory and subdirectories for icons, css files, … for ease of migration, (e.g. ./wrap/custom/icons or [dokuwikiroot]/conf/plugin/wrap/icons)

In dokuwiki admin config page WRAP plugin should have a list entry field for groups and/or users who are granted access to the WRAP config page.


I'm using dokuwiki and your wondefull WRAP plugin for some kind of educational wiki. It is a closed wiki, and it has an area 4) for cooking enthusiasts, mostly former roomies of our Wohngemeinschaft.

Only days after enabling the WRAP plugin I was asked for more styles, e.g. for joke, sarcasm, kudos and many more. Nevermind if styles like theese are of general interest or not the rush demand for more WRAP styles was surprising to me. I might think that this is not a unique phenomena and others may have made the same experience.

There should be a lot of scenarios which might need self defined box and inline styles I would think.

thomas 2014-06-04 16:14

You could give the block plugin a go… — Anika Henke 2015-05-04 19:16

This is probably simple, but for whatever reason, I can't figure out how to get this to work using WRAP.

Here's what I have in CSS:

.ola {
list-style-type: lower-alpha;

And here's the HTML:

  <ol class="ola">
    <li>alpha line item 1</li>
    <li>alpha line item 2</li>
    <li>alpha line item 3</li>

I initially thought it would be as simple as putting the CSS into “userall.css” as:

.wrap_ola {
list-style-type: lower-alpha;

But it appears that DW overrides this when I try to use it like this:

<WRAP ola>
  - alpha line item 1
  - alpha line item 2
  - alpha line item 3

I've tried many variations… but all with no luck. What am I missing?

Richard Randall 2014/07/29 17:37

You're nearly there, it's
.wrap_ola ol {
  list-style-type: lower-alpha;

(your Wrap example CSS was not as specific as your HTML example CSS). — Anika Henke 2014-08-01 11:45

I'm using Wrap to show infoboxes like mediawiki.

First I create the page using the infobox namespace. eg infobox:jenny_elliot
Second I used include to include infobox:jenny_elliot into people:jenny_elliot as an infobox
Now, I have many people, how do I use wrap in such a way that I only are required to create one template. e.g. infobox:peoples_info.

And then include this as an infobox template to all the peoples in my list. Is it possible to perform data passing with the plugins?

This question is more suited for the include plugin and not here as the Wrap plugin won't be able to help you with that at all. Best ask on the include plugin's page or in the forum. One plugin which looks like what you need is the templater plugin. Unfortunately it is quite old, though (I haven't tried it). — Anika Henke 2015-05-04 18:53

I am trying to use Wrap to customize the look of content in the sidebar. But it seems the wrap classes are not added to the sidebar… 2014-12-02 20:23 +08:00

Yes, of course it works within a sidebar. The only reason I can think of why it might not work is a missing dokuwiki class in the template. Which template are you using? — Anika Henke 2015-05-04 17:58

WRAP plugin does not take in account the uppercase letter of CSS styles written in userstyle.css in conf/ directory. Then, should we better written this information in the WARP plugin page, inside its "extend with custom styles" section, shouldn't we ?

Yes, I've added a note to the page accordingly. — Anika Henke 2015-05-04 19:13

I installed WRAP plugin, but it dose not work. Please help me!

What exactly doesn't work? Please check the FAQ on plugin problems and please be specific and be precise when describing your issue. — Anika Henke 2015-05-04 17:43

I've never seen the topic of pseudo-elements addressed in any of the WRAP documentation. Does WRAP support pseudo-elements? And if so, how do we use them in WRAP?
rrandall 2015-03-27 18:13

Yes, they work just fine. You use them just as you would when using a regular css File, for example
In your userstyle.css
.wrap_customstyle::before {
content: "\f00c";
display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  color: #080;

Would produce a nice FontAwesome Icon in front of your element encased with something (assuming you have FontAwesome installed of course)
yinken 2015-04-04 18:53

I have installed WRAP plugins to create start page and present some important section as 'button'. Could you me indicate how to adapt block code below to be able to have all button clickable ?

<WRAP column 94% round coop centeralign>
<typo fc:white; fs:150%;>
Grâce à ce lien, vous pouvez accéder 
à l'espace Coopérateur qui vous permettra de suivre l'évolution du projet. Bonne lecture.

Tank's in advance.

Hello: It's me again: nobody can help me ? I have almost resolved the problem by combining WRAP plugin with one other ; but he still some errors.

I don't understand what you're doing there and what you're trying to achieve. Some more context and a link would be helpful. You can create a simple button with
<wrap button>[[ConseilAdministration|{{:cooperateurs.png?nolink&75|Exploitation}}]]</wrap>

Anika Henke 2015-09-05 15:24

I am having 2 issues. First: The below works.

<WRAP group>
<WRAP column half>
====== Heading 1 ======
<WRAP column half>
====== Announcement ======

How come the below doesn't work?

<WRAP group>
<WRAP column 50%>
====== Heading 1 ======
<WRAP column 50%>
====== Announcement ======

Neither the below works. :-(

<WRAP group>
<WRAP 50% column>
====== Heading 1 ======
<WRAP 50% column>
====== Announcement ======
The example page which comes with the Wrap plugin (and which is shown in the big screen shot on the plugin page) explains this a bit:
:!: Attention: What is the difference between widths and width keywords and when is it best to use which? Widths can cause problems and will never fully add up, therefore will break the layout under some circumstances. (See box model for a technical explanation.) So, getting widths right will need some fiddling around and testing in various browsers. Width keywords on the other hand fit automatically and work better on mobile devices. But the drawback is that they need an extra wrap around them and don't work properly in older browsers (IE8 and under).

Second issue is: I want to put blog entries under <h1> heading in a column and make each blog title as <h2> (not <h1>) so that table of content should look:

  Blog entries 1
  Blog entries 2

In order to do that, I change plugin/blog/_template.txt and make the each blog head as <h2> ( ===== @TITLE@ ===== ). However, no matter what,

gives each blog title as <h1>. I know this is WRAP bug because if I get rid of WRAP codes, the page is rendered correctly. Is there a remedy?

<WRAP group>
<WRAP column half>
====== Heading 1 ======
<WRAP column half>
====== Announcement ======
This bug report says it's an issue between the the blog and wrap plugins. But I don't understand if the “extra flag […] for overriding the automatic level detection” mentioned in there already exists and if yes, which one it is, or if it would still need to be developed. — Anika Henke 2018-03-30 21:12

It would be really nice if the wrap plugin's many default boxes (box, info, alert, etc) came with an option to make them collapsible, which would add a [hide] link in the upper right which would collapse them down to just the title and a [show] link, sort of how the table of contents on wikipedia articles currently work. Possibly also with the option of having these boxes either collapsed or expanded by default.

Currently the closest I can get is embedding a hidden plugin container inside a wrap box, which is a pretty ugly solution.

Answering my own issue:

Turns out it's pretty easy to get this sort of functionality by putting a togglewrap toggle inside a standard box. It would still be nice to have this built into the special info boxes by default, but I don't think it's actually worth your time to develop.

My solution, for posterity:

<div box round>**Title of Collapsible Note** 
<span right>{{togglewrap>note1&checked|show}}</span>
<WRAP note1>Lorem ipsum dolor sit amet...</WRAP>
It seems the float boxes specially when they are used with width attribute are not responsive. Also when you use multiple columns wrap (e.g. <WRAP third column>) they dont adjust themselves in different screens! Please fix it. — atronoush 2015-10-09 06:30
I cannot reproduce this. Can you please post example syntax that doesn't adjust? — Anika Henke 2018-03-30 21:06

Dear author, I find that the red color of the “em” feature is too similar to the color of a not yet existing page and I would like to try out different colors. Is there any way to do that? Is it connected somehow to a variable of the template? (I am using the standard “Detritus” template). Thanks in advance — Matteo 2016-01-26 11:34


.dokuwiki .wrap_em {
    color: #c00; /* PLACE YOUR COLOUR HERE */

Aleksandr Selivanov 2016-01-30 19:07

Hello, I'd like to do a page structure with 4 columns, the first one , a header block on the 2th -4th column and 3 columns under the header block.

I tried this code :

<WRAP group>
<WRAP quarter column box>
First column 

beside header\\ \\ \\ \\
<WRAP box >Header on columns 2-4</WRAP>
<WRAP quarter column box>column 2 below header</WRAP>
<WRAP quarter column box>column 3 below header</WRAP>
<WRAP quarter column box>column 4 below header</WRAP>


I doesn't do the job. The last block should be on the right and not under the first column. Is it a bug ? or should I have done this in another way ?

<WRAP column box 25%>
First column 

beside header\\ \\ \\ \\


<WRAP column 70%>

<WRAP box>
Header on columns 2-4

<WRAP group>

<WRAP third column box>
column 2 below header

<WRAP third column box>
column 3 below header

<WRAP third column box>
column 4 below header



<WRAP clear/>

Aleksandr Selivanov 2016-03-06 18:56

Thanks a lot, I didn't know that you may use «column» outside a group and without half/third/quarter word.

If from 2013, then 2014 Hrun - till now Wrap was working perfectly, now by updating to the new DW the story changed:

  • I can se in the page the tabs only when I make a preview of the page, but not after saving it. So, I have some hundred of pages without the internal Tabs/links functional, but with a 1/4 empty page in the upper side. It has no connection with the templates, from my studies. (the solution for me was to go back to Hrun just for the sake of TABs)
  • Is there any known conflict between some plugins or any known incompatibility with the new DW release?
    • Firefox debugger: Style sheet could not be loaded. http:/internal link/dw/lib/exe/css.php?t=dokuwiki&tseed=c18e4….
I cannot reproduce any of that. Does that also happen with the default 'dokuwiki' template and other plugins deactivated? If no, I would activate plugins and switch the template one by one to see which culprit it might be. If yes, can you please post some code examples? — Anika Henke 2018-03-30 21:46
I have one other idea. What does your `noPrefix` config option say? It should include 'tabs' in order for the tabs to be styled properly. — Anika Henke 2018-03-31 12:56

I find WRAP very useful (so thank you!), and recently almost successfully added this to my userstyles.css:

.wrap_poem {
	white-space: pre;

However, I find that while this does preserve line breaks as I want, it also results in huge gaps between verses. Inspecting the HTML, it looks like each verse becomes a <P> with a line break at the start and end. Is there any way to prevent this, or some other way using the WRAP plugin to display poems/song lyrics?

Is there a way to load the darkTpl config option dynamically, so we could use it together with the Loadskin Plugin? I tried simply putting $conf['plugin']['wrap']['darkTpl'] = 1; somewhere in the template's code but I guess it's not that simple.

phl 2021-02-16 14:13

Thank you for the plugin! Would it be possible to add support for export to XML (with the XML plugin)? To elaborate on that, I am writing a chronicle in Dokuwiki that I want to export to XML and subsequently Latex and print a book out of it eventually. I assign to some elements (span/divs or tables) classses that I want to format in a certain way. What I need from the wrap plugin is to preserve the classes in the XML output.

galapah 2021-07-11 12:15

conf/printstyle.css in Anteater
conf/rtlstyle.css in Anteater
conf/allstyle.css in Anteater
a root namespace, atm there are 6 of such namespaces, access only for group members same as the namespace
  • wiki/wrap.txt
  • 最終更新: 2022/10/01 02:27
  • by ともやん