https://github.com/kapetan/text-width
Measure the text width in browsers
https://github.com/kapetan/text-width
Last synced: 3 months ago
JSON representation
Measure the text width in browsers
- Host: GitHub
- URL: https://github.com/kapetan/text-width
- Owner: kapetan
- Created: 2014-11-16T22:22:17.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-03T20:22:44.000Z (almost 11 years ago)
- Last Synced: 2024-12-28T12:46:27.977Z (12 months ago)
- Language: JavaScript
- Size: 160 KB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome_frontend_development_resources - text-width - Measure the text width in browsers. (Utilities / React Components)
- awesome - text-width - Measure the text width in browsers. (Utilities / React Components)
README
# text-width
A small utility for measuring the text width in browsers that support the canvas API.
# Usage
Install through `npm` and require it with `browserify`. It uses the [ctx.measureText][mt] method for acquiring the text width.
```javascript
var width = require('text-width');
var w = width('hello world', {
family: 'Arial',
size: 10
});
```
It supports following font options, `style`, `variant`, `weight`, `size` and `family`. Each corresponding to a similarly named [CSS property][font]. The size option can either be a number (size in pixels) or a string, e.g. `10pt`.
[mt]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
[font]: https://developer.mozilla.org/en-US/docs/Web/CSS/font