✎ Examples for the Wrap Plugin (test)

<h1>Examples for the Wrap Plugin (test)</h1>
<div class="level1">

<p>
dsadsada
</p>

</div>

<h2>Basic syntax</h2>
<div class="level2">

<p>
An uppercase <b>&lt;nowiki>&#60;WRAP&#62;&lt;/nowiki></b> (or alternatively <b>&lt;nowiki>&#60;block&#62;&lt;/nowiki></b> or <b>&lt;nowiki>&#60;div&#62;&lt;/nowiki></b>) creates a <b><code>div</code></b> and should be used for <b>"big"</b> containers, <b>surrounding</b> paragraphs, lists, tables, etc.
</p>
<pre class="code">&lt;WRAP classes width :language>
"big" content
&lt;/WRAP>

or
&lt;block classes width :language>
"big" content
&lt;/block>

or
&lt;div classes width :language>
"big" content
&lt;/div>

</pre><p> </p>

<p>
A lowercase <b>&lt;nowiki>&#60;wrap&#62;&lt;/nowiki></b> (or alternatively <b>&lt;nowiki>&#60;inline&#62;&lt;/nowiki></b> or <b>&lt;nowiki>&#60;span&#62;&lt;/nowiki></b>) creates a <b><code>span</code></b> and should be used for <b>"small"</b> containers, <b>inside</b> paragraphs, lists, tables, etc.
</p>
<pre class="code">&lt;wrap classes width :language>"small" content&lt;/wrap>

or
&lt;inline classes width :language>"small" content&lt;/inline>

or
&lt;span classes width :language>"small" content&lt;/span>

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Please note, some things <b>won't work with lowercase spans</b>:
</p>
<ul>
<li class="level1"> <b>alignments</b> (including alignments generated by changing the text direction)</li>
<li class="level1"> <b>multi-columns</b></li>
<li class="level1"> and <b>widths</b></li>
</ul>

<p>
if the according wrap isn't floated as well.
</p>

</div>

<h2>Classes and Styles</h2>
<div class="level2">

</div>

<h3>Columns and Floats</h3>
<div class="level3">

<p>
You can have columns easily by adding the class <code>column</code> and a width, e.g.
</p>
<pre class="code">&lt;WRAP column 30%>...content...&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP column 30%>
<em><b><u>Emulated Big Headline</u></b></em>
</p>

<p>
You can emulate a big headline with italic, bold and underlined text, e.g.
</p>
<pre class="code">//**__Emulated Big Headline__**//

</pre><p> </p>

<p>
<em><b>Emulated Small Headline</b></em>
</p>

<p>
A smaller headline uses no underlining, e.g.
</p>
<pre class="code">//**Emulated Small Headline**//

</pre><p> </p>

<p>
If you need text that is bold and italic, simply use it the other way around:
</p>
<pre class="code">**//No Headline//**

</pre><p> </p>

<p>
&lt;WRAP column 30%>
<em><b><u>Different Floating Options</u></b></em>
</p>

<p>
Normally you would only need the class <code>column</code>, but for more sophisticated uses (not only for columns, but for any other classes, like <a href="#boxes_and_notes" title="wiki:wrap-beispiel ↵" class="wikilink1">boxes and notes</a> as well) you can have several kinds of "floats":
</p>
<ul>
<li class="level1"> <b><code>column</code></b> is the same as <code>left</code> in LTR languages and the same as <code>right</code> in RTL languages</li>
<li class="level1"> <b><code>left</code></b> will let you float your wrap on the left</li>
<li class="level1"> <b><code>right</code></b> will let the wrap float right</li>
<li class="level1"> <b><code>center</code></b> will position the wrap in the horizontal center of the page</li>
</ul>

<p>
&lt;WRAP column 30%>
<em><b><u>Widths</u></b></em>
</p>

<p>
You can set any valid widths (but only on divs): <code>%, px, em, ex, pt, pc, cm, mm, in</code>, but most of the time you'd only want either
</p>

<span class='np_break'> </span>
<div class="table"><table class="inline">
	<thead>
	<tr class="row0">
		<th class="col0">type</th><th class="col1">e.g.</th><th class="col2">note</th>
	</tr>
	</thead>
	<tr class="row1">
		<th class="col0"><code>%</code></th><td class="col1"><code>30%</code></td><td class="col2">makes sense in a liquid layout</td>
	</tr>
	<tr class="row2">
		<th class="col0"><code>px</code></th><td class="col1"><code>420px</code></td><td class="col2">makes sense if your layout has a fixed pixel width or if your container contains images with a certain width</td>
	</tr>
	<tr class="row3">
		<th class="col0"><code>em</code></th><td class="col1"><code>20em</code></td><td class="col2">makes sense if you like your wrap container to grow and shrink with the font size or if your layout is em-based</td>
	</tr>
</table>
<span class='np_break'> </span>
</div>
<p>
A <b>table</b> inside a column or box will always be <b>100% wide</b>. This makes positioning and sizing tables possible.
</p>

<p>
&lt;wrap em>After using any of the float classes, you might come across something like this, where the following text protrudes into the space where only the floating containers should be …&lt;/wrap>
</p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
… to prevent that, you should simply add
</p>
<pre class="code">&lt;WRAP clear>&lt;/WRAP>

</pre><p> </p>

<p>
after your last column.
</p>

<p>
You <b>can</b> use the same options with spans (as each element that floats is automatically a block level element), but it probably doesn't make too much sense. <img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Widths on spans normally do not work (by design), but can make sense, when it is floating.
</p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> 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 <a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" class="urlextern" title="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug"  rel="nofollow">box model</a>. Just try to test your columns in all major browsers and make your widths smaller than you initially think they should be.
</p>

<p>
All of those options will also work in the <a href="#boxes_and_notes" title="wiki:wrap-beispiel ↵" class="wikilink1">boxes and notes</a> wraps (see below).
</p>

</div>

<h4>Multi-columns</h4>
<div class="level4">

<p>
&lt;WRAP col3>
For modern browsers (Firefox, Chrome and Safari) you can use multi-columns. Just use <b><code>&lt;nowiki>col2&lt;/nowiki></code></b> for 2 columns, <b><code>&lt;nowiki>col3&lt;/nowiki></code></b> for 3 columns, <b><code>&lt;nowiki>col4&lt;/nowiki></code></b> for 4 columns and <b><code>&lt;nowiki>col5&lt;/nowiki></code></b> for 5 columns.
</p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Note: Multi-columns don't make sense for spans.
&lt;/WRAP>
</p>

</div>

<h3>Alignments</h3>
<div class="level3">

<p>
You can use these different text alignments:
</p>
<ul>
<li class="level1"> <code>leftalign</code></li>
<li class="level1"> <code>rightalign</code></li>
<li class="level1"> <code>centeralign</code></li>
<li class="level1"> <code>justify</code></li>
</ul>

<p>
&lt;WRAP centeralign>
Center aligned text …
&lt;/WRAP>
</p>

<p>
&lt;WRAP rightalign>
… and right aligned.
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP centeralign&gt;
Center aligned text ...
&lt;/WRAP&gt;

&lt;WRAP rightalign&gt;
... and right aligned.
&lt;/WRAP&gt;

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> You cannot add alignments to spans.
</p>

</div>

<h3>Boxes and Notes</h3>
<div class="level3">

<p>
&lt;WRAP round box 570px center>
<em><b><u>round box 570px center</u></b></em>
</p>
<ul>
<li class="level1"> <code>box</code> creates a box around the container and uses the colours from the template's <code>style.ini</code> as default colours (<code>&lt;nowiki>&#95;&#95;background&#95;alt&#95;&#95;&lt;/nowiki></code> and <code>&lt;nowiki>&#95;&#95;text&#95;&#95;&lt;/nowiki></code>)</li>
<li class="level1"> any of the classes <code>info</code>, <code>tip</code>, <code>important</code>, <code>alert</code>, <code>help</code>, <code>download</code>, <code>todo</code> will add a special note container with a corresponding icon</li>
<li class="level1"> the classes <code>danger</code>, <code>warning</code>, <code>caution</code>, <code>notice</code>, <code>safety</code> use safety colours (and no icons)</li>
<li class="level1"> <code>round</code> can be added to anything with a background colour or a border and will only work in modern browsers (no Internet Explorer)</li>
</ul>

</pre><p> </p>

</pre><p> </p>

<p>
&lt;WRAP important 220px left>
<em><b>Important</b></em>
</p>
<pre class="code">&lt;WRAP important>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP alert 220px left>
<em><b>Alert</b></em>
</p>
<pre class="code">&lt;WRAP alert>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP round help 220px left>
<em><b>Help</b></em>
</p>
<pre class="code">&lt;WRAP round help>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP download 220px left>
<em><b>Download</b></em>
</p>
<pre class="code">&lt;WRAP download>&lt;/WRAP>

</pre><p> </p>

</pre><p> </p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
<b>Safety Notes:</b>
</p>

<p>
&lt;WRAP danger 27% left>
<em><b>Danger</b></em>
</p>
<pre class="code">&lt;WRAP danger>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP warning 27% left>
<em><b>Warning</b></em>
</p>
<pre class="code">&lt;WRAP warning>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP caution 27% left>
<em><b>Caution</b></em>
</p>
<pre class="code">&lt;WRAP caution>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP round notice 27% left>
<em><b>Notice</b></em>
</p>
<pre class="code">&lt;WRAP round notice>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP round safety 27% left>
<em><b>Safety</b></em>
</p>
<pre class="code">&lt;WRAP round safety>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
You can use notes and boxes also inside text with spans like this:
&lt;wrap info>info&lt;/wrap>, &lt;wrap help>help&lt;/wrap>, &lt;wrap alert>alert&lt;/wrap>, &lt;wrap important>important&lt;/wrap>, &lt;wrap tip>tip&lt;/wrap>, &lt;wrap download>download&lt;/wrap>, &lt;wrap todo>todo&lt;/wrap> and &lt;wrap round box>round box&lt;/wrap> and &lt;wrap danger>danger&lt;/wrap>, &lt;wrap warning>warning&lt;/wrap>, &lt;wrap caution>caution&lt;/wrap>, &lt;wrap notice>notice&lt;/wrap>, &lt;wrap safety>safety&lt;/wrap>.
</p>
<pre class="code">&lt;wrap info>info&lt;/wrap>, &lt;wrap help>help&lt;/wrap>, ...

</pre><p> </p>

</div>

<h3>Marks</h3>
<div class="level3">

<p>
You can mark text as &lt;wrap hi>highlighted&lt;/wrap>, &lt;wrap lo>less significant&lt;/wrap> and &lt;wrap em>especially emphasised&lt;/wrap>.
</p>
<pre class="code">You can mark text as &lt;wrap hi>highlighted&lt;/wrap>, &lt;wrap lo>less significant&lt;/wrap> and &lt;wrap em>especially emphasised&lt;/wrap>.

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> This might look ugly in some templates and should be adjusted accordingly.
</p>

</div>

<h3>Miscellaneous</h3>
<div class="level3">

</div>

<h4>Indent</h4>
<div class="level4">

<p>
&lt;wrap indent>This text will appear indented.&lt;/wrap>
</p>
<pre class="code">&lt;wrap indent>This text will appear indented.&lt;/wrap>

</pre><p> </p>

</div>

<h4>Outdent</h4>
<div class="level4">

<p>
&lt;wrap outdent>This text will appear "outdented".&lt;/wrap>
</p>
<pre class="code">&lt;wrap outdent>This text will appear "outdented".&lt;/wrap>

</pre><p> </p>

</div>

<h4>Prewrap</h4>
<div class="level4">

<p>
&lt;WRAP prewrap 250px>
</p>
<pre class="code">Inside this code block the words will wrap to a new line although they are all in one line.

</pre><p> </p>

<p>
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP prewrap 250px>
<code>
Inside this code block the words will wrap to a new line although they are all in one line.

</code>

</pre><p> </p>

</pre><p> </p>

</div>

<h4>Spoiler</h4>
<div class="level4">

<p>
Here follows a spoiler: &lt;wrap spoiler>Darth Vader is Luke's father.&lt;/wrap>
</p>
<pre class="code">Here follows a spoiler: &lt;wrap spoiler>Darth Vader is Luke's father.&lt;/wrap>

</pre><p> </p>

<p>
Just select the text in the spoiler box to be able to read its content.
</p>

</div>

<p>
The following text is hidden: &lt;wrap hide>John, please revise that sentence.&lt;/wrap>
</p>
<pre class="code">The following text is hidden: &lt;wrap hide>John, please revise that sentence.&lt;/wrap>

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Warning: The text will still appear in the source code, in non-modern browsers and is searchable. Do not hide any security risky secrets with it!
</p>

</div>

<h4>Pagebreak</h4>
<div class="level4">

<p>
The following will add a pagebreak: &lt;WRAP pagebreak>&lt;/WRAP>
</p>
<pre class="code">The following will add a pagebreak: &lt;WRAP pagebreak>&lt;/WRAP>

</pre><p> </p>

<p>
This has no effect on the browser screen. A <a href="http://reference.sitepoint.com/css/page-break-after" class="urlextern" title="http://reference.sitepoint.com/css/page-break-after"  rel="nofollow">pagebreak</a> will force a new page in printouts.
</p>

</div>

<h4>Nopagebreak</h4>
<div class="level4">

<p>
The following will try to avoid a pagebreak: &lt;WRAP nopagebreak>much content, belonging together (like a long table)&lt;/WRAP>
</p>
<pre class="code">The following will try to avoid a pagebreak: &lt;WRAP nopagebreak>much content, belonging together (like a long table)&lt;/WRAP>

</pre><p> </p>

<p>
This also has no effect on the browser screen. It will try to <a href="http://reference.sitepoint.com/css/page-break-inside" class="urlextern" title="http://reference.sitepoint.com/css/page-break-inside"  rel="nofollow">avoid a page break</a> in printouts.
</p>

</div>

<h4>Noprint</h4>
<div class="level4">

<p>
&lt;wrap noprint>This text appears on the screen, but not in print.&lt;/wrap>
</p>
<pre class="code">&lt;wrap noprint>This text appears on the screen, but not in print.&lt;/wrap>

</pre><p> </p>

</div>

<h4>Onlyprint</h4>
<div class="level4">

<p>
&lt;wrap onlyprint>This text does not appear on the screen, but only in print.&lt;/wrap>
</p>
<pre class="code">&lt;wrap onlyprint>This text does not appear on the screen, but only in print.&lt;/wrap>

</pre><p> </p>

</div>

<h3>Typography</h3>
<div class="level3">

<p>
I advice against using the following typography classes. It's better to create semantic classes that reflect their meaning instead.
</p>
<ul>
<li class="level1"> font family: <code>sansserif</code>, <code>serif</code>, <code>monospace</code></li>
<li class="level1"> font size: <code>bigger</code>, <code>muchbigger</code>, <code>smaller</code></li>
<li class="level1"> font colour: <code>fgred</code>, <code>fggreen</code>, <code>fgblue</code>, <code>fgcyan</code>, <code>fgviolet</code>, <code>fgyellow</code>, <code>fggrey</code>, <code>fgwhite</code>, <code>fgblack</code></li>
<li class="level1"> background colour: <code>bgred</code>, <code>bggreen</code>, <code>bgblue</code>, <code>bgcyan</code>, <code>bgviolet</code>, <code>bgyellow</code>, <code>bggrey</code>, <code>bgwhite</code>, <code>bgblack</code></li>
</ul>

</div>

<h3>Combining and Nesting</h3>
<div class="level3">

<p>
You can combine and nest all classes and types of boxes, e.g.
</p>

<p>
&lt;WRAP box bggreen fgblack 350px right :en>
<em><b><u>Outer green box floats right</u></b></em>
</p>

<p>
&lt;WRAP 165px left>
Inner nested box floats left and is partly &lt;wrap em hi><u>em</u>phasized and <u>hi</u>ghlighted with nested &lt;wrap bigger><u>bigger</u> text&lt;/wrap> inside&lt;/wrap>.
&lt;/WRAP>
</p>

<p>
Text inside outer right box, but beneath inner left box.
</p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
&lt;WRAP round tip>
Round tip box underneath, after a <code>clear</code>.
&lt;/WRAP>
</p>

<p>
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP box bggreen fgblack 350px right :en&gt;
//**__Outer green box floats right__**//

&lt;WRAP 165px left&gt;
Inner nested box floats left and is partly &lt;wrap em hi&gt;__em__phasized and __hi__ghlighted with nested &lt;wrap bigger&gt;__bigger__ text&lt;/wrap&gt; inside&lt;/wrap&gt;.
&lt;/WRAP&gt;

Text inside outer right box, but beneath inner left box.

&lt;WRAP clear&gt;&lt;/WRAP&gt;

&lt;WRAP round tip&gt;
Round tip box underneath, after a ''clear''.
&lt;/WRAP&gt;

&lt;/WRAP&gt;

</pre><p> </p>

</div>

<h2>Language and Text Direction</h2>
<div class="level2">

<p>
You can change the language and the reading direction of a wrap container by simply adding a colon followed by the language code, like this:
</p>
<pre class="code">&lt;WRAP :he&gt;
זה עברית. ((&lt;wrap :en&gt;This means "This is Hebrew.", at least according to [[http://translate.google.com/|Google Translate]].&lt;/wrap&gt;))
&lt;/WRAP&gt;

</pre><p> </p>

<p>
&lt;WRAP :he>
זה עברית. <sup><a href="#fn__1" id="fnt__1" class="fn_top">1)</a></sup>
&lt;/WRAP>
</p>

<p>
The text direction (<code>rtl</code>, right to left or <code>ltr</code>, left to right) will get inserted automatically and is solely dependent on the language. The list of currently supported languages is taken from: <a href="http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code" class="urlextern" title="http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code"  rel="nofollow">http://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code</a>
(If you specify a language not listed there, it simply won't do anything.)
</p>

</div>
<div class="footnotes">
<div class="fn"><sup><a href="#fnt__1" id="fn__1" class="fn_bot">1)</a></sup> 
&lt;wrap :en>This means "This is Hebrew.", at least according to <a href="http://translate.google.com/" class="urlextern" title="http://translate.google.com/"  rel="nofollow">Google Translate</a>.&lt;/wrap></div>
</div>

Enable Complex Tables (what's this?)

Zusammenfassung: Minor changes

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge