Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the real height of a text?

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 with

text.height()

and

text[0].getBoundingClientRect().height  

with no luck, it says 19px instead of 14px

like image 849
ettolo Avatar asked Mar 01 '13 15:03

ettolo


People also ask

How to get text height in JavaScript?

The Complete Full-Stack JavaScript Course!var height = parseInt(context. font. match(/\d+/), 10); Above we have used a match to separate the font size from font face.

What is the height of text?

A font is often measured in pt (points). Points dictate the height of the lettering. There are approximately 72 (72.272) points in one inch or 2.54 cm. For example, the font size 72 would be about one inch tall, and 36 would be about a half of an inch.

How do I get the height of text in a div?

var size_of_text = $('#my-div'). css("font-size"); that should retrieve the font-size of your div, which I'm assuming to be the height of the text. This returns the font-size, not the height of the rendered block of text.


1 Answers

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.

like image 153
Andy E Avatar answered Sep 16 '22 11:09

Andy E