Thirteenth Parallel /archive/column-script/
The column script can be used to split an amount of text or html into an array of fragments that fit in the desired width and height. The effect is that you can now let your text flow from one column into the next, as if you were laying out an article for a newspaper or magazine.
Dan first came up with the crazy proto version of this script, I took it from there to the most incredibly glorious and ravenous computing engine it is now.
To use the column script, all you need to do is include the script on the page,
and add this div, which is used by the script:
<div id="divSizer"></div>
Then you can call the splitText method with three arguments:
Columns.splitText(text, width, height)
The width and height arguments specify the maximum size
the blocks of text may have. The text argument is the string of text
or html that you wish to split.
If you wish to use html strings, it’s recommended to use validated xhtml with correctly nested and closed tags. The unclosed tags that were legal in html 4.01 could wreak havoc on your pages. (if you’re not sure how to get started with xhtml, check out the introduction to using xhtml in the styleguide of the New York Public Library)
The splitText method then returns an array that contains the snugly fitting strings
of text. If the browser does not support document.getElementById or
innerHTML or cannot find divSizer, the splitText method will return
null.
Example
1: shows how to use the splitText method, and a simple way of using the array
returned by splitText. The text in the example was taken from the w3c CSS2 specification.
There is one extra thing you can do with this script. As you may have noticed on
this site, in not every column the text runs all the way to the bottom. That’s
because we’ve used a tag with a specific class that is automatically recognized
and removed by the script. By including the following span tag in the
text, you can force content following it to continue in the next column:
<span class="colbreak"></span>
The colbreak class does not need to have any associated stylerules in a stylesheet,
but we have given it absolute positioning and made it invisible. This was done to
ensure the tag interferes as little as possible with the text, even when a browser
has to display the unscripted version of the same document.
Since this is a component article and not a tutorial, I won’t tell you much more about how the script works internally. However, there are some interesting things inside like a basic html parser and a number of array prototype functions. There are plenty of comments in the code, so go ahead and see what you can learn from it. One last thing: the lib_columns.js file.