wiki:wrap [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
from: [[https://www.dokuwiki.org/plugin:wrap|]]
====== Wrap Plugin ======
<code>
---- 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      : anika@selfthinker.org
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

downloadurl: https://github.com/selfthinker/dokuwiki_plugin_wrap/archive/stable.zip
bugtracker : https://github.com/selfthinker/dokuwiki_plugin_wrap/issues
sourcerepo : https://github.com/selfthinker/dokuwiki_plugin_wrap
donationurl: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=11071728
----
</code>

===== One plugin to rule them all =====

This plugin gives you the ability to wrap wiki text inside containers (divs or spans) and give them
  - a certain class (with loads of useful preset classes)
  - a width
  - 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]]


===== Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

===== Syntax =====

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.

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

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.

==== Examples ====

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

==== Classes ====

The following classes are currently available:

{{ :plugin:wrap_plugin_example10.png?300&direct}}

^ 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  |
^ __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 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'' [[#configuration_options|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 ~~DISCUSSION~~ 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'' [[#configuration_options|config option]].

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

==== Widths ====

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>
  </WRAP>
will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices.


==== Anchor ====

To define an anchor, the following syntax applies:
  <wrap #ankername />

The anchor is accessible via: ''#ankername''

==== Languages and Text Directions ====

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: http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code

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

===== Demo =====

You can see a demo of the plugin on [[http://demo.selfthinker.org/plugin:wrap|demo.selfthinker.org]].

[[https://yadi.sk/i/ycbENWFjWEduTA|“Examples” (demo) in Russian]] (for v2011-05-15). [[http://pastebin.com/C9xjaEH9|Source]].

===== Configuration options =====

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

===== ODT Support =====

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

===== Toolbar picker =====

{{ :plugin:wrap_plugin_toolbar_picker.png?nolink}}

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

===== Extend with custom styles =====

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 [[devel:css#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.css''(( ''conf/printstyle.css'' in Anteater)) for the print view, ''conf/userrtl.css''(( ''conf/rtlstyle.css'' in Anteater)) for RTL languages and ''conf/userall.css''(( ''conf/allstyle.css'' in Anteater)) 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.

==== Examples ====

in style.css

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

call in DW-page:
  <WRAP note>...</WRAP>

Here are some [[plugin:wrap:extensions|useful Wrap extensions]] created by users of this plugin.
==== Add former typography classes ====

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 [[#Extend with custom styles|above]]).

===== How to use the helper =====

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.

==== Example how to get just one kind of attribute ====

<code php>
// 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">';
</code>

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

==== Example how to get all attributes ====

<code php>
// 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.'">';
</code>

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


===== Development =====

==== Done ====

[[https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom|{{http://img529.imageshack.us/img529/5725/feedm.png?16x16 |Recent commits to Wrap Plugin (RSS feed)}}]]
{{rss>https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom date}}

==== Localization ====

You can help me with translations and [[https://translate.dokuwiki.org/plugin/wrap|update the language files]]. There are two files to translate:

  * [[https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/lang.php|lang/en/lang.php]] is for the explaining titles on the picker images.
  * [[https://github.com/selfthinker/dokuwiki_plugin_wrap/blob/master/lang/en/settings.php|lang/en/settings.php]] is for the configuration options.

===== Credits =====

  * The code reuses parts of the [[box]] plugin by [[chris@jalakai.co.uk|Christopher Smith]].
  * The ODT support was implemented by [[https://github.com/LarsGit223|LarsDW223]].
  * The images for the notes are taken from the [[http://schollidesign.deviantart.com/art/Human-O2-Iconset-105344123|Human-O2 icon set]].
  * The toolbar uses images from the [[http://www.famfamfam.com/lab/icons/silk/|Silk Icon Set]] and the [[http://www.damieng.com/icons/silkcompanion|Silk Companion Icon Set]].
  * Thanks to [[https://github.com/selfthinker/dokuwiki_plugin_wrap/contributors|all contributors]].

===== See also =====

  * [[.:wrap:extensions|Useful extensions for the Wrap Plugin]]
  * [[.wrap:extensions?do=index|Sub pages to Wrap Plugin]]

===== Discussion =====

Before reporting any issues (bugs or requests), please first take a look at the [[faq:pluginproblems|FAQ on plugin problems]].

You can report any issues either on the [[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues|Issue Tracker]] or on the separate [[.:wrap: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.  --- [[user>adrianvesa|adrianvesa]] //2016-03-30 19:58//


Example how to add new button into the picker: [[http://webdev.d77.in/downloads/dokuwiki_wrap_prewrap.tar.gz|DokuWiki wrap plugin prewrap patch]]\\
This patch adds button for ''%%<WRAP prewrap>%%'' code. --- [[user>denisvs|DenisVS]] //2017-07-11 14:38//


Is it possible to edit the selection in the 'Toolbar Picker' I would like to add something. --- [[user>stud_med|stud_med]] //2021-01-19 19:42//

from: [[https://www.dokuwiki.org/plugin:wrap:discussion|]]
====== Wrap Plugin Discussion ======

//Discussion page for the [[..:Wrap]] plugin//

Please start new requests with a new heading.

===== Question: How to style Note-Boxes in PDF export of DW2PDF plugin? =====

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 :)



===== Question: Notes-Boxes =====

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@i-doit.ch|Roland Gantenbein]] 2018/11/23 14:11//
===== Request: Make 100% table width optional =====

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. --- [[user>ach|Anika Henke]] //2018-04-04 01:47//
===== Request: new "sucess" note =====

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@archivo.mapasdesignificado.es|Branmabon]] 2017/03/23 14:08//


===== Problems in some templates =====

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

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

--- //[[http://orgrim.net|Nicolas Thauvin]] 2009/09/09 23:22//

> Templates should use the ''.dokuwiki'' class and many already do (as does the [[template:typo]] template). See more on the [[devel:templates#dokuwiki class]]. --- //[[anika@selfthinker.org|Anika Henke]] 2009/09/18 00:37//


===== Quotation Box =====

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

> Yes, I thought about that, too. But as the [[plugin:blockquote]] plugin would be semantically much more correct, I recommend using that instead. --- //[[anika@selfthinker.org|Anika Henke]] 2009/09/18 00:37//


===== Thanks =====

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. --- //[[user>treegb]] 2016-10-10 21:02//.
===== Align Issues =====

<code>
<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
</WRAP>

[[namespace:something|{{:picture.png|GO}}]]
</WRAP>
</code>

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 [[:wiki:syntax#images_and_other_files|DokuWiki syntax]]. --- //[[anika@selfthinker.org|Anika Henke]] 2009/10/07 07:47//


===== Empty Paragraph =====

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 [[#extend_with_custom_styles|add your own classes]]. In this case you could use something like "''topspace''" and "''bottomspace''" and add <code css>
.dokuwiki .wrap_topspace { margin-top: 1.5em; }
.dokuwiki .wrap_bottomspace { margin-bottom: 1.5em; }
</code> 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@selfthinker.org|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): 
<code>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;  }</code>

__dokuwiki__:
<code>
\\
<div testing>  <div empty1></div>  </div>
\\
<div testing>  <div empty2></div>  </div>
\\
<div testing>  <div empty3></div>  </div>
\\
<div testing>  <div empty4></div>  </div>
</code>

===== Non-valid CSS =====

Love this plugin, but the CSS on [[http://neuroanalysis.org/wiki|my page]] seems to fail CSS3 validity check as a result.
<code>
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 
</code>

I'm no CSS expert. Anybody have any suggestions?  --- //[[michael@repucci.org|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 :) --- //[[michael@repucci.org|michaelrepucci]] 2009/11/06 22:32//


===== latitude / longitude =====

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: 
<code><WRAP hide geo geo-post>  
    <wrap latitude>52.085819</wrap><wrap longitude>5.115348</wrap>
</WRAP>
</code>
right now that results in:
<code><div class="wrap_hide wrap_geo wrap_geo-post">  
    <span class="wrap_latitude">52.085819</span><span class="wrap_longitude">5.115348</span>
</div></code> 
where I would want: 
<code><div class="wrap_hide geo geo-post"> 
    <span class="latitude">52.085819</span><span class="longitude">5.115348</span>
</div></code>

> 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@selfthinker.org|Anika Henke]] 2010/01/07 01:52//
>> I just implemented this (in the repo). A new release which includes it will follow soon. --- //[[anika@selfthinker.org|Anika Henke]] 2010/01/31 15:36//


===== missing paragraph break issue =====

<code>
                case DOKU_LEXER_ENTER:
                    $wrap = new syntax_plugin_wrap_base();
                    $attr = $wrap->buildAttributes($data);

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

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 <WRAP...> 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 [[bug>1797]]. And it annoys me as well. ;-) --- //[[anika@selfthinker.org|Anika Henke]] 2010/01/15 09:43//
>> This will be fixed in the next version (coming soon) if used with Anteater. --- [[user>ach]] //2010/11/20 17:22//


===== Headlines =====

Are you planning support for **regular dokuwiki headlines** syntax? Plugin [[plugin:columns|]] have it, so where is the problem? Thanks.

> The [[plugin:columns|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. --- [[user>ach|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. --- [[user>ach|Anika Henke]] //2011/05/15 18:12//

===== Emulated headlines with anchors =====

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 [[plugin:bookmark]] plugin. --- //[[anika@selfthinker.org|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. --- [[user>ach|Anika Henke]] //2011/05/15 18:12//

===== Baretables =====

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?

<code>
<bare> <html><div class="baretable"></html>
</bare> <html></div></html >
</code>

<code css>
div.dokuwiki div.baretable th,
div.dokuwiki div.baretable td { border: 0px; }
</code>

> It's quite easy to implement it yourself by [[plugin:wrap#extend_with_custom_styles|adding your own class]], with e.g. <code css>
div.dokuwiki div.wrap_baretable table,
div.dokuwiki div.wrap_baretable th,
div.dokuwiki div.wrap_baretable td { border: 0; }
</code> you can use <code><WRAP baretable>
|foo|
|bar|
</WRAP>
</code> --- [[user>ach|Anika Henke]] //2011/05/02 20:48//

>> Also check out the [[plugin:jsmath|jsmath plugin]].

===== Just appreciation =====

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, \\ --- [[user>coastGNU|Thomas]] //2014-06-04 15:00//


===== Conflict with OpenLayersMap =====

http://www.1wiki.de/doku.php/playground:playground

> I just [[https://github.com/selfthinker/dokuwiki_plugin_wrap/commit/265f148c782a0dc37f2b16f7a667a893d21646d0|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
  ...
  </olmap>
  <WRAP clear></WRAP>
  </WRAP>
--- //[[anika@selfthinker.org|Anika Henke]] 2010/06/12 22:20//

>>thats works <WRAP clear></WRAP> THANK YOU

===== Hide (some of) the editor buttons? =====

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. //[[user>Malamut]]//

>> To edit Textlabels of the editor buttons: ''/plugins/wrap/lang/en/lang.php'' 

===== Why uppercase? =====

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. //[[user>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: https://hahn-mediaservice.net/private/gast/dokuwiki/wrap.zip

> The initial reasoning was to make it similar to DokuWiki's core  [[:wiki:syntax#embedding_html_and_php|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 [[plugin:box|box plugin]] which is quite popular.) It will be in the next release (coming soon). --- [[user>ach]] //2010/11/20 17:03//

===== Picker images=====

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?  --- [[user>ach]] //2010/11/20 17:00//

===== This plugin doesn't produce anything =====

:!: //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 dokuwiki.org, so wouldn't work on this page. Did you have a look at the [[faq:pluginproblems|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 ''<WRAP **tip**>test</WRAP>'' --- 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


===== Shorter code for empty div?  =====

It would be nice if there could be a shorter code for empty divs like  ''<WRAP clear></WRAP>'' → ''<WRAP clear />'' 

> Good idea. But this has not a very high priority for me. If someone sends a patch, I will implement it. --- [[user>ach|Anika Henke]] //2011/05/02 20:50//
>> To better keep track of things, I just [[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues/9|added this request to the bugtracker]]. --- [[user>ach|Anika Henke]] //2011/05/29 13:44//

===== CSS unwanted behaviour in IE =====

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

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

If you create boxes like this one:

<code wiki>
<WRAP column>
//**Headline**//
^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  | 
</WRAP>
</code>

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.

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

and modified helper.php
<code 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";
                continue;
            }
</code>

greetz\\
Frank

> 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. --- [[user>ach|Anika Henke]] //2012/08/19 11:36//

===== ID attribute =====

A quick modification to be able to add an ID to a box (I use it to make empty <div> that are processed by javascript).

In helpher.php#getAttributes
<code php>
            //get id
            if (preg_match('/#([A-Za-z0-9_-]+)/', $token)) {
                $attr['id'] = trim($token,'#');
                continue;
            }
</code>
In helper.php#buildAttributes
<code php>
            if($attr['id']) $out .= ' id="'.hsc($attr['id']).'"';
</code>

And then you can use <html><div #test></div></html>.

> Thanks for this. I just implemented it, so it will be part of the next release. --- [[user>ach|Anika Henke]] //2012/08/19 12:58//

===== Just to let you know  ===

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

Louis

===== ODT Support? =====

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. --- [[user>ach|Anika Henke]] //2018-03-30 21:29//
===== Not working, default template in 2012-01-25 "Angua" =====

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 [[faq:pluginproblems|caching issues]] and was otherwise working fine. --- [[user>ach|Anika Henke]] //2012/08/19 12:17//

===== Printing boxes and notes =====

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. - [[user>Juergen Schuemmer|Juergen Schuemmer]]

> This is basically not fixable. See [[https://github.com/selfthinker/dokuwiki_plugin_wrap/issues/11#issuecomment-6721471|my reply to this issue]] in the issue tracker for a more exhaustive explanation. --- [[user>ach|Anika Henke]] //2012/08/19 12:20//

===== CSS tabs for the Wrap plugin =====

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 [[template:dokuwiki|new DokuWiki template]]. Hope you'll like it :)\\
And thank you Anika for this wonderful plugin ! --- [[user>Laynee|Laynee]] //2012/05/07 17:48//

==== The markup: ====

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

==== The result: ====

{{http://nsm05.casimages.com/img/2012/05/07//1205070553391460209819488.png?nolink|preview}}

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

==== The CSS: ====

Add it to your ''conf/[[devel:css#user_styles|userstyle.css]]''.

<code css userstyle.css>
/** New Tabs style for the Wrap Plugin
 *
 * Original tabs code : Eric Meyer
 * Dokuwiki convertion : Laynee
 *  
 */
 
.wrap_tabs .li {
display:inline;
}

.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;
}
</code>

> 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 https://github.com/selfthinker/dokuwiki_plugin_wrap/issues/12).
>> 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. --- [[user>ach|Anika Henke]] //2013/03/24 13:47//

===== Link to the Example page =====

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 [[http://demo.selfthinker.org/|demo.selfthinker.org]], but it's a bit old. I just noticed I forgot to add that to the main page, which I will do now. --- [[user>ach|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.
>> Stacey

>>> There cannot be a direct link to the example page. But there are two ways of getting it into your wiki: Either copy ''[[https://raw.github.com/selfthinker/dokuwiki_plugin_wrap/master/example.txt|./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. --- [[user>ach|Anika Henke]] //2012/11/21 16:36//

>>>> Thank you, your help and patience have been wonderful.

===== Please add "language" de-informal =====

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. --- [[user>ach|Anika Henke]] //2013/12/16 01:01//

===== Color option for box =====
Is it possible to add color option for box, e.g. <WRAP box round COLOR>. 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 [[plugin:block|block plugin]]. Or you can implement other colours yourself by [[plugin:wrap#extend_with_custom_styles|adding your own classes]]. --- [[user>ach|Anika Henke]] //2013/03/24 13:47//

>> Thank you very much for your prompt response. From your reply I got my need.

===== Insert Tables in a Numbered list =====
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. --- [[user>ach|Anika Henke]] //2014/01/27 01:10//

===== Only first pagebreak works =====
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.
<code>
<WRAP pagebreak></WRAP>
</code>

 --- [[user>Rene Jungmann|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? --- [[user>ach|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:
>> <code><WRAP pagebreak></WRAP></code> in a free line between the content. The first one is used correctly, every following one is ignored.
>> --- [[user>Markus Napp|Markus Napp]] //2014/02/06 12:47//

>>> Same for me... 
>>>--- [[user>matti99|Matthias]] //2014/04/23 14:30//

===== Box Shadow =====
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 [[plugin:wrap#extend_with_custom_styles|extend the Wrap plugin with your own custom styles]], though. You can either define a class "shadow" and add the following to your userstyles: <code css>.wrap_shadow {
  box-shadow: 4px 4px 0.5em -0.3em #333;
}</code> 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 [[http://css3gen.com/box-shadow/|tools like this to create a different style of box shadows]]. --- [[user>ach|Anika Henke]] //2013/12/16 01:58//

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

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

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

<code>
<WRAP 70% column >
Lorem Ipsum
</WRAP>
<WRAP 30% column >
Lrem ipsum
</WRAP>
</code>

> 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 [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|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.) --- [[user>ach|Anika Henke]] //2013/12/16 01:32//

=====How to make space between columns?=====
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. --- [[user>ach|Anika Henke]] //2015-05-04 18:03//

===== config page ala custombuttons? =====

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

=== Definition ===
This page should allow to set own box and inline styles similar to the "Add Button" form of plugin:custombuttons. \\ See [[plugin:custombuttons#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. 

=== Reason ===
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 ((a root namespace, atm there are 6 of such namespaces, access only for group members same as the namespace)) 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.

regards, \\  [[user>coastGNU|thomas]] //2014-06-04 16:14//

> You could give the [[plugin:block|block plugin]] a go... --- [[user>ach|Anika Henke]] //2015-05-04 19:16//

===== Create Alpha-Character Ordered List using WRAP =====

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:
<code>.ola {
list-style-type: lower-alpha;
}</code>

And here's the HTML:
<code>
  <ol class="ola">
    <li>alpha line item 1</li>
    <li>alpha line item 2</li>
    <li>alpha line item 3</li>
  </ol>
</code>

I initially thought it would be as simple as putting the CSS into "userall.css" as:
<code>.wrap_ola {
list-style-type: lower-alpha;
}
</code>

But it appears that DW overrides this when I try to use it like this:
<code><WRAP ola>
  - alpha line item 1
  - alpha line item 2
  - alpha line item 3
</WRAP></code>

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

 --- //[[rrandall@richardrandall.com|Richard Randall]] 2014/07/29 17:37//

> You're nearly there, it's <code>.wrap_ola ol {
  list-style-type: lower-alpha;
}
</code> (your Wrap example CSS was not as [[http://css-tricks.com/specifics-on-css-specificity/|specific]] as your HTML example CSS). --- [[user>ach|Anika Henke]] //2014-08-01 11:45//


===== Passing Variables Using Include and Wrap =====
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 [[plugin:templater|templater plugin]]. Unfortunately it is quite old, though (I haven't tried it). --- [[user>ach|Anika Henke]] //2015-05-04 18:53//

===== Does Wrap work within sidebar? =====
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? --- [[user>ach|Anika Henke]] //2015-05-04 17:58//

===== userstyle.css and WRAP: do not take in account Uppercase letters of CSS class names=====
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 [[plugin:wrap#extend_with_custom_styles|"extend with custom styles" section]], shouldn't we ?

> Yes, I've added a note to the page accordingly. --- [[user>ach|Anika Henke]] //2015-05-04 19:13//

===== Plugin not working =====

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

> What exactly doesn't work? Please check the [[faq:pluginproblems|FAQ on plugin problems]] and please [[http://www.catb.org/esr/faqs/smart-questions.html#bespecific|be specific]] and [[http://www.catb.org/esr/faqs/smart-questions.html#beprecise|be precise]] when describing your issue. --- [[user>ach|Anika Henke]] //2015-05-04 17:43//

===== Does WRAP support pseudo-elements? =====
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?\\
 --- [[user>rrandall|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
> <code>
.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;
}
</code> Would produce a nice FontAwesome Icon in front of your element encased with <wrap customstyle>something</wrap> (assuming you have FontAwesome installed of course)
> --- [[user>yinken|yinken]] //2015-04-04 18:53//

===== Links =====
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 ?
<code>
<WRAP column 94% round coop centeralign>
<typo fc:white; fs:150%;>
[[ConseilAdministration|{{:cooperateurs.png?nolink&75|Exploitation}}]]
Grâce à ce lien, vous pouvez accéder 
à l'espace Coopérateur qui vous permettra de suivre l'évolution du projet. Bonne lecture.
</typo>
</WRAP>
</code>
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 <code><wrap button>[[ConseilAdministration|{{:cooperateurs.png?nolink&75|Exploitation}}]]</wrap></code> --- [[user>ach|Anika Henke]] //2015-09-05 15:24//
===== Using column =====
I am having 2 issues. First: 
The below works.
<code>
<WRAP group>
<WRAP column half>
====== Heading 1 ======
</WRAP>
<WRAP column half>
====== Announcement ======
</WRAP>
</WRAP>
</code>
How come the below doesn't work?
<code>
<WRAP group>
<WRAP column 50%>
====== Heading 1 ======
</WRAP>
<WRAP column 50%>
====== Announcement ======
</WRAP>
</WRAP>
</code>
Neither the below works. :-(
<code>
<WRAP group>
<WRAP 50% column>
====== Heading 1 ======
</WRAP>
<WRAP 50% column>
====== Announcement ======
</WRAP>
</WRAP>
</code>

> The example page which comes with the Wrap plugin (and which is shown in the big screen shot on the [[plugin:wrap|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 [[http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug|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:
<code>
Announcement 
  Blog entries 1
  Blog entries 2
</code>
In order to do that, I change plugin/blog/_template.txt and make the each blog head as <h2> ( ===== @TITLE@ ===== ). However, no matter what, <WRAP column> 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?
<code>
<WRAP group>
<WRAP column half>
====== Heading 1 ======
</WRAP>
<WRAP column half>
====== Announcement ======
{{blog>pub}}
</WRAP>
</WRAP>
</code>

> [[https://github.com/dokufreaks/plugin-blog/issues/82|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. --- [[user>ach|Anika Henke]] //2018-03-30 21:12//
===== Collapsible boxes =====
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. 

<del>Currently the closest I can get is embedding a [[plugin:hidden|hidden plugin]] container inside a wrap box, which is a pretty ugly solution.</del>

Answering my own issue:

Turns out it's pretty easy to get this sort of functionality by putting a [[plugin:togglewrap|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:

<code>
<div box round>**Title of Collapsible Note** 
<span right>{{togglewrap>note1&checked|show}}</span>
<WRAP note1>Lorem ipsum dolor sit amet...</WRAP>
</div>
</code>

===== Responsive float boxes =====
> 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.  --- [[user>atronoush|atronoush]] //2015-10-09 06:30//

>> I cannot reproduce this. Can you please post example syntax that doesn't adjust? --- [[user>ach|Anika Henke]] //2018-03-30 21:06//


===== The color of the "<wrap em>": how to change it? =====

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

> ''<your-wiki>\conf\userstyle.css''
>
> <file css userstyle.css>
.dokuwiki .wrap_em {
    color: #c00; /* PLACE YOUR COLOUR HERE */
}
</file> --- [[user>Aleksandr|Aleksandr Selivanov]] //2016-01-30 19:07//

===== Column Management =====
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 :
<code>
<WRAP group>
<WRAP quarter column box>
First column 

beside header\\ \\ \\ \\
</WRAP>
<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>

</WRAP>
</code>

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 ?

> <code>
<WRAP column box 25%>
First column 

beside header\\ \\ \\ \\

</WRAP>

<WRAP column 70%>

<WRAP box>
Header on columns 2-4
</WRAP>

<WRAP group>

<WRAP third column box>
column 2 below header
</WRAP>

<WRAP third column box>
column 3 below header
</WRAP>

<WRAP third column box>
column 4 below header
</WRAP>

</WRAP>

</WRAP>

<WRAP clear/>
</code> --- [[user>Aleksandr|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.

\\
===== Release of DW 2016-06-26a  =====
==== Tabs ====
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? --- [[user>ach|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. --- [[user>ach|Anika Henke]] //2018-03-31 12:56//

===== Question: Poem/Music lyrics styling =====

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

<code css>
.wrap_poem {
	white-space: pre;
}
</code>

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?

===== Question: Dynamic Loading of Dark Template Mode =====
Is there a way to load the ''darkTpl'' config option dynamically, so we could use it together with the [[plugin:loadskin|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.

 --- [[user>phl|phl]] //2021-02-16 14:13//

===== XML support =====
Thank you for the plugin! Would it be possible to add support for export to XML (with the [[plugin:xml | 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.

 --- [[user>galapah|galapah]] //2021-07-11 12:15//