How to get the real height of a text?
Get the computed font-size
for your text element instead:
parseInt(window.getComputedStyle(text[0]).fontSize, 10);
font-size
represents the size of an em square for a font. It should be noted that, while most glyphs will stay inside the bounds of an em square, some may exceed those bounds. This doesn't usually occur on the vertical dimentions, though.
Give it a try: http://jsfiddle.net/uzgJX/1/. Tip: screenshot and copy into your favourite image editor, then select the pixels exactly to the height of the text and compare with the value given in the fiddle.
ettolo
Updated on March 02, 2020Comments
-
ettolo about 4 years
Referring go this example
http://jsfiddle.net/uzgJX/The result is the height of the box containing the text (the one you can see if you select the text with the mouse..) wichi is higher then the real height of the text.
Is there a way to get the real height with jquery or plain js?
In the example I tryed withtext.height()
and
text[0].getBoundingClientRect().height
with no luck, it says 19px instead of 14px
-
ettolo about 11 yearsThank you Andy E! That's what i needed!
-
Andy E about 11 years@ettolo: in the case where text is not visible, you might want to check jQuery's result for
height
is greater than 0 first. -
Andy E about 11 years@ettolo: no, all I see are 3 rounded rectangles that are empty. (Chrome 27 and Firefox 19 on Ubuntu)
-
Andy E about 11 years@ettolo: strange... it doesn't seem to work when the font-size is inherited (although it should). If I set the font-size directly on the element via CSS it works: jsfiddle.net/ynfAP/4. It must be an SVG thing, since both Firefox and Chrome exhibit the same behaviour.
-
ettolo about 11 yearsThanks! I'll give it a try
-
Black over 5 years@AndyE, your solution does not work. It just shows the height of a single line. What if there are multiple lines?! Then it still shows the same value: jsfiddle.net/uzgJX/362