Finding Dimension of Text in Pixels - HTML5 Javascript JQuery

Finding Width & Height of Text in Pixels

HTML5 - Javascript - JQuery

For Div, Span

I came across a problem that i want to find width of the text in my page in order to properly align it. I found the solution using JQuery.

Steps

1. Wrap the text in a span and append to some element say to a div.

$(div).append("<span id='find-length'>"+text+"</span>").

2. Find width and height using JQuery.

var textWidth = $("#find-length").width();

var textHeight = $("#find-length").height();

For SVG

For finding dimension of svg text element we will make use of  getBBox() method.

Eg: var dimension = element.getBBox();

var textWidth = dimension .width;

var textHeight = dimension .height;