DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:wrap

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:wrap [2020-02-13 16:13] – 'tabs' tag Aleksandrplugin:wrap [2024-03-07 08:53] (current) – [Demo] 223.70.253.246
Line 6: Line 6:
 email      : anika@selfthinker.org email      : anika@selfthinker.org
 type       : syntax, action, helper type       : syntax, action, helper
-lastupdate : 2018-04-22 +lastupdate : 2023-08-13 
-compatible : 2010-11-07 "Anteater"2011-05-25 "Rincewind"2012-01-25 "Angua"2012-10-13 "Adora Belle", "Weatherwax", 2013-12-08 "Binky", 2014-05-05 "Ponder Stibbons", 2014-09-29 "Hrun", 2015-08-10 "Detritus", 2016-06-26 "Elenor Of Tsort", 2017-02-19++compatible : !GreeboHogfatherIgorJack Jackrum
 depends    :  depends    : 
 conflicts  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 +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, side_note, spoiler, styler, tab, tablewidth, tip, typography, wpre, admnote 
-tags       : annotations, boxes, columns, formatting, hide, highlight, icons, language, printing, style, typography, tabs+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 downloadurl: https://github.com/selfthinker/dokuwiki_plugin_wrap/archive/stable.zip
Line 18: Line 18:
 donationurl: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=11071728 donationurl: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=11071728
 ---- ----
 +
  
 ===== One plugin to rule them all ===== ===== One plugin to rule them all =====
Line 84: Line 85:
 {{ :plugin:wrap_plugin_example10.png?300&direct}} {{ :plugin:wrap_plugin_example10.png?300&direct}}
  
-^ class name  ^ description/notes  + 
-^ __columns__ -- similar to [[columns]], [[side_note]], [[styler]], [[tip]]  || +^ class name                                                                                        ^ description/notes                                                                                                                                     
-| **''column''**  | same as ''left'' in LTR languages and same as ''right'' in RTL languages  +^ __columns__ -- similar to [[columns]], [[side_note]], [[styler]], [[tip]]                                                                                                                                                                                || 
-| **''left''**  | same as ''column'', will let you float your container on the left  +| **''column''**                                                                                    | same as ''left'' in LTR languages and same as ''right'' in RTL languages                                                                              
-| **''right''**  | will let the container float right  +| **''left''**                                                                                      | same as ''column'', will let you float your container on the left                                                                                     
-| **''center''**  | will position the container in the horizontal center of the page  +| **''right''**                                                                                     | will let the container float right                                                                                                                    
-| **''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)  +| **''center''**                                                                                    | will position the container in the horizontal center of the page                                                                                      
-| **''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) +| **''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)                    
-^ __widths__ -- :!: **experimental**, might not work as expected, includes mobile support  || +| **''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) 
-| **''half''**  | fits two columns in a row, should be used in pairs  +^ __widths__ -- :!: **experimental**, might not work as expected, includes mobile support                                                                                                                                                                  || 
-| **''third''**  | fits three or two columns in a row, should be used in triplets or together with ''twothirds''  +| **''half''**                                                                                      | fits two columns in a row, should be used in pairs                                                                                                    
-| **''twothirds''**  | fits two columns in a row when used together with ''third'', one 1/3 wide and another 2/3 wide  +| **''third''**                                                                                     | fits three or two columns in a row, should be used in triplets or together with ''twothirds''                                                         
-| **''quarter''**  | fits four columns in a row, should be used in quads  +| **''twothirds''**                                                                                 | fits two columns in a row when used together with ''third'', one 1/3 wide and another 2/3 wide                                                        
-^ __alignments__ -- similar to [[divalign]], [[columns]], [[styler]] -- :!: don't work with spans!  || +| **''quarter''**                                                                                   | fits four columns in a row, should be used in quads                                                                                                   
-| **''leftalign''**  | aligns text on the left  +^ __alignments__ -- similar to [[divalign]], [[columns]], [[styler]] -- :!: don't work with spans!                                                                                                                                                         || 
-| **''rightalign''**  | aligns text on the right  +| **''leftalign''**                                                                                 | aligns text on the left                                                                                                                               
-| **''centeralign''**  | centers the text  +| **''rightalign''**                                                                                | aligns text on the right                                                                                                                              
-| **''justify''**  | justifies the text  +| **''centeralign''**                                                                               | centers the text                                                                                                                                      
-^ __boxes and notes__ -- similar to [[box]], [[note]], [[tip]]  || +| **''justify''**                                                                                   | justifies the text                                                                                                                                    
-| **''box''**  | creates a box around the container (uses colours from ''style.ini'' +^ __boxes and notes__ -- similar to [[box]], [[note]], [[tip]]                                                                                                                                                                                             || 
-| **''info''** (was ''information'' in first version)  | creates a blue box with an info icon  +| **''box''**                                                                                       | creates a box around the container (uses colours from ''style.ini''                                                                                 
-| **''important''**  | creates an orange box with an important icon  +| **''info''** (was ''information'' in first version)                                               | creates a blue box with an info icon                                                                                                                  
-| **''alert''** (:!: was ''warning'' in previous versions)  | creates a red box with an alert icon  +| **''important''**                                                                                 | creates an orange box with an important icon                                                                                                          
-| **''tip''**  | creates a yellow box with a tip icon  +| **''alert''** (:!: was ''warning'' in previous versions)                                          | creates a red box with an alert icon                                                                                                                  
-| **''help''**  | creates a violet box with a help icon  +| **''tip''**                                                                                       | creates a yellow box with a tip icon                                                                                                                  
-| **''todo''**  | creates a cyan box with an todo icon  +| **''help''**                                                                                      | creates a violet box with a help icon                                                                                                                 
-| **''download''**  | creates a green box with a download icon  +| **''todo''**                                                                                      | creates a cyan box with an todo icon                                                                                                                  
-| **''round''**  | adds rounded corners to any container with a background colour or a border (only works in modern browsers, i.e. no IE)  +| **''download''**                                                                                  | creates a green box with a download icon                                                                                                              
-| **''danger''**  | creates a red danger safety note  +| **''round''**                                                                                     | adds rounded corners to any container with a background colour or a border (only works in modern browsers, i.e. no IE)                                
-| **''warning''**  | creates an orange warning safety note  +| **''danger''**                                                                                    | creates a red danger safety note                                                                                                                      
-| **''caution''**  | creates a yellow caution safety note  +| **''warning''**                                                                                   | creates an orange warning safety note                                                                                                                 
-| **''notice''**  | creates a blue notice safety note  +| **''caution''**                                                                                   | creates a yellow caution safety note                                                                                                                  
-| **''safety''**  | creates a green safety note  +| **''notice''**                                                                                    | creates a blue notice safety note                                                                                                                     
-^ __marks__ -- similar to [[emphasis]], [[important_paragraf]], [[importanttext]]  || +| **''safety''**                                                                                    | creates a green safety note                                                                                                                           
-| **''hi''**  | marks text as highlighted  +^ __marks__ -- similar to [[emphasis]], [[important_paragraf]], [[importanttext]]                                                                                                                                                                          || 
-| **''lo''**  | marks text as less significant  +| **''hi''**                                                                                        | marks text as highlighted                                                                                                                             
-| **''em''**  | marks text as especially emphasised  +| **''lo''**                                                                                        | marks text as less significant                                                                                                                        
-^ __miscellaneous__  || +| **''em''**                                                                                        | marks text as especially emphasised                                                                                                                   
-| **''clear''**  | similar to [[clearfloat]], should preferably be used with divs, i.e. uppercase ''%%<WRAP>%%'' +^ __miscellaneous__                                                                                                                                                                                                                                        || 
-| **''tabs''**  | if wrapped around a list of links, will show those as tabs  +| **''clear''**                                                                                     | similar to [[clearfloat]], should preferably be used with divs, i.e. uppercase ''%%<WRAP>%%''                                                       
-| **''hide''**  | hides the text per CSS (the text will still appear in the source code, in non-modern browsers and is searchable)  +| **''tabs''**                                                                                      | if wrapped around a list of links, will show those as tabs                                                                                            
-| **''noprint''**  | displays text on the screen, but not in print, similar to [[noprint]]  +| **''hide''**                                                                                      | hides the text per CSS (the text will still appear in the source code, in non-modern browsers and is searchable)                                      
-| **''onlyprint''**  | displays text only in print, but not on the screen  +| **''noprint''**                                                                                   | displays text on the screen, but not in print, similar to [[noprint]]                                                                                 
-| **''pagebreak''**  | forces a new page in printouts (not visible on the screen), similar to [[pagebreak]]  +| **''onlyprint''**                                                                                 | displays text only in print, but not on the screen                                                                                                    
-| **''nopagebreak''**  | tries to avoid a pagebreak in printouts (not visible on the screen)  +| **''pagebreak''**                                                                                 | forces a new page in printouts (not visible on the screen), similar to [[pagebreak]]                                                                  
-| **''spoiler''**  | shows white text on a white background, only to be revealed by highlighting it; similar to [[hide]]  +| **''nopagebreak''**                                                                               | tries to avoid a pagebreak in printouts (not visible on the screen)                                                                                   
-| **''button''**  | when wrapped around a link, styles it like a button  +| **''spoiler''**                                                                                   | shows white text on a white background, only to be revealed by highlighting it; similar to [[hide]]                                                   
-| **''tablewidth''**  | sets widths of tables inside to whichever width the wrap gets, partly replaces [[tablewidth]]  +| **''button''**                                                                                    | when wrapped around a link, styles it like a button                                                                                                   
-| **''indent''**  | indents the text, could be used instead of [[tab]]  +| **''tablewidth''**                                                                                | sets widths of tables inside to whichever width the wrap gets, partly replaces [[tablewidth]]                                                         
-| **''outdent''**  | "outdents" the text, could partly be used instead of [[outdent]]  +| **''indent''**                                                                                    | indents the text, could be used instead of [[tab]]                                                                                                    
-| **''prewrap''**  | wraps text inside pre-formatted code blocks, similar to [[wpre]]  |+| **''outdent''**                                                                                   | "outdents" the text, could partly be used instead of [[outdent]]                                                                                      
 +| **''prewrap''**                                                                                   | wraps text inside pre-formatted code blocks, similar to [[wpre]]                                                                                      |
  
 === Known restrictions === === Known restrictions ===
Line 145: Line 147:
     * %%//**__Big Underlined Headline__**//%% (They will look a bit different in safety notes.)     * %%//**__Big Underlined Headline__**//%% (They will look a bit different in safety notes.)
     * %%//**Small Headline**//%%     * %%//**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]]. 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]].
Line 162: Line 165:
   </WRAP>   </WRAP>
 will result in two columns next to each other, which will wrap underneath each other on smaller screens and mobile devices. 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 ==== ==== Languages and Text Directions ====
Line 181: Line 192:
 [[https://yadi.sk/i/ycbENWFjWEduTA|“Examples” (demo) in Russian]] (for v2011-05-15). [[http://pastebin.com/C9xjaEH9|Source]]. [[https://yadi.sk/i/ycbENWFjWEduTA|“Examples” (demo) in Russian]] (for v2011-05-15). [[http://pastebin.com/C9xjaEH9|Source]].
  
 +[[http://mcloud-doc.lonxun.com/wiki/playground/wrap|a demo of the plugin in China]]
 ===== Configuration options ===== ===== Configuration options =====
  
Line 241: Line 253:
 ==== Examples ==== ==== Examples ====
  
-in style.css+in userall.css:
  
 <code css> <code css>
Line 307: Line 319:
 ==== Done ==== ==== 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)}}]]+[[https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom|{{https://raw.githubusercontent.com/legacy-icons/famfamfam-silk/master/dist/png/feed.png?16x16&recache |Recent commits to Wrap Plugin (RSS feed)}}]]
 {{rss>https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom date}} {{rss>https://github.com/selfthinker/dokuwiki_plugin_wrap/commits/master.atom date}}
  
 ==== Localization ==== ==== Localization ====
  
-You can help me with translations and [[http://translate.dokuwiki.org/plugin/wrap|update the language files]]. There are two files to translate:+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/lang.php|lang/en/lang.php]] is for the explaining titles on the picker images.
Line 327: Line 339:
 ===== See also ===== ===== See also =====
  
-  * [[plugin:wrap:extensions|Useful extensions for the Wrap Plugin]]+  * [[.:wrap:extensions|Useful extensions for the Wrap Plugin]]
   * [[.wrap:extensions?do=index|Sub pages to Wrap Plugin]]   * [[.wrap:extensions?do=index|Sub pages to Wrap Plugin]]
  
Line 343: Line 355:
  
  
 +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//
plugin/wrap.1581606808.txt.gz · Last modified: 2020-02-13 16:13 by Aleksandr

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki