59/97

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;
};

Might be useful