Donut Age: America's Donut Magazine

To type or not to type (links)

Perceptive readers with good CSS2 support (sorry, IE users) may have noticed funny things going on with my links lately. I have been playing with the :before and :after pseudo-elements and the content property to generate markers distinguishing different kinds of links. Why? Well, the notion of "typed" links (i.e., links that express not just a generic connection but a specific relationship between the linked elements) has been floating around hypertext theory for a long time. I've also long been intrigued by what George Landow (in "The Rhetoric of Hypermedia," 1991) identified as the need for a "rhetoric of departure" in hypertexts. Both of these ideas tie into a number of practical accessibility/usability web design issues regarding providing appropriate visual and textual cues to aid user navigation. Rather than tackle all at once, I've just concerned myself one small problem: distinguishing between internal and external links within a web site.

It so happens that Tinderbox allows you to assign types to links, and I've actually been typing links in my posts as either 'internal' or 'external' since I began the blog. Actually, that's not true. Tinderbox's link types are mostly useful inside the program (for example, they become the labels on links in Map View). I've been assigning my links classes, which export as the HTML class attribute, providing a simple hook for CSS styling. Strictly speaking, I guess I am typing the anchors of my links for presentational purposes, rather than the links themselves for semantic purposes.

So anyway, I've had the ability to label links for a while, but it has taken me a long time to decide how to visually distinguish the two link types. I found it difficult to come up with symbols or icons that would clearly express internal-ness and external-ness without getting in the way of reading. I'd been thinking of some kind of arrow character to indicate external links — like the arrow-in-circle used in iTunes — but the fancier arrow characters are erratically supported across different fonts. Finally, I settled on sticking a subscript greater-than sign at the end of the link (CSS selector a.external:after, value content: >). For internal links, I was even more at a loss, so I tried using my favicon image (selector a.internal:after, value content: url(/favicon.ico)). These worked, but I found both to be irritating after a while: they interrupted text flow too much and messed up my line-heights as well. So my new solution is to follow the convention used on some wikis of putting external links in square brackets (selector a.external:before, value content: [;; and selector a.external:after, value content: ];) and nothing for internal ones. It's still a little jarring, especially when I have a lot of links in a post, but it's better than before.

All of this begs the question of whether it's actually worth it to put these cues in at all. I'm not sure. Experienced web surfers know to mouse over a link to see its destination (and I am also giving title attributes to my links to give pop-up info on their destinations), while inexperienced readers are unlikely to immediately recognize the bracket-convention I'm using. This seems like another of those areas where providing one kind of usability aid (and I do think recognition of internal vs. external links is helpful) may be at odds with another level of usability (in this case basic readability), and i don't think the collective wisdom of web design has produced a reliable convention. So I may continue fiddling with link styling or just go back to not distinguishing the links at all.