Font width issues

[Brian Moon]

Hi,

This is not exactly OOCSS related, but it does affect my ability to
create objects that render the same on different browsers.

We have a UI element on the site that is limited in width and height.
The content in these elements is created by our content team to the tune
of 400-500 new items per day. To help make sure the content they create
fits, we created hidden elements in the CMS tools that mimic the size
restrictions and use DOM information to tell them when a headline is too
long, etc. The problem is, font width varies greatly between browsers.

See: http://screencast.com/t/oCJCMCoEBuG

So, I am curious, how, if at all, is anyone dealing with this problem?
Chrome, Safari and Opera on Mac appear to render all fonts I tested
wider than any other other browser/OS combination. They are consistent
amongst themselves leading me to believe they are using a common API on
the Mac to render fonts.

Thanks for any information.

--
Brian.
http://brian.moonspot.net

[Jos Hirth]

The web isn't print.

Well, in this case you can add some error margin. The fluctuation in
your example was below 2%.

A 3% margin will probably work fine.

You can also use text-overflow:ellipsis as safety net.