TagCanvas multiple font and colour support
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.