go.

A recent post on mezzoblue talking about Fitts’ Law has sparked a bit of research for me. Fitts’ Law, says basically:

The time to acquire a target is a function of the distance to and size of the target.

In the mezzoblue post, Dave Shea complains that Fitts’ Law cannot be applied to links within body copy without creating gaps. I employ just such a technique, though I wasn’t previously aware of Fitts’ Law. I mentioned the technique in a comment on mezzoblue and got some great feedback from others that inspired me to make some changes. Following is a recap of what I’ve learned and my conclusions.

Why?

• Fitts’ Law is beneficial from an accessibilty standpoint and a usability standpont
• small links suck
• why not?

Goals

This should start with a set of goals, so:

• Increased link target area
• No gaps in text
• use css and no extra markup

The Technique

update: 8/23/2004

The examples below use 2 extra spans to make it possible to visualize the technique (using background-color) in the same way that Opera renders it. This is necessary because of an Opera quirk that causes it to render each line in a block of text higher in the stack level than the previous line. In effect, this covers the bottom padding that we create for links. As mentioned below, this issue has been resolved.

With those requirements in mind and some experimentation I found that a {position: relative;} allowed the links to have padding extending over the surrounding text without creating line-spacing gaps, but horizontal gaps between body text and the link did occur [example 1]. As links tend to be wider than they are tall, increasing the horizontal target size is less effective than increasing the vertical size, ergo horizontal padding is unnecessary. Removing the horizontal padding, of course, removes the horizontal gaps. At this point I had the following: a {position: relative; padding: 10px 0 10px 0;} [example 2].

I posted this to mezzoblue (feeling rather heady) and got back a reply from Lachlan Hunt pointing out that this technique makes it nearly impossible for readers to select a piece of text beginning or ending either directly above or directly below a link. While I am not terribly concerned with facilitating copying and pasting from my site (it should also be noted that a larger block of text could be copyed and the excess deleted after pasting), I was convinced that I should decrease the size of the padding. While experimenting with this I noticed that the link target area seemed to extend higher above the link than it did below the link (which I believe to be because of the weighting of type toward the baseline, which is exaggerated in this case by the underline on links). Now I had: a {position: relative; padding: 7px 0 9px 0;} [example 3]. Now users had approximately half of the line of text above and below available for text selection, and half for link target.

Some of you may have caught this sooner than I, but the next obvious step was to de-pixelize this solution. This technique is a great accessibility tool, but with pixel padding, it didn’t scale with the text. I changed the styling to a {position: relative; padding: .4em 0 .55em 0;} [example 4]. You should test these values with your line-height and font. To make the clickable area visible, apply a background color to the link and then wrap the text before the link in a span and the text after the link in a different span and apply a second background color to each of those. The examples above are styled in this way.

Add the style z-index: 1;, per Lachlan’s recommendation and we have: a {position: relative; padding: .4em 0 .55em 0; z-index: 1;} [example 5]. This fixes the Opera quirk described above.

Caveats

• This technique works as desired in IE6 Win and Gecko, update: and Opera - Thanks Lachlan but Opera 7 covers the padding below the link, meaning some of the benefit is lost. I would be interested in hearing about other browsers.
• In link-rich text, it may not be clear which link a user is above. This technique should always be used with an appropriate a:hover style.
• If you use background colors or images for your links, this technique may not be for you. Sorry, Dave.
• Selecting and copying text, as mentioned above, may be hindered slightly.

Thanks

Thanks to all at mezzoblue who inspired, assisted with, or complimented this technique.

Update

As mentioned in the comments for this post, Lachlan Hunt has made some suggestions for changing this technique. One of his changes is mandatory, as it solves the Opera issue. The other is an interesting alternative that makes text selection easier, and makes “sticky links” rather than a larger link target to start with. I like it and depending on your goals and site design, it may work better. Here are the changes:

• a {z-index:1;} This solves the Opera issue and has no down-side. This should be incorporated into the technique, and has been in the original post above.
• the second technique involves removing the padding from a and adding it to a:hover, thereby making a link its original size until moused-over. I would call it a sticky link. See Lachlan’s page for more details.

Thanks Lachlan, for the great ideas.