Create a tag cloud of specific dimensions

Question

Greetings,

I'd like to create an HTML tag cloud inside a box whose width and height are absolutely determined.

I want the text within to fit most efficiently--so if the text is simply one word, the word would be large and fill the box's full width (and as much of its height as possible). If there were four words, they would take up proportionally less space, but still fill the box as much as possible.

Hyphenation isn't necessary; however, it will be necessary to break longer strings into separate lines. If there are many words, for instance, it'd be more efficient to have several evenly-sized lines instead of a long single line (with a small font size).

This is tricky because I don't know the pixel dimensions of strings as HTML displays them. Can anybody help me with my calculations? (The known values, from the HTML/CSS, are: box width x, box height y, font size f, font line-height l, and font letter-spacing s, and font-family m).

I could measure the letters of individual fonts, but that would be really inefficient. Is there an easier way to measure the x and y height of a word, based on the variables above?

Added bonus: I want to display this tag cloud using the full area of the body element. If possible, I want the words to be center-aligned vertically and horizontally within the body. I can code this if I can figure out how to construct the cloud.

Thanks!

I should add: I know the easy fix is probably to use a monospace font like Courier. But, for the challenge (and ultimately for aesthetics), I want to use Georgia.

Answer 1

You can put your cloud in iframe with no scrollbars, borders, fixed line height and fixed height :-). For example, there are room for 5 lines of tags, so the 6th line will not be visible.

The bad thing is that your few last tags could be hidden. Of course You can sort tags from bigger to lower, than you'll make sure that most important tags will be always visible.

Answer 2

There's no 'easy' way to do this. There are a few solutions, though, if you're willing to throw some script at it.

If you wrap each tag in a <span>, frex, you can measure the width of the <span> in javascript, figure out the ratio of font-size to width, and then adjust the font-size so that the width is where you want.

As for centering in a page, text-align:center will horizontally center inline elements (like text or images). Block elements can be centered, if they have a definite width (you don't have to know the width, they just have to have one, like a display:block <img> does) by setting the left and right margins both to "auto".

Vertical centering is more difficult, and can only be done in two ways right now:

1. If you know the height of the element, you can do "position:absolute; top:50%; margin-top: -(half the height);", where you substitute in the appropriate number and unit for (half the height). Don't forget the negative sign!
2. If you don't know the height, you can exploit the ability of table cells to vertically align things. Either wrap it in a table and set the to be vertical-align:middle, or even better (if you can ignore IE7 and earlier), set the container to be display:table-cell and then use vertical-align:middle.

Answer 3

Have you searched for Flash based tag clouds?