13

Definitely not a huge issue, but a little bit jarring on the latest Chrome release under Ubuntu Linux 9.10. Yes, technically still Beta (by Google's standards) but the bug appears to be in WebKit, which is definitely not.

If there's 3 or more digits in the view count, it overflows its box and hits the title of the question in some cases.

Oh No!! Overlap!!

This still happens if I zoom the whole page in/out so it's not like I just have some non-standard font sizes set.

Hope this helps.

Improve this question
3
  • 2
    ... you're a strange one, random :) But thanks for including the pic... somewhat ;)
    – Adrian Petrescu
    Commented Dec 16, 2009 at 3:05
  • Was just a minor its/it's fix. jjnguy fixed up your screenshot.
    – random
    Commented Dec 16, 2009 at 3:08
  • 2
    I wish I were as skilled at freehand paint as you @random. All I could manage were some arrows.
    – jjnguy
    Commented Dec 16, 2009 at 4:17

3 Answers 3

Reset to default
13

100% font width related.

Here's a screenshot of your Linux results (bottom) with Firefox/Windows (top):

linux / windows

As you can see -- the font being used by the browser is absurdly wide.

The stylesheet defines:

Trebuchet MS, Helvetica, sans-serif

This has come up before, but it's really hard to "fix" without changing the font, as the Windows and OSX fonts the browser chooses are fairly similar (if not identical) in width.

EDIT: based on recommendations here I changed it to:

Trebuchet MS, Liberation Sans, DejaVu Sans, sans-serif

Improve this answer
11
  • Sure, I can try that :) But I'm not convinced that's the issue because Firefox 3.5 (on the exact same Linux install) doesn't show this issue whereas it should presumably be using the same fonts. I'll give it a try and post back, though!
    – Adrian Petrescu
    Commented Dec 16, 2009 at 3:53
  • 1
    Actually, yeah, looks like you're right. I changed Chrome's default sans-serif font from "Arial" to "FreeSans" and the issue went away. Funny. Is this still something that could be fixed on Stack Overflow's end though? Seems like a lot of people may not be using that rather small list of fonts you have there. Either way, thanks for the speedy reply :)
    – Adrian Petrescu
    Commented Dec 16, 2009 at 3:56
  • 2
    sure, just tell me what font to define in the stylesheet.. as long as it works for some or hopefully most Linux users we can define it there as a fallback
    – Jeff Atwood
    Commented Dec 16, 2009 at 3:58
  • 1
    The one I can confirm as working is called FreeSans and is part of the GNU FreeFont collection ( gnu.org/software/freefont ) and is thus included with a large proportion of Linux distributions, so its ubiquitous. Here's a screenshot of what SO looks like with FreeSans: img695.imageshack.us/img695/3696/screenshot2a.png It would be awesome if this was added to the fallback list since I wouldn't have to change my default font for everything else just to make SO look right :) Thanks!
    – Adrian Petrescu
    Commented Dec 16, 2009 at 4:03
  • 3
    For Linux you can use Liberation Sans too.
    – Jaec
    Commented Dec 16, 2009 at 4:09
  • 1
    I just read up on the fonts Jaec recommended. They're included in Ubuntu, and their claim to fame is being metric-compatible with Microsoft's fonts. So maybe this is an even better suggestion than my FreeSans.
    – Adrian Petrescu
    Commented Dec 16, 2009 at 4:21
  • I think Red Hat's Liberation fonts were supposed to fix this exact problem. Have you tried installing them. It'll probably fix font problems with many more sites.
    – wm_eddie
    Commented Dec 16, 2009 at 4:30
  • To answer eddie's question, I have them installed. They're just not being used as the fallback sans-serif font unless I explicitly set them as such in the Chrome config.
    – Adrian Petrescu
    Commented Dec 16, 2009 at 4:35
  • +1 for Liberation Sans; it's a beautiful and well sized font. The other Liberation fonts are nice, as well, but the sans is my favorite.
    – Gazzonyx
    Commented Dec 16, 2009 at 5:10
  • 1
    In my opinion the best fix is to install ttf-mscorefonts. Without that I see minor font problems on many sites. BTW: Chromium 4.0.226.0, Ubuntu 9.10 and mscorefonts on my end and works fine.
    – Ludwig Weinzierl
    Commented Dec 16, 2009 at 7:18
  • @jeff Couldn't you just use Google Fonts?
    – xxmbabanexx
    Commented Mar 11, 2013 at 23:53
7

Despite widespread belief to the contrary, a font stack of Arial, Helvetica, sans-serif will not fall back to the default sans serif font on a typical linux box (Ubuntu included). Instead, the Helvetica font gets hijacked and replaced with something the distro thinks is reasonably similar. To find out what font that is, just run 'fc-match helvetica' from the command line. On default configured Ubuntu systems, this will generally be Nimbus Sans L, which does not match Helvetica very well, imho.

So you can either remove Helvetica from your stack (not usually a good option) or you can add an explicit linux replacement, such as Liberation Sans or DejaVu Sans. (Liberation is the better choice metrically and gaining popularity but not as common as DejaVu or Bitstream Vera).

Improve this answer
1
  • +1 I didn't know about fc-match.
    – Ludwig Weinzierl
    Commented Dec 16, 2009 at 7:22
3

The problem is with the fonts you're specifying in your CSS here and their order (Trebuchet MS, Helvetica, sans-serif).

The browser will go through the fonts in this list and use the first one it knows about. On Windows, Mac OS X, and some Linux installs (those with the Microsoft fonts installed) this will be Trebuchet.

For some odd configurations where Trebuchet is not installed on the machine but Helvetica is, you will get Helvetica. This might happen on some very old, default installs of Mac OS X that did not include Trebuchet (I don't have a box up to check).

On Most default Linux installs, the browser will end up on "sans-serif", which is whatever has been configured as the default sans font in the browser. Since different fonts have different weights for a given point size, this could end up being nearly any width.

There really are two solutions to this. One, change the design to not assume a fixed width for a piece of text -- this would probably require some significant layout changes. The other, specify a fonts list that has fonts of equal or similar weights, in order of preference, where each platform you want to support is guaranteed to have at least one of these fonts installed.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .