TagCanvas multiple font and colour support

« Return to TagCanvas page

TagCanvas 1.12 adds support for using multiple fonts and colours in the cloud. Previously the only way multiple colours were possible was by using weighting options to specify a gradient, but there was no way at all to use multiple fonts.

The easiest way I could think of to support multiple fonts and colours was to get them from the list of links used to generate the cloud. So now if you pass a null or empty value as the textFont or textColour option, the link's font or colour will be used.

Examples

All of the following examples use the same list of links to generate the clouds from. The links are the same as on the weighting options page but with some different styling, and are shown after all the examples.

Example 1 - font and colour specified

In this first example, the font and colour have been set normally using the textFont and textColour options:

TagCanvas.Start('tagcanvas1','weightTags', {
 textFont: 'Impact,"Arial Black",sans-serif',
 textColour: '#00f',
 textHeight: 25,
 /* more options */
});

The "more options" comment replaces quite a few more options that are needed to get the clouds looking like these do. View the page source if you want to see the full details.

Example 2 - colour specified, font inferred

This time I have set the textFont to null, so TagCanvas derives the font for each tag from the styles used by the tag links.

TagCanvas.Start('tagcanvas1','weightTags', {
 textFont: null,
 textColour: '#00f',
 textHeight: 25,
 /* more options */
});

Example 3 - font specified, colour inferred

For this example, I've taken example 1 and set the textColour to null, keeping the Impact font. The tag colours are derived from those used by the links.

TagCanvas.Start('tagcanvas1','weightTags', {
 textFont: 'Impact,"Arial Black",sans-serif',
 textColour: null,
 textHeight: 25,
 /* more options */
});

Example 4 - font and colour inferred

For this last cloud, I've set both textFont and textColour to null, and also turned on the weight option to use the font size of the links as the size of the tags.

TagCanvas.Start('tagcanvas1','weightTags', {
 textFont: null,
 textColour: null,
 weight: true,
 /* more options */
});

How to set up the links

Here are the tag links used by all the examples above, as an unordered list:

All of these links use a combination of classes to set their size and colour (e.g. class="purple small" for the "tagcloud" link). TagCanvas gets the styling information from the link itself (the <a href="..."> element) so any styling that you apply inside the link will be ignored - as you should be able to see from the big black "tag" link above. The tag link uses <span style="..."> to change the text style inside the link.

In my style sheet I have specified the font sizes for these classes using pixels, since Internet Explorer 8 and below will only return the font size in the units that were used to specify it (and TagCanvas needs the size in pixels). All other browsers convert units to pixels when asked for the font size.

Visited links

Finally, a quick note about visited links. If you set up your CSS so that visited links use a different colour, TagCanvas will still display the links using the colour that would be shown if the links had not been visited. This might sound like a bug, but it is because of a browser security feature - it prevents scripts from finding out where you have been by creating links and checking the colour that they would appear on the browser.

« Back to top of page Using web fonts »