8

I am trying to calculate the total width of a span in HTML including both the left and right bearings of the first and last characters. I have already tried Javascript's offsetWidth and jQuery's width & outerWidth functions, but neither of them return the correct value I am seeking. Here is an example of what I mean. Running in Firefox the calculated width is 135px, while measuring with the Web Developer plug-in gives an actual width of 141px.

Edit

Here is what I've tried, and here are the values it gives me: offsetWidth = 135 jQuery.width() = 135 jQuery.outerWidth() = 135

None of them are calculating the 6px overhang on the 'f' (which would make the width 141).

gyoda
  • 1,053
  • 2
  • 11
  • 22
  • Inline elements like `` don't really have a meaningful "width" value, at least not conceptually. – Pointy Dec 14 '10 at 16:35
  • I'm trying to calculate the width of the text. I've tried a variety of html elements including span and width, none of which give me the result I'm seeking. All of them exclude the width of the overhang on the 'f' when returning the width. – gyoda Dec 14 '10 at 16:50
  • 1
    For reference - This is what I get: http://img189.imageshack.us/img189/4508/97030781.png -- The width in the result and the firebug inspector agree, but the width doesn't include the entire last "f" – gnarf Dec 14 '10 at 17:02

3 Answers3

2

Sadly, no straightforward solution exists because it is outside the realm of the box model -- the browser itself does not recognise the overhang of the letter 'f' when rendering layout. You can see this for yourself if you wrap the <span> within a <div> of width: 135px, and overflow: auto -- No scrollbars appear, the overhang is simply cut off. This is also why firebug reports the width without the overhang.

As @Aaron pointed out, the problem doesn't exist with monospaced fonts as no letters extend beyond the character's fixed-width box in those fonts.

The only way to find the real width is through pixel-based (rather than layout-based) methods. I can think of one way: draw the same text, with the same font, onto a <canvas> element, and measure the pixel width that way.

David Tang
  • 92,262
  • 30
  • 167
  • 149
1

Actually, I think the problem is the font itself. I changed the jsfiddle to font-family: monospace, and it was all contained within the grey box (and calculated correctly, as a result). Even leaving it as the original font, but changing the sample to "aaa" or "mmmm" worked great. It's just the "f" glyph in that font that's blowing it for you.

Unfortunately, I don't know of a DOM attribute that accounts for that. Not sure that's much of an answer, but I don't have access to comment on the question and thought these findings might help point you in the right direction...

Aaron Simmons
  • 126
  • 6
0

How about jQuery's .width()?

<span id="spanId"> ... </span>

and

var w = $('#spanId').width();
Dutchie432
  • 28,798
  • 20
  • 92
  • 109
  • 1
    Just so I don't look stupid, OP originally did not list `.width()` - what does `.width()` return? 0 or false result? – Dutchie432 Dec 14 '10 at 16:33
  • Do you have any CSS formatting that may preventing the `span` from sizing to its content? – Dutchie432 Dec 14 '10 at 16:34
  • .width() returns the same value as .outerWidth(), both of which are a false result – gyoda Dec 14 '10 at 16:34
  • Just a shot in the dark - have you tried changing your `span` to a `div` – Dutchie432 Dec 14 '10 at 16:35
  • 1
    No it doesn't do anything. I'm actually trying to calculate the right bearing of the letter 'f'. http://www.catch22.net/book/export/html/25 – gyoda Dec 14 '10 at 16:47
  • is this really possible at all... you actually calculate the width of html elements and not the width of a character.. it will be different with different font-styles. Can you please tell what are you really trying to do with the "right bearing of the letter 'f'" – Varun Dec 15 '10 at 04:31
  • I think the point is that the element the OP is trying to measure isn't resizing properly, based on the font and specific letters therein. – Dutchie432 Dec 15 '10 at 14:18