Two columns

Sometimes it is good for readability to have content in two columns,especially with large blocks of texts.

Instead of using the regular syntax to form columns, you can rewrite the content of the page with javascript and have it displayed as a two column table.

By adding a little link somewhere in your template you can reformat the page by clicking on it. The content will be split in two columns, keeping paragraphs nicely together.

See working example

• Add the following code to your /conf/userscript.js:

function paragraphsplit(div_id){
	var cfrom = document.getElementById(div_id).innerHTML;
	var alreadydone = cfrom.indexOf("paragraphconverted");
	if(alreadydone == -1){
		document.getElementById(div_id).innerHTML=paragraphconvert(document.getElementById(div_id).innerHTML);
	}
}
 
function paragraphconvert(cfrom){
	var len = cfrom.length;
	var hardmid = len/2;
	var mid = cfrom.indexOf("<p>", hardmid ); // for mozilla
	if (mid == -1){mid = cfrom.indexOf("<P>", hardmid );}	// for IE (capitalizes tags in output of innerhtml
	if (mid != -1){
		var leftcolumn=cfrom.substring(0,mid); 
		var rightcolumn=cfrom.substring(mid,len); 
		return("<table id=\"paragraphconverted\" width=100%><tr><td valign=\"top\" width=50% style='border-spacing:0px;padding:12px;border:1px solid grey;'>"+leftcolumn+"</td><td valign=\"top\" style='padding:12px;border:1px solid grey;'>"+rightcolumn+"</td></tr></table>");
	} else {
		return(cfrom);
	}
}

• Change main.php in your template directory

Replace

  <div class="page">

with

  <div class="page" id="dokuwiki">

• Add somewhere in your template a the following link:

<a onclick="paragraphsplit('dokuwiki');" title='View as Two Columns'>≡≡</a>

• This modification will not affect the wiki-content itself, and is not available in HTML output.
• Long lines in nonparsed blocks will not break in IE
• Refresh your page to get back to normal format.
• The ≡≡ characters are UTF-8, so watch your encoding of main.php
• This code is just a proof of concept, it can be better/faster/nicer..

• There is no need adding the id to the template if you would use a getElementbyClass() like

  function getElementbyClass(classname){ //George Chiang, Sitepoint
   var inc=0;
   var alltags=document.all? document.all : document.getElementsByTagName("*");
   for (i=0; i<alltags.length; i++){
     if (alltags[i].className==classname)
       customcollection[inc++]=alltags[i];
   }
  }

  . getElementbyId() was just faster..

• The same effect can be achieved better through the CSS3 element “column-count.” See http://alistapart.com/articles/css3multicolumn for more details.

• Or simply add the columns plugin … as many columns as you like … width of all columns and each individual column is configurable