jQuery outerWidth & Mac Fonts

Hi guys,

I’ve searched around for this question but not found so far. When I have an absolutely positioned div with some text in it, set to say 25px, Helvetica, font-weight:normal;

div is width:162px; height:26px;

text is “Sammy Brown”

In FF and Safari on the Mac, ‘Brown’ is on a new line. On a pc, its on the same line. Fair enough right? no surprises here what with anti aliasing etc.

When I then set: width:auto; height:auto; firebug reports the same dimensions as before but sammy brown is all one one line.

If i then do:

var $text = $(‘div.text’);

$text.css({
width : $text.outerWidth()+‘px’,
height: $text.outerHeight()+‘px’
});

We end up with height:26px, width : 162px again, and “brown” is on a new line.

Any clues? I humbly turn to the larger community for help. Doesn’t look like this is a jQuery prob… more of a … how can we work around this with jQuery?

Is it just one line of text? If it is, add this to css:

white-space: nowrap;

Thanks but unfortunately, everything is contained within a fixed width div, and I need the text to wrap once it gets too long - so nowrap is not really an option here… It would need to be either a case of resizing the font size ever so slightly or adding one pixel on to the width when it displayed :S

I’ve come across this a couple of times… and thats normally what I’ve done… unfortunately with the current set up if I did that the object would keep growing by 1px everytime you clicked (selected) the text object…

This is actually for an online floor planner… I’m neck high in OO JS :stuck_out_tongue:

I’ve tested it and can confirm that I’m experiencing the same bug on my mac. If you look at Firebug’s “computed” tab, you’ll notice that width (and height) aren’t rounded, but outerWidth() returns rounded number.

So you’ll need to get that real width instead of rounded one and use Math.ceil() to round it. You can get it with window.getComputedStyle($text.get(0), “”).getPropertyValue(“width”)

Ingenious! I’m checking it now.

Thanks mate

Fantastic mate, the following code worked:

Math.ceil(parseFloat(window.getComputedStyle($text.get(0), “”).getPropertyValue(“width”)))+‘px’

However, I now have a horribly weird difference between IE7 and FF… pah.

So finally the code looks like this… making use of $.client from http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
var w = ($.client.os!=‘Mac’)?$text.outerWidth():Math.ceil(parseFloat(window.getComputedStyle($text.get(0), “”).getPropertyValue(“width”)));

What do you guys think? anyway to make this more efficient / target browser in a better way?

Cheers
James

I’m not certain of this, but it does sound as if you expect text always to fit in the same width. If so, let me stress very heavily that you have absolutely no control over the space in pixels that any text occupies on someone else’s computer. There are so many computer and browser settings that affect font size, to say nothing of the fact that a font displays a bit “fatter” on a Mac, and that anyone without the font you specify will get a different font having altogether different dimensions.

If this is not your issue, sorry for the noise.

Cordially, David

No worries! I’m not bothered with that at all. What i need is for the browser to correctly calculate the text width after it has been rendered. So I don’t need to store something like “auto” in the object css.

Thanks tho :slight_smile:

Ah. Okay. Sorry for the rant.
Of course, absolutely positioned blocks normally shrink-wrap, but the problem child (IE6) does not co-operate very well. Anyway, I imagine you are happy with the Math.ceil() solution.

Cordially, David

yup thanks… stroke of genius.

IE6 is evil, but by now we’re used to its games… hopefully :slight_smile:

One more thing: why use OS detection when you can just check if window.getComputedStyle exists? Its much safer because that error might affect browsers for other operating systems and browser string that you use to detect browser can be easily modified. I suggest to write a simple function like this that uses best available method to get width:

$.fn.getWidth = function()
{
return (typeof window.getComputedStyle == ‘function’) ? Math.ceil(parseFloat(window.getComputedStyle(this.get(0), “”).getPropertyValue(“width”))) : this.outerWidth();
};

and then use $text.getWidth()