Basic Syntax
<WRAP classes #id width :language> "big"content </WRAP> or <block classes #id width :language> "big" content </block> or <div classes #id width :language> "big" content </div>
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> or <inline classes #id width :language>"small" content</inline> or <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.
There is also a shorthand syntax (for wraps without content):
<WRAP classes #id /> or <block classes #id /> or <div classes #id /> and <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.
Classes
The following classes are currently available:
| class name | description/notes |
|---|---|
columns |
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 | class="col1 leftalign"> 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 (2, 3, 4 or 5), only works in modern browsers (Firefox, Chrome and Safari) |
| 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 columns in a row, should be used in triplets |
quarter | fits four columns in a row, should be used in quads |
| alignments similar to divalign, columns, styler don't work withspans! | |
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 | creates a blue box with an info icon |
important | creates an orange box with an important icon |
alert | 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 |
| miscellaneous | |
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 tonoprint |
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 |
hows 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 |
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
|
All tables inside a column or box will always be 100% wide. This makes positioning
and sizing tables possible and partly replaces tablewidth.
Known Restrictions
- WRAPs won't export in ODT format.
- 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. The following syntax would produce two different
kinds of emulated headlines inside any of the columns or boxes/notes:
- //**__Big Underlined Headline__**// (They will look a bit different in safety notes.)
- //**Small Headline**//
Widths
You can set any valid widths on any uppercase <WRAP> container: %,
px, em, ex, 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 and quarter. To work correctly they need another wrap around them. E.g.
<WRAP group> <WRAP half column>...</WRAP> <WRAP half column>...</WRAP> </WRAP>
will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices.
| Option | Description | Default value | noPrefix | Which (comma separated) class names should be excluded from being prefixed with wrap_ | tabs, group |
|---|---|---|
restrictedClasses | restrict usage of plugin to these (comma separated) classes | (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 |
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
- shorthand syntax
- Not supported because not relevant in ODT: clear, prewrap
Toolbar Picker
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></WRAP> - especially emphasised, highlighted, less significant creates the respective marks
Examples
http://wiki.bash-hackers.org/sandbox3
http://home.agh.edu.pl/~masior/doku.php?id=wiki:wrap