How to get the real height of the text?

Question

Referring to this example
http://jsfiddle.net/uzgJX/

The result is the height of the field containing the text (the one you can see if you select the text with the mouse ..) wichi higher than the actual height of the text.
Is there a way to get real height using jquery or plain js?
In the example I tried with

text.height() 

and

 text[0].getBoundingClientRect().height 

no luck he says 19px instead of 14px

Answer 1

Get the calculated font-size for your text element:

 parseInt(window.getComputedStyle(text[0]).fontSize, 10); 

font-size represents the size of the em square for the font. It should be noted that although most glyphs will be inside em boundaries, some may exceed these boundaries. This usually does not occur in vertical dimensions.

Try: http://jsfiddle.net/uzgJX/1/ . Tip: take a screenshot and copy to your favorite image editor, then select the pixels exactly in the height of the text and compare with the value specified in the script.