How to get the bounding box of a wrapping inline element with prototype.

Question

I used to use cumulativeOffset() and getDimensions() to calculate the bounding box of elements, but just realized that cumulativeOffset returns the top left corner oft the start of an element. Meaning: if an inline element wraps, and the next line is more to the left than the start, I get a displaced bounding box.

After researching a bit, I found that I can use getClientRects() to get all rects. I could then go through, and just take the left position of the rect that's most to the left.

I was wondering if there is a better way of doing this... I just didn't find a boundingBox() prototype function. Did I overlook it?

Edit: I also just found out that getClientRects() is not supported by all browser, so this is no solution.

Answer 1

I don't see a boundingBox() function either, but I wonder if using the same technique (cumulativeOffset() and getDimensions()) on the parent via: getOffsetParent() would do what you want. getOffSetParent():

"Returns element’s closest positioned ancestor. If none is found, the body element is returned."

Which should account for word-wrapping where the second line is further left.

Answer 2

I've never heard of a way to do this. You could set it position:relative, drop a 1x1 absolutely positioned div into it, position it right:0, get that div's LEFT + WIDTH, and subtract the offset width of the original inline item from that value.

Saying that, total hack, maybe you need to rethink the reason you want to do this!

Answer 3

The solution given by dfitzhenry seems not working in the case of multiline inline elements. Here's my Javascript solution : get your inline element nextSibling, check if it is an inline element, otherwise create a new inline element, add it to your inline element's parent and then get its offsetLeft:

 **var parentContainer = inline_elm.parentNode;
 var nextsib = inline_elm.nextSibling;
 var remove_next_sibling = false;
 if(!nextsib || nextsib.clientWidth != 0){
     remove_next_sibling = true;
     var temp= document.createElement('span');
     parentContainer.insertBefore(temp, nextsib);
     nextsib = temp;
 }

 var inline_bounding_right = nextsib.offsetLeft;
 if(remove_next_sibling)    parentContainer.removeChild(nextsib);**