get-text-width

This module helps calculate the rendered width of text.
60,305 2
vue typescript react angular javascript node jest canvas overflow width
Install
npm install get-text-width
Latest Version:1.0.3
License:ISC
Last Updated:Sep 9, 2021
Links: GitHub  ·  npm
Maintainer: eduardo-vargas

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

Font Aspect ratio
Arial 0.52
Arial Black 0.52
Calibri 0.46
Candara 0.47
Century Gothic 0.53
Corbel 0.46
DejaVu Sans 0.55
DejaVu Sans Condensed 0.55
DejaVu Sans Light 0.55
Eurostile 0.47
Franklin Gothic 0.49
Futura 0.51
Gadget 0.55
Geneva 0.55
Gill Sans 0.45
GNU Free Sans 0.53
Goudy Sans 0.48
Helvetica 0.52
Helvetica Neue 0.52
Impact 0.65
Liberation Sans 0.53
Lucida Grande 0.53
Lucida Sans Unicode 0.53
Myriad 0.48
Optima 0.47
Serpentine BoldBold 0.47
Stone Sans 0.52
Tahoma 0.55
Trebuchet MS 0.52
Verdana 0.55
Font Aspect ratio
Baskerville 0.45
Bernhard Modern 0.34
Big Caslon 0.47
Book Antiqua 0.46
Bookman Old Style 0.47
Calisto MT 0.47
Cambria 0.47
Century 0.46
Century Schoolbook 0.46
Cochin 0.37
Constantia 0.45
DejaVu Serif 0.52
DejaVu Serif Condensed 0.52
Didot 0.43
Garamond 0.38
Georgia 0.48
GNU Free Serif 0.45
Goudy Old Style 0.40
Hoefler Text 0.44
Humana Serif 0.50
Janson Text 0.43
Liberation Serif 0.46
Minion 0.45
New York 0.55
Palatino 0.46
Times New Roman 0.45
Font Aspect ratio
Andale Mono 0.51
Consolas 0.49
Courier New 0.43
DejaVu Mono 0.55
GNU Free Mono 0.42
Liberation Mono 0.53
Lucida Console 0.53
Font Aspect ratio
URW Alcuin SCT 0.51
American Typewriter 0.51
Barbedor 0.49
Caflisch Script 0.37
Chalkboard 0.53
Charlemagne 0.74
Comic Sans MS 0.55
Copperplate 0.44
Corsiva 0.60
Flemish Script 0.28
Herculanum 0.61
Marker Felt 0.62
Papyrus 0.46
Sand 0.69
Textile 0.68

       

Happy coding! 🗒

Related Packages

eslint-config-any

ESLint configuration for JavaScript, TypeScript, React & Vue projects, by Julio...

6,327 0
javascript jest node react typescript vue commonjs config eslint vitest
@framit/meta-pixel

Simple, framework agnostic and GDPR Compliance library to track data to Meta Pix...

15,362 5
angular javascript react typescript vue meta pixel
@homedia/meta-pixel

Simple, framework agnostic and GDPR Compliance library to track data to Meta Pix...

2,521
angular javascript react typescript vue meta pixel
@dlhsoft/ganttcharthyperlibrary

Gantt Chart library for JavaScript and TypeScript with Angular, React, and Vue e...

2,650 2
angular javascript react typescript vue chart gantt
astro-vscode

Language support for Astro

18,973 63,402
javascript node react typescript vue astro static site generator svelte

Version History

Version Released License
1.0.3 ISC
1.0.2 ISC
1.0.1 ISC
1.0.0 ISC