How To Calculate Text Width With Javascript?

Question

I need to calculate my text with using JavaScript. But can't find a simple and working method. Please, help me :) Thanks in advance.

Are we referring to DOM, or Canvas? – Mr. Polywhirl Jul 02 '20 at 11:26 — Mr. Polywhirl, Jul 02 '20 at 11:26

score 2 · Accepted Answer · answered Jul 02 '20 at 11:19

Hi :) Recently I have found a really simple and handy method. Just use the Canvas.measureText() method in JavaScript to detect the text width properly:

function displayTextWidth(text, font) {
  let canvas = displayTextWidth.canvas || (displayTextWidth.canvas = document.createElement("canvas"));
  let context = canvas.getContext("2d");
  context.font = font;
  let metrics = context.measureText(text);
  return metrics.width;
}
console.log("Text Width: " + displayTextWidth("This is demo text!", "italic 19pt verdana")); //

The code and info is taken from this tutorial of W3docs.

How To Calculate Text Width With Javascript?

1 Answers1