Socket
Socket
Sign inDemoInstall

string-pixel-width

Package Overview
Dependencies
1
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    string-pixel-width

String pixel width measurement on the backend in Javascript


Version published
Maintainers
1
Install size
275 kB
Created

Readme

Source

string-pixel-width

Build Status npm version Coverage Status

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: PHPStan
  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.

Keywords

FAQs

Last updated on 20 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc