Package Exports

bezoerb-measure-text

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bezoerb-measure-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 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>

Documentation

measureText.width(<text>,<options>|<element>) method.
measureText.maxFontSize(<text>,<options>|<element>) method.

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: undefined
Allowed: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
can be used to overwrite elements font-weight.

font-style

Type: string
Default: undefined Allowed: normal, italic, oblique
can be used to overwrite elements font-style.

font-variant

Type: string
Default: undefined Allowed: normal, small-caps can be used to overwrite elements font-variant.

font-size

Type: string
Default: undefined

can be used to overwrite elements font-size.

font-family

Type: string
Default: undefined

can be used to overwrite elements font-family.

License

Usage

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

API

measureText.width(text, element, [options])

text

Type: string

The text to measure

element

Type: HTMLElement

The HTML element which ashould be checked

options

foo

Type: boolean
Default: false

Lorem ipsum.