Metainformationen zur Seite
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
playground:playground [2009/12/14 20:25] – Maik | playground:playground [2022/08/06 20:15] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== | + | ====== |
- | Hier könnt ihr nach belieben mit der Syntax des Wikis herum probieren. | ||
- | |||
- | |||
- | |||
- | ====== Examples for the Wrap Plugin ====== | ||
- | |||
- | ===== Basic syntax ===== | ||
- | |||
- | An uppercase **%%< | ||
- | |||
- | <WRAP classes width : | ||
- | | ||
- | " | ||
- | </ | ||
- | |||
- | A lowercase **%%< | ||
- | |||
- | <wrap classes width : | ||
- | |||
- | :!: Please note, some things **won' | ||
- | * **alignments** (including alignments generated by changing the text direction) | ||
- | * and **widths** | ||
- | if the according wrap isn't floated as well. | ||
- | |||
- | ===== Classes and Styles ===== | ||
- | |||
- | |||
- | ==== Columns and Floats ==== | ||
- | |||
- | You can have columns easily by adding the class '' | ||
- | <WRAP column 30%> | ||
- | |||
- | <WRAP column 30%> | ||
- | |||
- | // | ||
- | |||
- | You can emulate a big headline with italic, bold and underlined text, e.g. | ||
- | < | ||
- | |||
- | // | ||
- | |||
- | A smaller headline uses no underlining, | ||
- | < | ||
- | |||
- | If you need text that is bold and italic, simply use it the other way around: | ||
- | < | ||
- | </ | ||
- | |||
- | <WRAP column 30%> | ||
- | |||
- | // | ||
- | |||
- | Normally you would only need the class '' | ||
- | |||
- | * **'' | ||
- | * **'' | ||
- | * **'' | ||
- | * **'' | ||
- | |||
- | </ | ||
- | |||
- | <WRAP column 30%> | ||
- | |||
- | // | ||
- | |||
- | You can set any valid widths (but only on uppercase %%< | ||
- | |||
- | ^type^e.g.^note^ | ||
- | ^'' | ||
- | ^'' | ||
- | ^'' | ||
- | |||
- | A **table** inside a column or box will always be **100% wide**. This makes positioning and sizing tables possible. | ||
- | |||
- | </ | ||
- | |||
- | <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 ...</ | ||
- | |||
- | <WRAP clear></ | ||
- | |||
- | ... to prevent that, you should simply add | ||
- | <WRAP clear></ | ||
- | after your last column. | ||
- | |||
- | You **can** use the same options with small %%< | ||
- | |||
- | :!: 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:// | ||
- | |||
- | All of those options will also work in the [[#boxes and notes]] wraps (see below). | ||
- | |||
- | |||
- | ==== Alignments ==== | ||
- | |||
- | You can use these different text alignments: | ||
- | |||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | <WRAP centeralign> | ||
- | |||
- | Center aligned text ... | ||
- | </ | ||
- | |||
- | <WRAP rightalign> | ||
- | |||
- | ... and right aligned. | ||
- | </ | ||
- | |||
- | < | ||
- | <WRAP centeralign> | ||
- | |||
- | Center aligned text ... | ||
- | </ | ||
- | |||
- | <WRAP rightalign> | ||
- | |||
- | ... and right aligned. | ||
- | </ | ||
- | </ | ||
- | |||
- | :!: You cannot add alignments to spans. | ||
- | |||
- | |||
- | ==== Boxes and Notes ==== | ||
- | |||
- | <WRAP round box 570px center> | ||
- | |||
- | //**__round box 570px center__**// | ||
- | |||
- | * '' | ||
- | * any of the classes '' | ||
- | * '' | ||
- | </ | ||
- | |||
- | |||
- | <WRAP info 220px left> | ||
- | |||
- | // | ||
- | |||
- | <WRAP info></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP tip 220px left> | ||
- | |||
- | //**Tip**// | ||
- | |||
- | <WRAP tip></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP important 220px left> | ||
- | |||
- | // | ||
- | |||
- | <WRAP important></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP warning 220px left> | ||
- | |||
- | // | ||
- | |||
- | <WRAP warning></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP round help 220px left> | ||
- | |||
- | // | ||
- | |||
- | <WRAP round help></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP download 220px left> | ||
- | |||
- | // | ||
- | |||
- | <WRAP download></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP todo 220px left> | ||
- | |||
- | // | ||
- | |||
- | <WRAP todo></ | ||
- | </ | ||
- | |||
- | |||
- | <WRAP clear></ | ||
- | |||
- | You can use notes and boxes also inside text with the lowercase %%< | ||
- | <wrap info> | ||
- | <wrap info> | ||
- | |||
- | |||
- | ==== Marks ==== | ||
- | |||
- | You can mark text as <wrap hi> | ||
- | |||
- | You can mark text as <wrap hi> | ||
- | |||
- | :!: This might look ugly in some templates and should be adjusted accordingly. | ||
- | |||
- | ==== Miscellaneous ==== | ||
- | |||
- | === Indent === | ||
- | |||
- | <wrap indent> | ||
- | |||
- | <wrap indent> | ||
- | |||
- | === Outdent === | ||
- | |||
- | <wrap outdent> | ||
- | |||
- | <wrap outdent> | ||
- | |||
- | === Spoiler === | ||
- | |||
- | Here follows a spoiler: <wrap spoiler> | ||
- | |||
- | Here follows a spoiler: <wrap spoiler> | ||
- | |||
- | Just select the text in the spoiler box to be able to read its content. | ||
- | |||
- | === Hide === | ||
- | |||
- | The following text is hidden: <wrap hide> | ||
- | |||
- | The following text is hidden: <wrap hide> | ||
- | |||
- | :!: 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! | ||
- | |||
- | === Pagebreak === | ||
- | |||
- | The following will add a pagebreak: <WRAP pagebreak></ | ||
- | |||
- | The following will add a pagebreak: <WRAP pagebreak></ | ||
- | |||
- | This has no effect on the browser screen. A [[http:// | ||
- | |||
- | === Nopagebreak === | ||
- | |||
- | The following will try to avoid a pagebreak: <WRAP nopagebreak> | ||
- | |||
- | The following will try to avoid a pagebreak: <WRAP nopagebreak> | ||
- | |||
- | This also has no effect on the browser screen. It will try to [[http:// | ||
- | |||
- | === Noprint === | ||
- | |||
- | <wrap noprint> | ||
- | |||
- | <wrap noprint> | ||
- | |||
- | === Onlyprint === | ||
- | |||
- | <wrap onlyprint> | ||
- | |||
- | <wrap onlyprint> | ||
- | |||
- | ==== Typography ==== | ||
- | |||
- | I advice against using the following typography classes. It's better to create semantic classes that reflect their meaning instead. | ||
- | |||
- | * font family: '' | ||
- | * font size: '' | ||
- | * font colour: '' | ||
- | * background colour: '' | ||
- | |||
- | |||
- | ==== Combining and Nesting ==== | ||
- | |||
- | You can combine and nest all classes and types of boxes, e.g. | ||
- | |||
- | <WRAP box bggreen fgblack 350px right :en> | ||
- | |||
- | //**__Outer green box floats right__**// | ||
- | |||
- | <WRAP 165px left> | ||
- | |||
- | Inner nested box floats left and is partly <wrap em hi> | ||
- | </ | ||
- | |||
- | Text inside outer right box, but beneath inner left box. | ||
- | |||
- | <WRAP clear></ | ||
- | <WRAP round tip> | ||
- | |||
- | Round tip box underneath, after a '' | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | < | ||
- | <WRAP box bggreen fgblack 350px right :en> | ||
- | |||
- | //**__Outer green box floats right__**// | ||
- | |||
- | <WRAP 165px left> | ||
- | |||
- | Inner nested box floats left and is partly <wrap em hi> | ||
- | </ | ||
- | |||
- | Text inside outer right box, but beneath inner left box. | ||
- | |||
- | <WRAP clear></ | ||
- | <WRAP round tip> | ||
- | |||
- | Round tip box underneath, after a '' | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | ===== Language and Text Direction ===== | ||
- | |||
- | 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: | ||
- | |||
- | < | ||
- | <WRAP :he> | ||
- | |||
- | זה עברית. ((<wrap :en>This means "This is Hebrew.", | ||
- | </ | ||
- | </ | ||
- | |||
- | <WRAP :he> | ||
- | |||
- | זה עברית. ((<wrap :en>This means "This is Hebrew.", | ||
- | </ | ||
- | |||
- | The text direction ('' | ||
- | (If you specify a language not listed there, it simply won't do anything.) | ||
- | |||
- |