adambisek / string-pixel-width

Blazingly fast measure string width in pixels on the server in Javascript (Node.Js)

string-pixel-width

String pixel width measurement on the backend in Javascript.

Why I created this package? Read more about purpose

Installation

To install the stable version:

npm install --save string-pixel-width

Supported fonts:

• Andale Mono
• Arial
• Avenir
• Avenir Next
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Impact
• Inter
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings
• Open Sans
• Tahoma

Example

var pixelWidth = require('string-pixel-width');

const width = pixelWidth('My text ...', { size: 10 });
console.log('This text is ' + width + 'px long in the size of 10px.');

// This text is 43.5px long in the size of 10px.

var pixelWidth = require('string-pixel-width');

const width = pixelWidth('My text ...', { font: 'impact', size: 10 });
console.log('This text is ' + width + 'px long in the size of 10px.');

// This text is 42px long in the size of 10px.

var pixelWidth = require('string-pixel-width');

const width = pixelWidth('My text ...', { font: 'open sans', size: 10, bold: true, italic: true });
console.log('This text is ' + width + 'px long in the size of 10px.');

// This text is 47px long in the size of 10px using bold and italic proportions.

How to contribute

PRs are welcome :) This library uses static map of width of every ASCII letter for all supported fonts.

1. Clone the repository
2. Open file src/pixelWidthCalculator.html in your editor
3. Add your font name into array of fonts (currently var websafe) and save
4. Open up src/pixelWidthCalculator.html in Google Chrome. It should look like this:
5. Map of withs will be generated for you - copy it and replace content of file src/widthsMap.js

Please everytime make sure you don't broke existing fonts - remove any font or broke his widths.

string-pixel-width's Issues

Using pdfkit

Maybe this will help to get width in different fonts. https://github.com/badges/shields/blob/105e383d93a4a333c2a7ee8038a492c8071f14a5/lib/measure-text.js

UPDATE (20180901): Update link to measure-text.js with archived copy. The code was replaced in badges/shields@cc9a6db853be

Custom fonts

When you add new custom fonts, in addition to the steps described should not be needed to add also the font-faces definitions so when the character is displayed inside the sandbox to calculate the width will take it into account ?

Guide for adding a new font?

Hello! Thanks for this tool, I have been trying to solve this problem forever. I was wondering if you'd be able to provide some guidance on how to add a custom font, and maybe allow a kind of plugin system that allows you to pass in a custom font size map? If you can show me how to get the map, I'd be happy to submit a PR for the second part. Thanks!

Export as ES5 module

Today many build config does not support ES6 modules because it uses an old version of Uglify.

This is the case for create-react-app (see here)

Until uglify-es use spreads (see here), would it be possible to distribute this lib as an ES5 module ?

Only latin characters?

Looks like it doesn't work with non-latin characters, e.g. cyrillic.

Please make that very clear in Readme start, not in "How to contribute" section.

So that people don't waste their time.

License?

Is there any plan to add a license to this package such as MIT?

TypeScript definitions

Hi,

Thought I'd let you/people know I've created a TypeScript definition for this package:

https://www.npmjs.com/package/@types/string-pixel-width
DefinitelyTyped/DefinitelyTyped@0558f65

Cheers,
Graham

Settings type not exported

It would have been nice to strongly type an options object that is used multiple times.

Thanks.

More polices

Hello,

I would like to know if you plan to add more fonts such as Roboto, Rubik, etc ...

If no, could you explain how to do it?

Thank you in advance

Freeze

Validate relation to font-size

Could you validate that you consider the font size correctly? Plus maybe add a thought on "px" vs. "pt" vs. "em"? For example: "Provide the font size in pixels. Other units like pt, em, and rem are not supported".

Your size calculator creates a <span> element with a font-size: 100; CSS property. However, the number 100 without a unit of measure seems to be no acceptable value for the font-size property. Correct would be to provide it as 100px.

Providing the font size without unit will make the calculated size depend on a lot of things, such as surrounding HTML elements etc. In your calculator's page, ultimately the defaults hard-coded into the browser the page runs in, will apply. According to the StackOverflow response linked above, this will usually be something smaller than 100px.

File is too large for use in web app

Would be good to use Lerna to export modules for each of the fonts so you don't have the bloat of the whole map.