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

Comments

Anonymous said…
This is good idea. The drop-down list does not work under the latest version of Camino.
29 October, 2007 13:29
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...
29 October, 2007 13:43
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?
04 November, 2007 17:06
Post a Comment

Popular posts from this blog

Java, MySql increased performance with Huge Pages

[Resources updates: 2010.07.07 , 2009.11.03 , 2009.05.27 ] Long running, large memory, high performant applications often have special needs with respect to their memory management. On Linux, Solaris and other modern OSes, the translation look-aside buffer ( TLB ) - whose page size of 4k for many CPUs/OSes - becomes a scalability issue in these extreme conditions. In order to get around TLB scalability issues, huge page sizes are used to reduce the impact on performance. This can be of use to installations with large scale Java, MySql and other large memory applications. 300% improvement : " Well, in my case, I was able to achieve an over 3x improvement in my EJB 3 application, of which fully 60 to 70% of that was due to using large page memory with a 3.5GB heap. Now, a 3.5GB heap without the large memory pages didn't provide any benefit over smaller heaps without large pages. Besides the throughput improvements, I also noticed that GC frequency was cut down by two-third
Read more

IBM on Linux: "Lean, clean, and green"

IBM developerWorks has an article ( Linux: Lean, clean, and green: How GNU/Linux is becoming more eco-friendly - 26 May 2009) which examines some of the Green benefits of the Linux operating system. It focuses primarily on the low resource demands Linux has on systems (as well as its support for older systems), thus extending the life of machines that would otherwise be junked. Also discussed is virtualization and aspects of the Linux OS that reduce power consumption in servers. Additional Green Linux and Open Source resource: LessWatts.org - Saving Power on Intel systems with Linux Ten ways Linux can turn you green . 2009 Green Computing With Open Source Software . 2009 Open Source is Already Naturally Green: Fewer Lawyers, Fewer Showers, More Real People Add Up to Big Green Wins . 2009 Is Linux the Greenest Operating System . 2009 Go Green, Save Green with Linux . 2008 Linux captures the 'green' flag, beats Windows 2008 power-saving measures 2008 Canadian Green Party
Read more

Postscript coding resources

Image
Postscript is one of my favourite programming languages. Resources for postscript programming are not too common, and are always popping up and then disappearing, as things tend to do on the Web. Here is a snapshot of links that work: I will do my best to keep them up-to-date.
Read more