If you include calculate-pixel-size.js in your HTML file, calculatePixelSize is exposed as a global variable. If you install via npm or yarn, calculatePixelSize is exposed as the default export.

var text = "Some text to measure";
var widthInPixels = calculatePixelSize(text).width;
var heightInPixels = calculatePixelSize(text).height;

Options

calculatePixelSize accepts an options object. Currently, only one option, style, is supported. It defines the style of the text to be measured, in the same syntax as HTMLElement.style. Acceptable values:

options = {
    style: {
        'letterSpacing': String,
        'tabSize': String,
        'font': String,
        'fontFamily': String,
        'fontKerning': String,
        'fontSize': String,
        'fontStretch': String,
        'fontStyle': String,
        'fontVariant': String,
        'fontVariantCaps': String,
        'fontWeight': String
    }
}

var styledSize = calculatePixelSize("Some text to measure", options);

Other values of options.style will be ignored.

Important Note

Calculate Pixel Size relies on the <body> element being loaded. Therefore, you must load calculate-pixel-size.js at the end of the <body> tag, preferrably directly before the closing </body>. At some point in the future, I may include an optional callback to calculatePixelSize to allow it to be called asynchronously before the body loads.

Installation

Script tag

Download calculate-pixel-size.js or calculate-pixel-size.min.js (minified), then include the file in a script tag:

<script type="text/javascript" src="/path/to/calculate-pixel-size.js"></script>

NPM

npm install calculate-pixel-size

License

Calculate Pixel Size is distributed under the MIT license.

FAQs

What is calculate-pixel-size?

Is calculate-pixel-size well maintained?

Package last updated on 10 Nov 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

calculate-pixel-size