divalign2 plugin

The divalign2 plugin provides a means to specify paragraph alignment in DokuWiki pages, using nothing more than CSS directives.

Some years ago, Jason Byrne contributed with his first plugin, divalign which allowed a simple, unobtrusive syntax to use a feature that the original DokuWiki engine lacked: paragraph alignment. At some point at Dec. 2008, in order to implement some fixes and suggestions, after failing to contact the author to provide some fixes and suggestions, I decided to implement a fork. Here are the results.

Feel free to use and comment (see ⇒Discussion).

Quick Questions: So you want to…
…install this plugin?	→ Instructions
…check the syntax?	→ Syntax
…see the plugin in action?	→Demo
…read a legal disclaimer?	→ Legalese
…read about the author?	→The Author
This plugin is a fork of the divalign plugin by Jason Byrne.
2010-03: Now with corrected toolbar!

Quick Update: With the release of the newest version of DokuWiki (2010-11-07), this plugin won't work correctly. I'm informed of the required changes and will have them done as well as other improvements for the next major release of the plugin. — ryan.chappelleLuis Machuca Bezzaza
ryan.chappelle

Temuco, Chile 2010/11/09 17:43

Quick Update: As of 2010-11-11, the newer version of the plugin works with both Anteater release and earlier, provided the platform is correctly installed; however, in the meantine until all fixes are completely tested, this plugin will be tagged as experimental.

Download and install the plugin using the Plugin Manager using the URL given above. Refer to Plugins on how to install plugins manually.

The link above will always point to the latest version. Should you need a previous version, check the Demo section for more information.

Note: if you are using the newest DokuWiki release (Anteater), you must install the newest version; previous versions will no longer work with DokuWiki releases Anteater or later.

Align Left:

#;;
This is aligned left.
#;;

Align Right:

;;#
This is aligned right.
;;#

Align Center:

;#;
This is aligned center.
;#;

Align Justify:

###
This text is justified.
###

If you want to align more than one paragraph at once just add a blank line at the beginning (see Syntax details however):

;;#

This paragraph is right-aligned.
  
And this one is, too!
;;#

Want to see the plugin in action?

(Neo) Official Demo Site. Language is Spanish but the content is obvious and any web translator (yes, even Google Translate) shall do mince with it.

A second demo, which will be made publicly available to try, is held at http://ryan.gulix.cl/tests/doku.php/divalign. If you want to check the behaviour of the plugin with the older DokuWiki releases, check http://ryan.gulix.cl/tests_old/doku.php/divalign instead.

Here you can see some of the alignment modes supported by this plugin:

	The divalign2 plugin shown in action with DokuWiki's default template. Note how there is a difference between the default alignment (justify) and the left-alignment.
	Effect of setting multiple paragraphs to the center-alignment. In versions previous to the 2010-11-07 release, this is now easier to do.
	Effect of setting multiple paragraphs to the right-alignment. If you happen to know Spanish, it also serves as a display of my pathetic poetic skills.

The toolbar for edit mode. A picker is presented from which the alignment mode can be chosen out of the four options.

If you want to contribute with a demo of this plugin, contact me.

The plugin now incorporates a Toolbar Picker Button for the alignment mode. You click it, and are presented with four buttons to set left, center, right or justified alignment. Thanks to faraday for new, sleeker icons intergarted in the divalign-2.3 versions and above.

Any browser that supports CSS will align the content correctly. Not much of an issue here.

Text renderers and devices happily ignore this plugin.

Because it uses the same syntax, this plugin is marked as both similar and conflicting with the original Divalign. All tags are the same and have similar requirements except where noted below.

Unlike the original plugin, divalign2 requires that the enter/exit syntax take place at the beginning/end of their lines, respectively. Thus, the following should not work:

;;#
This text will not be aligned right. ;;#

Also, in DokuWiki versions previous to 2010-11-07, if you want to wrap two or more paragraphs inside an aligned section, you must do this by providing a blank line after the entering syntax, like this:

;;#

This is a small preamble aligned right.

And this is some more text aligned right. This paragraph, and any other following, 
would follow the right alignment, until a line containing the string ';;#' is found again.

;;#

Known Issue: Take into consideration however than when exporting to the ODT and text renderers and using the above trick, this plugin will eat away any paragraph after the first one. Therefore if exporting to other renderers is important, you must apply the syntax to each paragraph.

This plugin may interfere with other plugins that float content (such as gchart). This is untested however.

The changelog will be updated later. In short:

• PType=='stack' is fixed and now generates the correct code for DW releases 2010-11-07 and hopefully later.
• a small fix that imitates the same behaviour with DW versions previous to 2010-11-07, hopefully fixing the generation of invalid XHTML code.
• new toolbar icons courtesy of faraday.
• the “blank line at the end” requirement for multiple paragraphs is removed for DW releases 2010-11-07 and hopefully later.

• a syntax mode for margins?

I'm Luis Machuca, a DokuWiki fan who's collaborated with some templates and plugins before, making suggestions and the like. This is my first attempt at forking an available development and improving upon it.

Luis Machuca Bezzaza¹⁾ is a Chilean Developer who has released plugins for DokuWiki ever since 2008. He takes somewhat-active participation in the DokuWiki User Forums, where he moderates the somewhat-active-as-well Spanish Discussion. He can be sometimes found at the DokuWiki IRC channel as well, shamelessly promoting his plugins. In his spare time he functions as the Secretary (S) of his city's LUG, Gulix as well as trying to contribute to the overall internet culture.

Other DokuWiki Plugins by Luis Machuca Bezzaza (a.k.a ryan.chappelle@DW Forums)Luis Machuca Bezzaza ryan.chappelle Temuco, Chile
progrecss	display progress bars alongside text
tooltip	add tooltips (info balloons) to text or special words
clock	display the time in DokuWiki
countdown	show the remaining time to an event
divalign2	…you are here now
gil	display currency conversions from Yahoo services
hide	hide text from immediate view
noiewarning	warn users that they are using the shitty IE browser
coming soon	control the formatting and properties of external links
coming soon	use Mediawiki-style template substitution in wiki pages

Unzipping the file from the download link above will give you the source code. It is free, in the GPL definition of the word.

This plugin (“divalign2”) © The Author.

“divalign2” is developed part-for-fun, part-for-learning, of The Author's free will and during his spare time. It is released “as-is” under the terms of the GPL 2 License. The Author is not affiliated to the core DokuWiki staff, he just knows the guys and likes them (er… their work). The Author takes no responsibility for damages caused by inadequate use of “divalign2”, but tries to stay available for a nice chat if particular issues related to “divalign2”'s domain are presented. Insert standard lorem-ipsum like legal disclaimer and/or waiver of warranties here and you know the drill.

Credits are given to Jason Byrne for the original implementation of this plugin, which you will find under divalign. Also to C. Smith, W. Torres, Teto and Krat (all registered user of this wiki) for the suggestions provided to the original plugin, which triggered this development.

Feel free to ask questions here. However, please check the original plugin page before doing so. Greetings.

The option ### for justify don't work. To make it work change in /lib/plugins/divalign2/syntax/justify.php the line 81 from:

 $renderer->doc .= '<div class="divalign-2'.$align.'">'; 

to

 $renderer->doc .= '<div class="divalign-'.$align.'">'; 

Acknowledged, and will be corrected shortly. Thanks. Corrected in the new version 2.0. — Luis Machuca B. 2009/08/22 06:13

FROM: Michel
Nice to be able to align text the way you want! Is there a way to make it work with tables?

Hi. I haven't studied the possibility of making it work with tables because the wikitext parsing for tables differs from that of normal wikitext (with things such as, no paragraphs, flow-on linebreak, forced start- and end-line delimiters, etc). The only way I think this plugin can work with tables is via the extended syntax that is made available by the exttab2 plugin. – — Luis Machuca B. 2009/04/11 08:23

Just installed this. The icon on the toolbar shows X but the other align symbols show up when the X is clicked. Used plugin manager. How do I fix it? Thanks. peterennis (at) yahoo (dot) com 2009/09/29

Yeah, that was a mistake I made with the path to the icon file. In script.js, you can check the following line:

"icon" : "../plugins/divalign2/images/pleft.png",

and change as follows:

"icon" : "../../plugins/divalign2/images/pleft.png",

I'll upload a fixed version of the script file with the next release. – — Luis Machuca Bezzaza 2009/10/08 19:58 Corrected as of the latest version.

winky 2010/02/17 IMHO the Toolbar-Buttons are broken. For example, if I click “center” I get:

;#;\n;#;\n

instead

;#;

;#;

Hi. I've taken note of this issue, but can only reproduce it with the latest version of DokuWiki. Let me check for a while before releasing a patch or something. – — Luis 2010/02/17 22:14

Hi Luis, the following mod fixed it for me:

diff script.js script.js.org
13,15c13,15
< align_da2_arr['#;;\n\n#;;\n']    = 'pleft.png';
< align_da2_arr[';#;\n\n;#;\n']    = 'pcenter.png';
< align_da2_arr[';;#\n\n;;#\n']    = 'pright.png';
---
> align_da2_arr['#;;\\n#;;\\n']    = 'pleft.png';
> align_da2_arr[';#;\\n;#;\\n']    = 'pcenter.png';
> align_da2_arr[';;#\\n;;#\\n']    = 'pright.png';

thx a lot for this plugin. another problem exists with the toolbar-icon (will not be displayed correctly). if i have some time i try to fix it too. — winky 2010/03/05 11:30

OK, that was quite simple … to fix the toolbar-icon you have only correct the path from ../ to ../../:

20c20
<                     "icon":"../../plugins/divalign2/images/pleft.png",
---
>                     "icon":"../plugins/divalign2/images/pleft.png",
24c24
<                     "icobase":"../../plugins/divalign2/images"};
---
>                     "icobase":"../plugins/divalign2/images"};

— winky 2010/03/05 12:24

Thanks for the clarification, winky. The plugin should now load the correct graphics. — Luis 2010/03/30 19:34

Hi Luis, the following mod fixed the broken Toolbar-Buttons for me:

original:
align_da2_arr['#;;\\n#;;\\n']    = 'pleft.png';
align_da2_arr[';#;\\n;#;\\n']    = 'pcenter.png';
align_da2_arr[';;#\\n;;#\\n']    = 'pright.png';
---
change to:
align_da2_arr['#;;\n' + '\n' + '#;;\n']    = 'pleft.png';
align_da2_arr[';#;\n' + '\n' + ';#;\n']    = 'pcenter.png';
align_da2_arr[';;#\n' + '\n' + ';;#\n']    = 'pright.png';

and it works fine.

— slowbu 2010/03/17 14:42

Since troubles seem unsolved (at least for me) here my complete script.js, that fixed icon and usage errors:

var align_da2_arr = new Array(); 
align_da2_arr['#;;\n' + '\n' + '#;;\n']    = 'pleft.png';
align_da2_arr[';#;\n' + '\n' + ';#;\n']    = 'pcenter.png';
align_da2_arr[';;#\n' + '\n' + ';;#\n']    = 'pright.png';

if(window.toolbar!=undefined){
  toolbar[toolbar.length] = { "type":"picker",
                    "title":"Alignment",
                    "icon":"../../plugins/divalign2/images/pleft.png",
                    "key":"",
                    "list": align_da2_arr,
                    /* subdir of lib/images/ where images found.*/
                    "icobase":"../plugins/divalign2/images"};
 }

Remark the ../../ for the icon path but only ../ for the icobase path.

— mathias 2010/03/30 16:05

Thanks for the clarification, Mathias. The plugin should now load the correct graphics. Moreso, it should also output the syntax with the buttons correctly (the issue seems to be that apparently DokuWiki doesn't like to have no words between syntaxes, so I just add the word “Paragraph” ). I'd like to hear from you testing this though. — Luis 2010/03/30 19:34

I don't like the buttons, so i worked out my own. Just click and download them, if u like them: . Additionally i work on a new version of this, because there are many problems i get. But the basic idea is very good!

— faraday 2010/06/07 11:44

Looks nice, maybe I can use them. Also, what problems? Could be of help to get some pointers to improve development. — Luis 2010/06/07 14:50

Thx. My problem: i renamed the tags into <left></left>, <justify></justify> and so on. Works nice and because of this i dont get any problems. BUT: I have got many problems with the <p>-Tag in HTML (→ Paragraphs). Sometimes there are only line breaks and sometimes there are other mysterious paragraph-problems. For example: I made up this code:

Du kannst einen Text
<left>linksbündig,</left>
<right>rechtsbündig</right>
<center>zentriert,</center>
<justify>oder im Blocksatz</justify>
anzeigen lassen.

  Du kannst einen Text
  <left>linksbündig,</left>
  <right>rechtsbündig</right>
  <center>zentriert,</center>
  <justify>oder im Blocksatz</justify>
  anzeigen lassen.

And i get many problems. With the original php plugin code, i get something like this: The last line is only a line break, although i built in a paragraph (dokuwiki-style). I compared it with the wrap-plugin and it works perfectly with it. i dunno where is the significant difference.

That seems to me you haven't paid attention to the Syntax details or the demo page; there I made a warning that unlike the original divalign, this plugin requires the syntax markings at the beginning of their own lines, instead of in a run-in fashion. That was a decision I took when trying to make the plugin mark multiple paragraphs in a row (if I did it the other way, that is simply using PType=“block” and throwing the paraghraphs all together, the plugin would break XHTML compliance, not to mention eat info with the ODT renderer and the like).
If you don't need ODT compatibility for multiple paragraphs, or don't mark multiple paragraphs at a time with align syntax at all, it should suffice to remove the \n's in each of the regexes in the syntax files, and change the plugin PType to “block” in common.php, to bring back original!Divalign's component behaviour. Check your use case here.
I hope I can solve the issue one day for all sides. Also I'll be crediting you for the buttons in the next major release. — Luis 2010/06/08 00:58

I wrote a new plugin, which solves any problem with the paragraphs. In my opinion it is very clear too. Here you can find it: alignment

Plugin download link is down?? — Garrett 2010/08/27 12:48

The server is going to be replaced so I'm looking for another place (server & domain) to host the download page. — Luis 2010/08/29 06:05 Corrected

Would you add a way change text width?

A lot of blogs use 500-600px text column width. But Dokuwiki text is too long horizontally.

ex. <DivAlign2 500px>

I've thought about this, but it would be difficult to guarantee that the sizes are correct (parsing units, not exceeding the viewport and what not). Considering that such cases would work site-wide, I think customizing $DOKU_CONF/userstyle.css is better fit for such tasks. — ryan.chappelleLuis Machuca Bezzaza
ryan.chappelle

Temuco, Chile 2011/02/02 18:50