CSS Text underlining too long when letter-spacing is applied?

Question

Hi,
Whenever letter-spacing is applied to something with an underline or a bottom border, it seems like the underline extends beyond the text on the right. Is there any way to do prevent the underline from extending beyond the last letter in the text?

For example:

<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>

Perhaps it'd be possible with a fixed width <div> and a border, but that is really not an option to surround every underlined element.

Thanks!

Answer 1

As far as I know, there’s nothing you can do about this. I guess most browsers add letter spacing after each letter, including the last one. There aren’t any CSS properties that offer finer control over letter spacing.

This seems to solve the issue, sort-of, in Firefox 3.6 on my Mac, but it’s not super-practical to do this for every underlined element either.

<span style="border-bottom: 1px solid black;">
    <span style="letter-spacing: 1em;">Tes</span>t
</span>

Answer 2

The problem is that "letter-spacing" adds space by adding white space after each letter, but this space belongs to the letter, and thus the last one has an extra underline that makes it look like it's expanding beyond the last letter (if you select with the mouse the last letter of the div, you'll see what I mean).

You could solve it by having the last letter of the text block not having the "letter-spacing" property. For example:

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

It's far from ideal, but unless it's just a one line text (there, you could use a negative margin to the right), I can't think of any other solution.

Answer 3

Thanks for the responses, I suppose it is a limitation of css/html. Luckily these links were being put in via php so I wrote a script to surround them appropriately, although not an entirely ideal solution, it works:

$part1 = substr($string, 0, -1);
$part2 = substr($string, -1);
$full = "<span style='letter-spacing: 1em'>".$part1."</span><span>".$part2."</span>";

(the second span for the last letter I included so I could apply a style with no letter-spacing when I needed to wrap the whole element in a link or something else with an underline etc)

Too bad the control for underlines is rather limited with html/css (especially trying to define the distance between the line and the text, thickness etc), but I suppose this works for now.