All Things Tagxedo

The Official Blog of Tagxedo - Tag Cloud with Styles

HTML cloud without Silverlight

In the last post, I briefly described the new HTML cloud functionality.  In the latest version of Tagxedo (just uploaded), I decided to remove the remaining jQuery magic and make it a pure, embeddable image map using HTML only.

The significance?

  • You should be able to embed it in your blog even if scripts / plugins are disallowed or disabled.
  • Your entire audience, regardless of browser and OS, whether they have Silverlight or not, should be able to view your cloud.

Here's an example.  All words are clickable and lead to the corresponding Google searches (or to the Tagxedo page if you click "www.tagxedo.com").

 
Wanna try it yourself on your blog? Here's the step-by-step:
  1. Make a Tagxedo (of course)!
  2. Click "Save" and use the "Html Cloud (Experimental)" option.
  3. Choose the dimensions (e.g. width of 600px or less, height of 400px or less).
  4. Save both the image (e.g. tagxedo.jpg) and the Html (e.g. tagxedo.html).
  5. Upload the image to your site and copy the actual URL.  You can also use any 3rd party site, such as the wonderful free image hosting site Imgur.
  6. Edit tagxedo.html to refer to this URL
  7. Cut and paste the portion of HTML code in tagxedo.html to your index.html between the <div> tags, inclusive

That's it!  And since there is no Javascript involved, this method should be accepted by all blogging platforms.

Two caveats:

  • The links are always Google queries.  This will be improved later, and for now, you can customize your links by editing tagxedo.html directly (global search-and-replace).
  • The words don't animate.

Last but not least, HTML purist may wonder...  why not just use pure image-free HTML (CSS + @fontface)?  That's a good question.  Actually I have tried that and the short answer is that it doesn't work (well).  At least not in any compatible or consistent way.  I guess I'll explain that in a separate blog post.

Posterous + Latest Updates

Welcome to "All Things Tagxedo", the official Tagxedo blog now hosted by Posterous!  Now you get all the goodies that comes with a "real" blogging platform -- Search, comments, tags, RSS, and more.

I have written about 10 posts in the temporary "blog", which have now all been reposted.

The following is a list of recent updates since I last posted:

(1) Make a Tagxedo, Quick! -- If you haven't been to the homepage lately, I encourage you to do so.  Now you can quickly create a Tagxedo in mere seconds!  Enter a URL, Twitter ID, delicious ID, news keywords, search terms, or an RSS-ready URL (e.g. a typical blog), hit enter, and voila!

More specifics about what data is used by Tagxedo to create the cloud:

URL -- the webpage
Twitter ID -- latest 100 posts.
Delicious ID -- top 100 delicious tags (including frequencies).
News keywords -- Google News RSS feed
Search keywords -- Bing search RSS fee
RSS -- the corresponding RSS feed of the URL

(2) [Experimental] HTML cloud -- while Silverlight is required to build Tagxedo, you can now create a clickable tag cloud that is solely based on HTML and Javascript.  Go to "Save", figure out the desired dimensions of the tag cloud, and save both an image (must be named "tagxedo.jpg") and the corresponding HTML ("tagxedo.html").  Now just open the HTML and you have a fully working clickable Tagxedo that everyone can see!

I am not sure what to do with this yet, hence this is just an experiment.  Though this sounds nice in theory (no plugin required), the image is at least 2X larger in size than the corresponding Silverlight player, and the words don't animate.  Is this acceptable?  Useful?

There are more ways to create HTML clouds.  For example, (a) use only plain text and CSS magic (only works with standard web fonts and "horizontal" orientation), and (2) use Html5 Canvas + SVG font.  The killer problem (even for (a)) is that font rendering is inconsistent across browsers -- and HTML5 and better web standard won't solve this problem -- and when the words are off, they may either create holes or overlaps in the word cloud, potentially turning a visually stunning cloud into an eyesore.

I don't know, I'm still looking into this.  I'd like to get some feedback on this.

(3) Custom Shape -- you can continue to edit a shape after you have "accepted" it and used it.  Yeah, sometimes the shape looks good until you put it in action.

(4) Hard Boundary -- now you can specify whether the boundary of the shape is soft (the default) or hard.  Hard boundaries cannot be violated, which at times helps making the shape stands out more.  The disadvantage is that only words that exactly fit will be accepted, hence potentially leaving some regions completely unfilled.

That's it for now.

[Repost 5/28/2010] - Classic Cloud

What is the one Tagxedo feature that you love the most? I heard many said good things about the user experience, Jpg export, large selection of fonts and themes, abundance of knobs, and the history mode. But to me, I love Tagxedo's shape handling capability the most, by far.

Fitting words into shape is a very hard problem, and the mathematics and engineering behind it is complex. In the FAQ, I mentioned that there is a tradeoff between how words are sized, and how tightly the words fit the shape (see the discussion about "Emphasis" and "Tightness"). For better shape fitting, Tagxedo chooses a default emphasis of 0.60. In a more "standard" approach where font sizes are proportional to the frequency, the emphasis should be 1.00 instead (e.g. Wordle).

I'm a big fan of Wordle, and I appreciate the visual impact of a higher emphasis as shown in the Wordle clouds. Important words are prominently highlighted, loud and clear. So I decided to add a "Classic" mode to Tagxedo. When you select the "Class Cloud" -- as if you just choose another shape -- there are some adjustment to the parameters behind the scene, and the end result is a word cloud more in the style of Wordle. To go back to the "Tagxedo" mode, just choose a shape!

Visually stunning just the same, only in different ways. Give it a try!