Saturday, October 27, 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 [see earlier post: Drill Clouds for Search Refinement] 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 (Update: Daniel has some info on how/if this works in different browsers), but here is how it renders in mine (Firefox 2.0.0.4 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 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 displayed 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, 2.0.0.7).

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

Update 2008 Oct 16: Oh, here is how I made this:
<select>

<option style="font-size: 80%;" value="Aggregators"> Aggregators</option>

<option style="font-size: 155%;" value="Blogs"> Blogs</option>

<option style="font-size: 80%;" value="Collaboration"> Collaboration</option>

<option style="font-size: 125%;" value="Joy of Use"> Joy of Use</option>

<option style="font-size: 80%;" value="Podcasting"> Podcasting</option>

<option style="font-size: 125%;" value="RSS"> RSS</option>

<option style="font-size: 200%;" value="Web 2.0"> Web 2.0</option>

<option style="font-size: 80%;" value="XHTML"> XHTML</option>

</select>


<select size="5">

<option style="font-size: 80%;" value="Aggregators"> Aggregators</option>

<option style="font-size: 155%;" value="Blogs"> Blogs</option>

<option style="font-size: 80%;" value="Collaboration"> Collaboration</option>

<option style="font-size: 125%;" value="Joy of Use"> Joy of Use</option>

<option style="font-size: 80%;" value="Podcasting"> Podcasting</option>

<option style="font-size: 125%;" value="RSS"> RSS</option>

<option style="font-size: 200%;" value="Web 2.0"> Web 2.0</option>

<option style="font-size: 80%;" value="XHTML"> XHTML</option>

</select>


digg this

3 comments:

Daniel Lemire said...

This is good idea. The drop-down list does not work under the latest version of Camino.

Glen Newton said...

It is possible that the way I am doing it is not the best way. Perhaps some experimentation in how exactly to successfully cross-browser implement this is needed. I had to inline the styling as Blogger would not allow me to include a style sheet just for this blog entry.

I am also wondering if the Firefox regression tests or W3C browser tests or the Acid2 test need to be expanded to include a test which includes this particular usage...

Andre Vellino said...

As you know, I'm not a fan of "clouds" generally, but I can see the appeal (for some people) of font-size as a visual clue to frequency.

In drop-down lists, why not order them in decreasing size font. Then you'd have the best of both worlds - a sequential order for people like me who like "Google Suggest", "most-frequent-first" style drop-downs and a visual order that shows the relative frequency through font-size?