In-memory text measurement using canvas
Use https://github.com/bezoerb/text-metrics instead
- Compute text width
- Compute max font-size to fit into element
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.
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:
measure-text needs some browser environment to run.
import import * as measureText from 'bezoerb-measure-text';
measureText.width('unicorns',document.querySelector('h1'));define(['measure-text'], function(measureText) {
measureText.width('unicorns',document.querySelector('h1'));
});<script src="measure-text.min.js"></script>
<script>
measureText.width('unicorns',document.querySelector('h1'));
</script>Compute text width.
Compute text height.
Compute max fontsize to fit element.
Compute lines of text with automatic word wraparound
Type: string
Default: ''
Some text to measure
Type: Element
Default: undefined
The element used to fetch styles from.
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.
Type: string
Default: normal
Allowed: normal, italic, oblique
Takes precedence over computed element style. Default value is set when no element is available.
Type: string
Default: normal
Allowed: normal, small-caps
Takes precedence over computed element style. Default value is set when no element is available.
Type: string
Default: 16px
Takes precedence over computed element style. Default value is set when no element is available.
Type: string
Default: Helvetica, Arial, sans-serif
Takes precedence over computed element style. Default value is set when no element is available.
Type: string
Default: undefined
Used for getMaxFontSize, height, computeLinebreaks and width with multiline option.
Takes precedence over element offsetWidth.
Copyright (c) 2016 Ben Zörb Licensed under the MIT license.
<h1></h1>
<script src="measure-text.js"></script>
<script>
var h1 = document.querySelector('h1');
measureText.width('unicorns',h1);
// -> 37.7978515625
</script>MIT © Ben Zörb