W3C home > Mailing lists > Public > www-style@w3.org > January 2010

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

From: Oli Studholme <w3-style@boblet.net>
Date: Mon, 25 Jan 2010 17:15:33 +0900
Message-ID: <a015dab71001250015v1abec942la4a7fcbbda5f1ff1@mail.gmail.com>
To: www-style <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:23 GMT