get-text-width v1.0.3

getTextWidth

This helper function is intended to get the rendered width of text. It leverages canvas to simulate the rendered text and calculate the width using the font of your project.

It also has a backup height:width ratio number in case something goes wrong with the canvas.

Returns numeric value of width in pixels

Example

Here is an example of how to implement this function.

import { getTextWidth } from 'get-text-width';

const width = getTextWidth("Hello world");

// The function also accepts as custom 
// backup font height:width ratio like so:
const width = getTextWidth("Hello world", 0.5);

Live demo

Common fonts height:width aspect ratios

Happy coding! 🗒