Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bezoerb/measure-text
DEPRECATED: In-memory text measurement using canvas
https://github.com/bezoerb/measure-text
Last synced: 14 days ago
JSON representation
DEPRECATED: In-memory text measurement using canvas
- Host: GitHub
- URL: https://github.com/bezoerb/measure-text
- Owner: bezoerb
- License: mit
- Created: 2016-04-06T21:55:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-18T05:18:09.000Z (over 6 years ago)
- Last Synced: 2024-10-18T19:17:09.530Z (26 days ago)
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 6
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# measure-text
[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url] [![Download][dlcounter-image]][dlcounter-url] [![Coverage Status][coveralls-image]][coveralls-url]
> In-memory text measurement using canvas
## DEPRECATED
Use https://github.com/bezoerb/text-metrics instead
## Features
* Compute text width
* Compute max font-size to fit into element
## Installation
If you're using node, you can run `npm install bezoerb-measure-text`.
measure-text is also available via [Bower](https://github.com/bower/bower) (`bower install measure-text`)
Alternatively if you just want to grab the file yourself, you can download either the current stable [production version][min] or the [development version][max] directly.
[min]: https://raw.github.com/bezoerb/measure-text/master/dist/measure-text.min.js
[max]: https://raw.github.com/bezoerb/measure-text/master/dist/measure-text.js
## Setting it up
measure-text supports AMD (e.g. RequireJS), CommonJS (e.g. Node.js) and direct usage (e.g. loading globally with a <script> tag) loading methods.
You should be able to do nearly anything, and then skip to the next section anyway and have it work. Just in case though, here's some specific examples that definitely do the right thing:
### CommonsJS (e.g. Node)
measure-text needs some browser environment to run.
```javascript
import import * as measureText from 'bezoerb-measure-text';
measureText.width('unicorns',document.querySelector('h1'));
```
### AMD (e.g. RequireJS)
```javascript
define(['measure-text'], function(measureText) {
measureText.width('unicorns',document.querySelector('h1'));
});
```
### Directly in your web page:
```html
measureText.width('unicorns',document.querySelector('h1'));
```
## API
#### measureText.width(text, [element | options])
Compute text width.
#### measureText.height(text, [element | options])
Compute text height.
#### measureText.maxFontSize(text, [element | options])
Compute max fontsize to fit element.
#### measureText.computeLinebreaks(text, [element | options])
Compute lines of text with automatic word wraparound
### text
Type: `string`
Default: ''
Some text to measure
### options
##### element
Type: `Element`
Default: `undefined`
The element used to fetch styles from.
##### font-weight
Type: `string`
Default: `400`
Allowed: `normal`, `bold`, `bolder`, `lighter`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
Takes precedence over computed element style. Default value is set when no element is available.
##### font-style
Type: `string`
Default: `normal`
Allowed: `normal`, `italic`, `oblique`
Takes precedence over computed element style. Default value is set when no element is available.
##### font-variant
Type: `string`
Default: `normal`
Allowed: `normal`, `small-caps`
Takes precedence over computed element style. Default value is set when no element is available.
##### font-size
Type: `string`
Default: `16px`
Takes precedence over computed element style. Default value is set when no element is available.
##### font-family
Type: `string`
Default: `Helvetica, Arial, sans-serif`
Takes precedence over computed element style. Default value is set when no element is available.
##### width
Type: `string`
Default: `undefined`
Used for `getMaxFontSize`, `height`, `computeLinebreaks` and `width` with multiline option.
Takes precedence over element offsetWidth.
## License
Copyright (c) 2016 Ben Zörb
Licensed under the [MIT license](http://bezoerb.mit-license.org/).
[npm-url]: https://npmjs.org/package/bezoerb-measure-text
[npm-image]: https://badge.fury.io/js/bezoerb-measure-text.svg
[travis-url]: https://travis-ci.org/bezoerb/measure-text
[travis-image]: https://secure.travis-ci.org/bezoerb/measure-text.svg?branch=master
[depstat-url]: https://david-dm.org/bezoerb/measure-text
[depstat-image]: https://david-dm.org/bezoerb/measure-text.svg
[dlcounter-url]: https://www.npmjs.com/package/bezoerb-measure-text
[dlcounter-image]: https://img.shields.io/npm/dm/bezoerb-measure-text.svg
[coveralls-url]: https://coveralls.io/github/bezoerb/measure-text?branch=master
[coveralls-image]: https://coveralls.io/repos/github/bezoerb/measure-text/badge.svg?branch=master
## Usage
```html
var h1 = document.querySelector('h1');
measureText.width('unicorns',h1);
// -> 37.7978515625
```
## License
MIT © [Ben Zörb](http://sommerlaune.com)