Measure text 1

[oppcos]

Is there a way to measure text in javascript? I want to determine if the text has overflowed the container and then perform an operation based upon that eventuality. The text is added to the container programatically so I could do the test after that is done.

I was thinking the only way would be to allow a scroll bar and then see if I can move it - but am hopeful there is an easier way that might help me to know how exactly how much text causes the overflow of the default container's width and height.

Thanks

 

[BabyJeffy]

I did a solution once that relied on a pixel value for font-size and measured each character width in the font. I added up the character widths (in pixels) and calculated the width of text that way. Worked for IE4 and NN4 in windows *smirk* Of course you have to build a kerning value for each character in the font (in pixels). You could probably adjust that to use ems so it scaled.

It was a sub optimal solution - but I was paid to do it (so that makes it better somehow).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[oppcos]

Yikes, sounds somewhat painful! I guess it is as much as I expect though..

 

[Einstein47]

Will your text have spaces in it? I ask, because I had a solution to resize the width of a menu to fit the given text dynamically.

What I did was put the text in a DIV (where overflow was set to visible) and then reduce the width of the DIV until the height increased (meaning that I caused word wrap). Then I added width until the height returned to the previous value. That gave me the pixel width.

Here is the code. I didn't need the exact width, so I didn't adjust by single pixels (which you could do). Hope it helps:

[teal]/* This function will shrink the width of the given DIV until it can no longer
   shrink, or until the height gets larger and then it will increase the size
   slightly. */[/teal]
[red]function[/red] [b]resizeMenu([blue]menuDivObj[/blue])[/b] {
[teal]// When submenus have no spaces, the width can only be reduced so far[/teal]
  var origHeight = menuDivObj.offsetHeight;
  var prevWidth = 0;
  var delta = 0;
  while (origHeight == menuDivObj.offsetHeight
	&& menuDivObj.offsetWidth != prevWidth) {
    prevWidth = menuDivObj.offsetWidth;
    delta = Math.ceil(menuDivObj.offsetWidth * 0.12);
    menuDivObj.style.width = (menuDivObj.offsetWidth-delta)+"px";
  }
  (delta<12) ? delta=2 : delta=Math.floor(delta/4);
  while (origHeight != menuDivObj.offsetHeight) {
    menuDivObj.style.width = (menuDivObj.offsetWidth+delta)+"px";
  }
  menuDivObj.style.width = (menuDivObj.offsetWidth+5)+"px";
}

Einstein47
There are no kangaroos in Austria!
[[]Starbase47.com]

 

[oppcos]

Wow, figures someone named Einstein would make it look easy. ;-) That's perfect, thanks!

 

[Einstein47]

You are very welcome. Glad to help.

Einstein47
There are no kangaroos in Austria!
[[]Starbase47.com]