Determine string pixel length in javascript / jQuery?

Question

Is it possible to determine the pixel length of a string in jQuery / JavaScript?

Answer 1

Wrap text in span and use jquery width ()

Answer 2

The contexts used for HTML canvases have a built-in method for checking font size. This method returns a TextMetrics object that has a width property that contains the width of the text.

 function getWidthOfText(txt, fontname, fontsize){ if(getWidthOfText.c === undefined){ getWidthOfText.c=document.createElement('canvas'); getWidthOfText.ctx=getWidthOfText.c.getContext('2d'); } getWidthOfText.ctx.font = fontsize + ' ' + fontname; return getWidthOfText.ctx.measureText(txt).width; } 

Or, as some of the other users suggested, you can wrap it in a span element:

 function getWidthOfText(txt, fontname, fontsize){ if(getWidthOfText.e === undefined){ getWidthOfText.e = document.createElement('span'); getWidthOfText.e.style.display = "none"; document.body.appendChild(getWidthOfText.e); } getWidthOfText.e.style.fontSize = fontsize; getWidthOfText.e.style.fontFamily = fontname; getWidthOfText.e.innerText = txt; return getWidthOfText.e.offsetWidth; } 

Testing:

• The first solution (canvas) - tested , works (returned in pixels)
• Second solution (DOM) - tested , working (returned in pixels)

Note that due to differences in implementation, the two may return slightly different values.

Performance Test: 26,788 calls averaged over 100 iterations. Tested at the end of 2014 mac mini, 1.4 GHz i5

Safari, version 10.1.1 (12603.2.4):

• First solution: 33.92 milliseconds for 26,788 calls
• Second solution: 67.94 milliseconds for 26,788 calls.

Google Chrome, version 60.0.3112.90:

• First solution: 99.1963 milliseconds for 26788 calls
• Second solution: 307.4605 milliseconds for 26788 calls

Answer 3

I do not believe that you can only make a string, but if you put the string inside the <span> with the correct attributes (size, font-weight, etc.); you should then use jQuery to get the width of the range.

 <span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span> <script> $('#string_span').width(); </script> 

Answer 4

Put it in an absolutely positioned div, and then use clientWidth to get the displayed width of the tag. You can even set the visibility to “hidden” to hide the div:

 <div id="text" style="position:absolute;visibility:hidden" >This is some text</div> <input type="button" onclick="getWidth()" value="Go" /> <script type="text/javascript" > function getWidth() { var width = document.getElementById("text").clientWidth; alert(" Width :"+ width); } </script> 

Answer 5

Based on vSync's answer, a pure javascript method is lightning fast for a large number of objects. Here is the script: https://jsfiddle.net/xeyq2d5r/8/

 [1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle" 

I got favorable tests for the proposed 3rd method, which uses native javascript vs HTML Canvas

Google was pretty competitive for options 1 and 3, 2 were bombed.

Firefox 48:
Method 1 took 938.895 milliseconds.
Method 2 took 1536.355 milliseconds.
Method 3 took 135.91499999999996 milliseconds.

Edge 11 Method 1 took 4895.262839793865 milliseconds.
Method 2 took 6746.622271896686 milliseconds.
Method 3 took 1020.0315412885484 milliseconds.

Google Chrome: 52
Method 1 took 336.4399999999998 milliseconds.
Method 2 took 2271.71 milliseconds.
Method 3 took 333.30499999999984 milliseconds.

Answer 6

First replicate the layout and style of the text, and then use the Jquery width () function. This will make the measurements accurate. For example, you have a css style with a selector:

 .style-head span { //Some style set } 

You will need to do this using jQuery already included above this script:

 var measuringSpan = document.createElement("span"); measuringSpan.innerText = 'text to measure'; measuringSpan.style.display = 'none'; /*so you don't show that you are measuring*/ $('.style-head')[0].appendChild(measuringSpan); var theWidthYouWant = $(measuringSpan).width(); 

Needless to say

theWidthYouWant

will hold the pixel length. Then delete the created items after you finish, or you will get several if done several times. Instead, add the identifier to the link.

Answer 7

If you use Snap.svg, the following works:

 var tPaper = Snap(300, 300); var tLabelText = tPaper.text(100, 100, "label text"); var tWidth = tLabelText.getBBox().width; // the width of the text in pixels. tLabelText.attr({ x : 150 - (tWidth/2)}); // now it centered in x