Alex Rivera | Logout

Designing a different kind of tag cloud

Asked 2010-05-03T23:14:10.523
10

Rather than having a bunch of links that are all different sizes, I want all of my tags to be the same size. However, my goal is to minimize the amount of space required to make the cloud, aka minimizing the number of lines used.

Take this example:

example
(source: stevethomas.com.au)

Looks like any normal tag cloud. However, look at all that extra space around the 'roughdiamond' tag, which could be filled in by other tags like 'stone' down near the bottom, which could effectively eliminate an entire extra line from the cloud.

How would I go about getting the words to fill in whatever space possible above them before starting a new line? I'm not talking about reorganizing them to find the absolute minimum number of lines required. If I was going through the list in the image, 'pendant', 'howlite', and 'igrice' would go to line 1 filling it up, 'roughdiamond' would go to line 2 because line 1 is full, 'tourmaline' would go to line 3 because it can't fit on lines 1 or 2, same with 'emberald', but 'pearl' would go to line 2 because it can fit there since there is extra space. I figure there would probably be some way of doing this in CSS that would simply cause the links to collapse into any fillable space it can fit in to.

Edit
Report

1 Answer

6

I doubt this is possible in CSS since this requires specific computations to rearrange the words optimally.

The problem you are actually looking to tackle is the 2 dimensional bin packing problem with bins of equal size and items of variable size.

As mentioned in this answer to a question about bin packing, sorting your items from largest to smallest and then fitting smaller words in between the large ones will usually result in a fairly good approximation. You will have to try it out with the types of words you'll be using to find out whether this will work for you (his approach may result in many small words grouped at the bottom of your cloud).

answered 2010-05-03T23:25:12.230

Your Answer