T

29

617

I'd like to use JavaScript to calculate the width of a string. Is this possible without having to use a monospace typeface?

If it's not built-in, my only idea is to create a table of widths for each character, but this is pretty unreasonable especially supporting Unicode and different type sizes (and all browsers for that matter).

Talented answered 22/9, 2008 at 23:37 Comment(1)

Beware that if you're using external fonts, you'll have to use the techniques below after they've loaded. You may not realize this if you have them cached or if you have local versions installed. – Davila 13/12, 2015 at 20:35

V

415

Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.

var fontSize = 12;
var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px"

console.log(height, width);

#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; /* Thanks to Herb Caudill comment */
}

<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

Vallievalliere answered 22/9, 2008 at 23:40 Comment(11)

The only thing I'd add is that this may give the wrong dimensions depending on which styles are used. Remember you may have styles like p { letter-spacing: 0.1em; } that a DIV element would not reflect. You must ensure that the styles in place are appropriate for where you will use the text. – Convergent 23/9, 2008 at 0:26

Ditto Jim's comment - double-check to make sure the container, div in this case, does not have any other styles applied to it via css selection rules that you may not be cognizant of at the time. Strip all relevant styles from the container before applying the ones you care about before measuring. – Amiamiable 23/9, 2008 at 0:33

You should also put in white-space:nowrap if you think the text will exceed the browser width. – Scarab 23/9, 2008 at 1:41

this answer didn't work correctly for me, it gave me the wrong values at first, kept increasing them and only after a couple of calls I had the right ones. What fixed it was replacing the visibility:hidden with a top/left set to -1000px – Methylamine 19/3, 2013 at 9:5

+1 for the absolute positioning which seems to get missed on a lot of posts...without witch you get the space taken up by the div due to visibility:hidden being used instead of `display:none' (which doesn't work for this) – Dody 8/7, 2013 at 16:28

@Methylamine all that hacking around is why I suggest a different, less hacky, approach downstairs. Take a look at it here. – Pavyer 9/1, 2014 at 8:54

Just curious what the +1 is for on each dimension? – Enthuse 28/3, 2014 at 3:18

This solution forces synchronous layout which might be pretty slow with many elements on the page. – Lomax 8/12, 2014 at 19:26

It doesn't work for me. test.clientWidth and test.clientHeight always return 0. – Sweyn 6/10, 2018 at 10:24

changing fontSize value other than 12 doesnt affect the result in my trial with ie11. i tried exactly as in the answer. – Bywoods 23/5, 2019 at 5:27

you would like to count multi space too. a b will be rendered in a div as a b. Solution: change white-space: nowrap to white-space: pre or content should be manipulated with js to replace every single space with   – Streetwalker 4/11, 2023 at 0:33

P

609

In HTML 5, you can just use the Canvas.measureText method (further explanation here).

Try this fiddle:

/**
  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
  * 
  * @param {String} text The text to be rendered.
  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
  * 
  * @see https://mcmap.net/q/37823/-calculate-text-width-with-javascript/21015393#21015393
  */
function getTextWidth(text, font) {
  // re-use canvas object for better performance
  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  const context = canvas.getContext("2d");
  context.font = font;
  const metrics = context.measureText(text);
  return metrics.width;
}

function getCssStyle(element, prop) {
    return window.getComputedStyle(element, null).getPropertyValue(prop);
}

function getCanvasFont(el = document.body) {
  const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
  const fontSize = getCssStyle(el, 'font-size') || '16px';
  const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
  
  return `${fontWeight} ${fontSize} ${fontFamily}`;
}

console.log(getTextWidth("hello there!", "bold 12pt arial"));  // close to 86

If you want to use the font-size of some specific element myEl, you can make use of the getCanvasFont utility function:

const fontSize = getTextWidth(text, getCanvasFont(myEl));
// do something with fontSize here...

Explanation: The getCanvasFontSize function takes some element's (by default: the body's) font and converts it into a format compatible with the Context.font property. Of course any element must first be added to the DOM before usage, else it gives you bogus values.

More Notes

There are several advantages to this approach, including:

More concise and safer than the other (DOM-based) methods because it does not change global state, such as your DOM.
Further customization is possible by modifying more canvas text properties, such as textAlign and textBaseline.

NOTE: When you add the text to your DOM, remember to also take account of padding, margin and border.

NOTE 2: On some browsers, this method yields sub-pixel accuracy (result is a floating point number), on others it does not (result is only an int). You might want to run Math.floor (or Math.ceil) on the result, to avoid inconsistencies. Since the DOM-based method is never sub-pixel accurate, this method has even higher precision than the other methods here.

According to this jsperf (thanks to the contributors in comments), the Canvas method and the DOM-based method are about equally fast, if caching is added to the DOM-based method and you are not using Firefox. In Firefox, for some reason, this Canvas method is much much faster than the DOM-based method (as of September 2014).

Performance

This fiddle compares this Canvas method to a variation of Bob Monteverde's DOM-based method, so you can analyze and compare accuracy of the results.

Pavyer answered 9/1, 2014 at 8:46 Comment(18)

This is an awesome option, I didn't know about it. Ever compare the performance of this to the performance of measuring in the DOM? – Baron 1/4, 2014 at 19:7

@SimpleAsCouldBe I just looked into it and found this measure-text-width test on jsperf.com. It tells me that the Canvas method is 6x faster, but it does not cache the DOM in the other method, so it is biased. – Pavyer 3/4, 2014 at 11:37

I added the caching to that jsperf benchmark. Now the two methods are pretty much on par: jsperf.com/measure-text-width/4 – Jerricajerrie 4/6, 2014 at 23:27

btw, changing font on the canvas forces style recalculation which might be quiet slow on a page with many HTML elements. – Lomax 8/12, 2014 at 20:12

@Martin Huh? What does "many HTML elements" have to do with anything here? The canvas object in this example isn't even attached to the DOM. And even aside from that, changing the font in a canvas drawing context doesn't even affect the canvas at all until you strokeText() or fillText(). Perhaps you meant to comment on a different answer? – Lesko 18/9, 2015 at 16:43

Nice solution. I've wrapped a couple of other methods around Domi's answer so that I can - Get a (potentially) truncated string with ellipsis (...) at the end if it won't fit in a given space (as much of the string as possible will be used) - Pass in a JQuery Element that is to contain the (possibly truncated) string, and determine the Font attributes dynamically so that they don't have to be hard-coded, allowing CSS font attributes to change without breaking the layout. JSFiddle Here: jsfiddle.net/brebey/1q94gLsu/6/embed – Throe 18/5, 2016 at 19:37

The font size isn't actually the font height. Example: The height of "Helvetica 16px" is just 18 pixels... – Adonis 13/1, 2017 at 13:4

I forgot where I found the info on this, but according to that source, the point size of the font is supposed to be the max height of any character (or at least any ASCII character?). Might have been wrong... I'll remove that hint for now. Thanks! – Pavyer 13/1, 2017 at 14:57

??? does not work "Uncaught ReferenceError: getTextWidth is not defined" at the line var canvas = getTextWidth.canvas || (getT ... – Sherburne 9/8, 2017 at 15:59

@Sherburne Are you using it with Node or some other headless Javascript environment that does not actually define a DOM? That won't work unless you install a special environment, such as PhantomJS. It should however work in all major browsers however. See here for a table showing you all supported browsers and versions – Pavyer 9/8, 2017 at 19:45

Is there a way get this answer back in points? or other units? – Play 20/4, 2018 at 15:8

@Play From what I understand, the conversion rate of pixel to point depends on the font itself (think: if it was that easy to convert, why would we need to measure it to begin with? different characters already have different point height!) as well as the medium you use (e.g. your computer screen), it's resolution and even the browser render pipeline implementation. This converter has a side-note (literally on the right side) you might want to read – Pavyer 26/4, 2018 at 11:35

This does not take into account all the possible CSS styles that might apply on the string once it is rendered on the page. – Silence 16/5, 2018 at 11:53

@Silence You are right. It cannot take account of text-transform, letter-spacing et al (yet), but it does take account of the most often seen requirements. – Pavyer 18/5, 2018 at 1:30

In case anyone else got here looking both for a way to measure the width of a string and a way to know what's the largest font size that will fit in a particular width, I've added an answer (https://mcmap.net/q/37823/-calculate-text-width-with-javascript) that builds on this solution with a binary search. – Saber 12/6, 2018 at 9:6

This will work on Chrome but will give wrong result with Firefox. – Mammary 4/12, 2018 at 14:16

The results of DOM based method and your method are astounding different once the font is removed. Also looks like your method doesn't give the right width. Look at this Can you add some information about this? – Hydroplane 19/8, 2021 at 10:37

@BookOfFlames that is because canvas's Context's default font size is entirely different from HTMLElement default font size. I added an explanation to my answer. – Pavyer 19/8, 2021 at 12:32

V

415

Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.

var fontSize = 12;
var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px"

console.log(height, width);

#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; /* Thanks to Herb Caudill comment */
}

<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>