measure-text

In-memory text measurement using canvas

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 (bower install measure-text)

Alternatively if you just want to grab the file yourself, you can download either the current stable production version or the development version directly.

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.

import import * as measureText from 'bezoerb-measure-text';

measureText.width('unicorns',document.querySelector('h1'));

AMD (e.g. RequireJS)

define(['measure-text'], function(measureText) {
   measureText.width('unicorns',document.querySelector('h1'));
});

Directly in your web page:

<script src="measure-text.min.js"></script>
<script>
measureText.width('unicorns',document.querySelector('h1'));
</script>

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.

Usage

<h1></h1>
<script src="measure-text.js"></script>
<script>
var h1 = document.querySelector('h1');
measureText.width('unicorns',h1);
// -> 37.7978515625
</script>

License

MIT © Ben Zörb