Small problems with border-bottom for links, resolvable with outline-bottom?

Hi All,

Links are traditionally indicated via {text-decoration: underline;},
however this can decrease legibility when the underline overlaps text
descenders (g,p,q etc), or when it’s too close to a detailed character
(eg complex kanji on XP). To get around these problems, it’s become
fairly popular for designers to replace underline with border-bottom,
for example {text-decoration: none; border-bottom: 1px solid
#something;}. This also gives more flexibility as the underline’s
color, width, style and distance from the text can be altered,
allowing for eg far nicer :hover styling.

While I prefer the flexibility of this technique it has two problems.
The border takes space and the accumulation of 1px increments can
easily throw a layout with a strong vertical measure (a layout based
on a baseline grid) out of whack. This is especially noticeable with
side-by-side columns of text, so will become more apparent as CSS3
multi-column support increases.

My second problem is that text-shadow is rendered above border, which
depending on the font can lead to the shadow overlaying the border.
While minor this appears at first glance to be a rendering error.

Both of my problems would be solved by being able to use something
like outline-bottom instead of border-bottom. It wouldn’t take any
space and so wouldn’t affect the layout, and it would be drawn above
text-shadow and not be affected by it. I’m sure there’s a reason why
outline is not able to be specified per-side like border, but I don’t
know what it is. However I can see the benefit in either allowing
outline to be specified on a per-side basis, or some other way of
achieving the same effect (such as a setting for border).

I’d appreciate any input on why outline is like it is, or how these
problems could be solved. I’d also love to hear from anyone who thinks
it’s a good idea ;-)

Thank you for your time

peace - oli


PS please let me know if you’d like to see mockups of these problems

Received on Monday, 25 January 2010 08:16:25 UTC