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 = width;var heightInPixels = 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 = ;
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:
NPM
npm install calculate-pixel-size
License
Calculate Pixel Size is distributed under the MIT license.