PDA

View Full Version : HOW do they do THIS? Adaptive number of columns, with continouos text!


tbr
05-05-2007, 01:40 PM
Take a look at this:

http://www.zeit.de/2005/11/Titel_2fUnterschicht_11

How do they do that? The text continues through the columns with exactly the right number of words in each one!

I can only think of one way... make one giant column, make sure the line height is set with a pixel value... then clip it to show only a part of the column, defined as a multiple of the line height. Duplicate the content of the column, position it next to the first column, and clip it so it begins where the last one ended, then repeat until the whole column is done.

Have you seen this anywhere else? I think it's really cool and useful, must try to copy it... :D

Vladdy
05-05-2007, 09:24 PM
Whatever they are doing it is not worth repeating. Horizontal scrolling is annoying. And when you try and change the font size in FF (Ctrl+/-) all hell breaks loose.

tbr
05-05-2007, 11:01 PM
I actually spent some time duplicating this today after the formula I wrote above! It works pretty much like theirs but I managed to make it cleaner and less intrusive IMO. I get an irritating vertical scroll bar on the page no matter what I do though... it wants to allow me to scroll all the way down to the hidden content of the leftmost column.

And no need to be grumpy "Vladdy", flowing columns like that is a pretty standard feature in any regular print material - there are many situations where it can be useful on the web to. The technique doesn't have to be used to make a horizontal layout...