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