Measure the width of given text of given font

1. Use the canvas' measureText() method

const measureWidth = function(text, font) {
// Create new `canvas` element
const canvas = document.createElement('canvas');

// Get the context
const context = canvas.getContext('2d');

// Set the font
context.font = font;

// Measure the text
const metrics = context.measureText(text);

// Return the width in pixels
return metrics.width;
};

2. Use a fake element

const measureWidth = function(text, font) {
// Create an element
const ele = document.createElement('div');

// Set styles
ele.style.position = 'absolute';
ele.style.visibility = 'hidden';
ele.style.whiteSpace = 'nowrap';
ele.style.left = '-9999px';

// Set font and text
ele.style.font = font;
ele.innerText = text;

// Append to the body
document.body.appendChild(ele);

// Get the width
const width = window.getComputedStyle(ele).width;

// Remove the element
document.body.removeChild(ele);

return width;
};

More

Previous
Loop over a nodelist
Next
Prepend to an element