3

In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.

Why is that? How can I fix it?

3 Answers 3

1

Why is that?

Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.

How can I fix it?

The only solution that has worked so far for me is this:

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.

5
  • For "monospace bold", span.offsetTop is 9 where the other spans have offsetTop == 8. Odd. Mar 12, 2010 at 12:41
  • Is there a way to find out which font the browser is using for monospace? Mar 12, 2010 at 12:58
  • Okay, found it. The problem is "Courier New". My guess is that for the bold variant, the baseline is at a different offset. Mar 12, 2010 at 13:00
  • @Aaron: interesting question. Googling got me these stats: codestyle.org/css/font-family/sampler-Monospace.shtml No idea where they've got them from or whether they can be trusted.
    – ЯegDwight
    Mar 12, 2010 at 13:03
  • @Aaron: great find. I'm removing "Courier New" from my answer.
    – ЯegDwight
    Mar 12, 2010 at 13:05
1

It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.

It should fix itself if you choose a different colour contrast.

Update

alt text http://img690.imageshack.us/img690/421/opticaleffect.png

4
  • I think that the shift happens because the baseline for the bold variant is one pixel above the baseline of the normal font. My problem right now is that the bounding box for the whole line is one pixel bigger than that of other lines. Mar 12, 2010 at 12:57
  • I suppose you didn't test my suggestion so I enclose a screenshot. Open the image in a new window; StackOverflow seems to resize pics. Mar 12, 2010 at 13:09
  • On my screen, the baseline is correctly aligned but the green background of the middle text is shifted down by one pixel. Which version of Windows is that? Which browser? Which font? Mar 12, 2010 at 16:00
  • Windows XP SP3, Firefox 3.6, Courier New Mar 15, 2010 at 10:26
0

The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.

The solution is to request "Courier" as a font and to avoid "Courier New".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.