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