00268: Flow/Column directive

Summary: Flow/Column directive
Created: 2005-01-05 16:54
Status: Closed - add to cookbook
Category: Feature
From: V Krishn
Assigned:
Priority: 4
Version: 2.x
OS:

Description: I am not sure if this can be effectively and easily achieved just by using html/css. I was wondering if we could have a directive like:

(:flow columns=3 width=80% spacing=4px start:)

... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sit amet ante quis mi scelerisque imperdiet. Quisque tristique lorem in risus. Proin semper bibendum augue. ... ...

(:flow end:)

This would produce the text within it in 3 Columns, occupying total edit area of 80% and each column seperated by padding of 4px... similar to what a common word processor is able to do by selecting text and saying format->column.

I thought if same could be suggested to w3c body for a 'tag' for future implementation... :) but a long shot.... As I am not sure if an individual can suggest any implementation

I have got a rough logical idea as how this can be achieved in pmwiki.... but need to know if this is a good request in the first place.


I don't know of a good way to do this in HTML/CSS. But if anyone can come up with one, this is a good place to describe it.

--Pm

The flow directive/markup would emulate midway between div and span tags.
1. Text to be flowed is first counted. (I think there is one cookbook that does that)
2. The count is divided by 2 and and reduced to a whole no. (Say countA and countB).
3. Now there could be THREE easy methods.

 ...3a. <div width=80%>
        <div width=50% style="padding:2px">countA</div>
        <div width=50% style="padding:2px">countB</div>
       </div>

OR

 ...3b. <table width=80%><tr>
        <td width=50% style="padding:2px">countA</div>
        <td width=50% style="padding:2px">countB</div>
       </tr></table>

OR

 ...3c. Take each block countA, countB..... 
  and insert an ID or Class anchor and define the widths 
  and keep floating them left. :-)

I have used method 3c here:
http://insteps.net/
....and here with image (though a bit complex).....
http://insteps.net/
They seem to give the desired result in FireFox 9.3+ With new (:div:) this should become a bit more easier and PmWiki friendly.
~V.Krishn


I think this is one that needs to be in the cookbook as opposed to the core.

Pm