Calculate-pixel-size NPM

Calculate Pixel Size

A small browser library to calculate text size in pixels

Usage

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.

@everything-registry/sub-chunk-1286

1.0.0

9 years ago