3

I've been looking all over for a way to get the width of an element where it isn't rounded. The reason for wanting this is that I have several elements floated left with display inline-block and I am trying to autosize the text within them so that they use up the entire width of the container div. I am doing it like this:

  1. Pick a small text size such as 1
  2. Make all of the text that size
  3. Add up the width of all of the floated elements
  4. If it is smaller than the width of the container, increment the font size by a small value
  5. Repeat 2-4 until you reach the maximum size

The problem is that there is always space left over that isn't being used. I believe this is because when I increment the font size by small amounts (ie. 0.01) to get an accurate size. The widths of the elements don't change because it is rounding down. I can keep incrementing and they wont change until it decides to round up and then to total width is over the limit. Here is a JSFiddle showing what I'm talking about:

http://jsfiddle.net/Pkws3/

The javascript might be a bit confusing but basically to save time it starts with large increments of the fontsize and then as it reaches the target size it'll make the increments smaller to be more accurate.

I've tried using:

$(this).width()
parseFloat($(this).css("width"))
window.getComputedStyle

But none of them seem to work.

SeanA
  • 724
  • 7
  • 8
  • 1
    Do you understand that something on screen can only be a whole number of pixels wide? Fractional pixels can be simulated by two cooperating items next to each other, but a single element standing on it's own can only be a whole number of actual pixels. – jfriend00 Dec 13 '12 at 04:08
  • width, etc. will always return integers, I believe it won't return floating point value. – kennypu Dec 13 '12 at 04:11
  • according to this, it is browser specific, thus you won't always get floating point value: http://stackoverflow.com/questions/3603065/do-not-round-width-in-jquery – kennypu Dec 13 '12 at 04:11
  • @jfriend00 Yes I know that during rendering things are measured in whole pixels and that's fine it's just there an certain cases in the example I gave where there is more than 5 pixels of empty space which could easily be divided up and make each of the divs an extra pixel wide. This just doesn't happen because every time I calculate a width it slices it off and throws off the calculation in the beginning which gets compounded and leads to big margins of error in the end. – SeanA Dec 13 '12 at 04:38
  • @kennypu so is there another way I could do this such as a function to determine string length as float with a given font and font-size? – SeanA Dec 13 '12 at 04:39
  • Do you think that individual characters can be fractional pixel widths? I don't think that's possible. Thus a sequence of N characters will only grow by a multiple of N pixels at a time. – jfriend00 Dec 13 '12 at 04:54
  • If they couldn't do that why would they accept a floating point value for the font size, I'm pretty sure it can be achieved through the way that the browsers render the fonts with anti-aliasing. I'll run a test tomorrow when I'm on my desktop. – SeanA Dec 13 '12 at 05:54

2 Answers2

1

This worked for me:

$(this)[0].getBoundingClientRect().width

From ssorallen: https://stackoverflow.com/a/18341704/299408

Community
  • 1
  • 1
Joshua Enfield
  • 17,642
  • 10
  • 51
  • 98
-1

If you want to convert your floating point number to a while number you can just trim off the decimals like so: $(this).width().toFixed(0)

Or yo could just trim it to a different number of decimal place by passing a different number into toFixed.

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • 1
    The problem is that jQuery returns width as an integer rather than a float, which is what I need it to be. – SeanA Dec 13 '12 at 05:55