Tuesday, June 05, 2007

Tag Cloud inspired HTML Select lists

I have been working with Tag clouds and other Web 2.0 sorts of things quite a bit lately and couldn't help notice that it might be useful to use the Tag cloud "Size reflects frequency/importance" idiom in HTML select lists, so I did a little bit of experimenting (BTW, I did look for these on the Web but didn't find them: it doesn't mean they are not already out there...).

So I played with the styles of these elements, and was able to get something that looks like this:

I am not sure how the above HTML renders in your browser, but here is how it renders in mine (Firefox on Linux (Suse 10.2):

It is interesting how the browser allocates space: it seems like it uses the largest (tallest) item in the list to allocate the height of the widget, which is makes sense. But while the version of Firefox appropriately sizes the pull-down contents (i.e. above, left), when a term is selected, it is sized at the default text font size (above right), even if its font size as defined and as display in the pull-down is larger. This appears to be a bug. But it is easily possible that there is some CSS that I should be using to look after this but do not know about. I have not tested this behaviour in other browsers, but I have for other versions of Firefox (1.06,

Notwithstanding this behaviour, on experimenting with these select variations, I think that they work well and are useful in the appropriate situations.

No comments: