DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:divalign2

This is an old revision of the document!


DivAlign2 Plugin

Compatible with DokuWiki

"Rincewind", "Weatherwax", "Hrun"

plugin Align content left, right, center, or justify

Last updated on
2013-08-12
Provides
Syntax
Repository
Source
Conflicts with
divalign, emphasis

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to alignment, divalign, wrap

Tagged with !experimental, odt, style, toolbar, typography

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

Usage

Simple syntax used to align text or images.

:!: Note that you can achieve the same results by using the wrap plugin.

Download and Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

The link above will always point to the latest stable version. Should you need a previous version, check the plugin's webpage.

Note: Versions of Dokuwiki previous to Rincewind are no longer supported.

Syntax

Align Left:

#;;
This is aligned left.
#;;

Align Right:

;;#
This is aligned right.
;;#

Align Center:

;#;
This is aligned center.
;#;

Align Justify:

###
This text is justified.
###

:!: Previous versions of this plugin had a “Misfeature” that allowed to align multiple paragraphs at once by wrapping the first and last of them with the syntax. This is no longer supported.

Not working as expected, Example : ;#; Nothing Happens, this text is not centralize!! ;#;

Also when trying to align headers #;;

Will you marry me .. Tuli :-)

#;;

  1. The markup has to be on separate lines
  2. You cannot have markup in headers

Demo

Want to see the plugin in action? Demos are upcoming.

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

Other Details

Edit Toolbar

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 integarted in the divalign-2.3 versions and above.

script.js

The script.js packaged with this plugin no longer displays the picker icons. If this is your case, use this as a replacement:

script.js
if(window.toolbar!=undefined){
  var align_da2_arr={
  '#;;\nParagraph\n#;;\n': 'pleft.png',
  ';#;\nParagraph\n;#;\n':  'pcenter.png',
  ';;#\nParagraph\n;;#\n':  'pright.png',
  '###\nParagraph\n###\n':  'pjustify.png'};
  toolbar[toolbar.length] = { "type":"picker",
                    "title": "Alignment",
                    "icon" : "../../plugins/divalign2/images/pleft.png",
                    "key"  : "a",
                    "list" : align_da2_arr,
                    "icobase" : "../../plugins/divalign2/images"};
                    /* In some configurations, you must add "lib" to path*/
                    /* "icobase" : "../../lib/plugins/divalign2/images"}; */
  }
 
/* end of divalign2/script.js *

In addition, you should probably remove /divalign2/action.php, which duplicates the picker toolbar item with the same problems as the original script.js. — Myron Turner 2016-09-20 03:05

Browser Support

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

ODT export should render with the correct alignment.

Text renderers and devices happily ignore this plugin.

Syntax details

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. ;;#

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

Changelog

FIXME The changelog will be updated later. In short:

2013

  • Removed multiple-paragrapgh misfeature.
  • Refactored code.
  • Still pending: toolbar update.

2011

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

Source Code

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

Legalese

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; and to Benjamin Schiller for testing with the more recent DokuWiki versions.


Discussion

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


Hello, Since a few months I've been workign on a docuwiki and text-alignment certainly fails… I've found your plugin but it doesn't seem to work on Deterius. Is there a possibility to fix the compattability for the newer version of Dokuwiki too? I've noticed that the last update was in 2013 (3 years ago).

All the best,
— User unknown 2016/06/26

If you do not get this plugin to work you might also like to try the wrap plugin. It supports alignment too, I think. — LarsDW223 2016/06/26


Hi!

You can simplify your code by writing one class that extends the DokuWiki_Syntax_Plugin class. And let next all your other syntax classes extend this first pluginsyntaxclass. So you can use parent::method() to access the parent methods you like to reuse. And when methods are the same in the subclasses, you can leave then even out, because they inherited automatically.

Good luck! — Klap-in 2013/01/23


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.chappelle 2011/02/02 18:50

—-

I updated the action.php file to make the toolbar works with Angua version of DokuWiki
2012/02/28 19:13

action.php
<?php
/**
 * @file       divalign2/action.php
 * @brief      Action component for the divalign2 plugin.
 * @license    GPLv2 (http://www.gnu.org/licenses/gpl.html)
 * @version    2.3
 * @date       2010-11-11
 * @author     Luis Machuca Bezzaza <luis [dot] machuca [at] gulix [dot] cl>
**/
 
if(!defined('DOKU_INC')) die();
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'action.php');
require_once(DOKU_PLUGIN. 'divalign2/common.php'); // for common functions
 
class action_plugin_divalign2 extends DokuWiki_Action_Plugin {
 
    /**
     * return some info
     */
    function getInfo(){
        return DW_common_divalign2::getInfo('action');
    }
 
function register(Doku_Event_Handler $controller) {
    // detect DokuWiki version
   /* $v= file_get_contents(DOKU_INC. 'VERSION');
    if ($v===false) return;
    // else
    $v= substr($v, 0, strpos($v, ' '));
    $v_is_old= intval ($v < '2010-11-07');
    //echo "<pre> Version: $v : $v_is_old</pre>";
    if ($v_is_old) {
        $res= $controller->register_hook('TPL_CONTENT_DISPLAY', 'BEFORE', $this, 'fix_par_stack', array ());
        }
    if (0) $res= $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'divalign_toolbar', array ());*/
    $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'divalign_toolbar', array ());
 
    }
 
function divalign_toolbar(& $event, $param) {
  $event->data[] = array (
            'type' => 'picker',
            'title' => 'Alignement',
            'icon' => '../../plugins/divalign2/images/pleft.png',
            'list' => array(
                array(
                    'type'   => 'format',
                    'title'  => 'Left',
                    'sample' => '#;;\n Left\n#;;',
                    'icon'   => '../../plugins/divalign2/images/pleft.png',
                    'open'   => '#;;\n',
                    'close'  => '\n#;;',
                ),
                array(
                    'type'   => 'format',
                    'title'  => 'Center',
                    'sample' => ';#;\n Center\n;#;',
                    'icon'   => '../../plugins/divalign2/images/pcenter.png',
                    'open'   => ';#;\n',
                    'close'  => '\n;#;',
                ),
                array(
                    'type'   => 'format',
                    'title'  => 'Right',
                    'sample' => ';;#\n Right\n;;#',
                    'icon'   => '../../plugins/divalign2/images/pright.png',
                    'open'   => ';;#\n',
                    'close'  => '\n;;#',
                ),
                array(
                    'type'   => 'format',
                    'title'  => 'Justify',
                    'sample' => '###\n Justify\n###',
                    'icon'   => '../../plugins/divalign2/images/pjustify.png',
                    'open'   => '###\n',
                    'close'  => '\n###',
                ),               
            )
        );
    }
 
}
//... and that's all
plugin/divalign2.1546699670.txt.gz · Last modified: 2019-01-05 15:47 by turnermm

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