https://github.com/adambisek/string-pixel-width

Blazingly fast measure string width in pixels on the server in Javascript (Node.Js)
https://github.com/adambisek/string-pixel-width

javascript measure nodejs string width

Last synced: 12 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/adambisek/string-pixel-width
• Owner: adambisek
• License: mit
• Created: 2017-01-02T20:17:11.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-08-09T05:54:45.000Z (over 1 year ago)
• Last Synced: 2024-05-10T16:32:01.729Z (6 months ago)
• Topics: javascript, measure, nodejs, string, width
• Language: JavaScript
• Homepage: https://medium.com/@adambisek/text-pixel-width-measuring-on-javascript-backend-node-js-2b82bea97fab#.8ypyiffyw
• Size: 430 KB
• Stars: 101
• Watchers: 4
• Forks: 42
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-blazingly-fast - string-pixel-width - Blazingly fast measure string width in pixels on the server in Javascript (Node.Js) (JavaScript)

README

        
[string-pixel-width](https://github.com/adambisek/string-pixel-width)

===================================

[![Build Status](https://travis-ci.org/adambisek/string-pixel-width.svg?branch=master)](https://travis-ci.org/adambisek/string-pixel-width)

[![npm version](https://img.shields.io/npm/v/string-pixel-width.svg?style=flat-square)](https://www.npmjs.com/package/string-pixel-width)

[![Coverage Status](https://coveralls.io/repos/github/adambisek/string-pixel-width/badge.svg?branch=master)](https://coveralls.io/github/adambisek/string-pixel-width?branch=master)

String pixel width measurement on the backend in Javascript.

[Why I created this package? Read more about purpose](https://medium.com/@adambisek/text-pixel-width-measuring-on-javascript-backend-node-js-2b82bea97fab#.8ypyiffyw)

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:

![PHPStan](docs/string-pixel-width-1.png)

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.**