After my previous post I’ve taken the DOM columns project and rewritten the underlying JavaScript completely.

There’s still a lot of work to smooth off the edges, but the main thrust of the past couple evenings has been to get a routine working that uses the node structure of the DOM and avoids any browser-specific or transitional features.

To that end I now have a function that traverses the element passed to it, then inserts as many columns as needed as children of the original element.

The real trick was figuring out exactly where to split the node that represented the bottom of one column and the top of the next. I also had fun realising I’d need to build a skeletal tree in order to be ready to add a “split node” at the correct level of the hierarchy.

I’ve created another example page that uses the call maybeSplitNode('content' 180 420); – that is, split the element with the id ‘content’ into columns 180px wide and 420px high. At this stage it leaves the original text for comparison.

Future versions will attempt to use em widths and give options to fix the maximum number of columns, or to allow the height to be bounded by the viewport, or not. And then, maybe an article may see the light of day.

Stay tuned!

I’ve made some minor changes to the JavaScript on the sample page to calculate the available height if the height passed to maybeSplitNode is zero.

In addition I’ve made sure the width of the starting div is equal (276px in this case) to the widths of the resulting columns.