Visual Link Typing in Tinderbox  2/16/05

I'm back from the hiatus after Tinderbox Weekend Boston. I told a few folks that I'd send them this trick that I'm starting to spread across t.org. I found a neat way to visually display the type of a link when it is exported to html. I got it from wikipedia, where they use it for external links. An example is at the bottom of almost every wikipedia page.

The idea is to use css to define classes of the tag. You'll give it some extra space to the right of the content (say, 10 pixels) and then set a graphic as the background of the tag. Meanwhile in Tinderbox you're setting a class for each link so that Tinderbox exports the links with the right class from your stylesheet.

That's the idea. The practicalities aren't much more than that. Take or make a graphic for each kind of link. This wikipedia example is for an external link, and indicates that the link is leaving (your) site:


Then, in your stylesheet, set up a class for the link. Use the style to get extra space after the content on the right and the image as background:

a.external { background: url(external.png) center right no-repeat; padding-right: 13px; }

Then, in each link, specify the class:

You're set. When your link is exported, it will come out in the html as:

       <a href="http://www.wikipedia.org" class=external>link</a>

and it will look like:


Note that this will only work for links where you have specified the class. If you've already made a lot of links without a class, you will have to go back and specify the class (or make separate styles for each class you've specified). And, somewhat frustratingly, there is no way in Tinderbox to act on links en masse with stamps or like you can with notes.