|
3 years ago | |
---|---|---|
src | 3 years ago | |
.gitignore | 3 years ago | |
.npmignore | 3 years ago | |
README.md | 3 years ago | |
gulpfile.js | 3 years ago | |
index.js | 3 years ago | |
package.json | 3 years ago |
Measures the dimensions and baseline offsets of a font in the browser. Written as a workaround for lacking measureText
/TextMetrics
support in browsers.
document.createElement
context.getImageData
WTFPL or CC0, whichever you prefer. A donation and/or attribution are appreciated, but not required.
Maintaining open-source projects takes a lot of time, and the more donations I receive, the more time I can dedicate to open-source. If this module is useful to you, consider making a donation!
You can donate using Bitcoin, PayPal, Flattr, cash-in-mail, SEPA transfers, and pretty much anything else. Thank you!
Pull requests welcome. Please make sure your modifications are in line with the overall code style, and ensure that you’re editing the files in src/
, not those in lib/
.
Build tool of choice is gulp
; simply run gulp
while developing, and it will watch for changes.
Be aware that by making a pull request, you agree to release your modifications under the licenses stated above.
This library accepts two options that control the precision of the measurements: fontSize
and tolerance
. These are not required to be set, and you do not need to re-measure the font for every font size you wish to use - all measurements are expressed in multipliers, that you can apply to any font size to get the right offsets for that font size. See the “Using the measurements” section for more details.
Fonts are measured by rendering a number of reference characters on an invisible canvas. The fontSize
option is used to determine what size the characters should be rendered at - the larger the fontSize
, the more accurate the edge detection will be (leading to a more accurate measurement). In practice, the default font size of 20
is usually sufficient.
The invisible canvas needs to have a certain width and height, large enough to fit the measured
characters. You can control the size of this canvas using the tolerance
parameter - both the width and the height of the canvas will be fontSize * tolerance
pixels large. The default tolerance of 6
(3 units in each direction) should be more than sufficient for most cases, but if you’re dealing with very strangely sized fonts, you may want to increase this value.
It’s not recommended to reduce the tolerance
below the default value of 6
, unless you have very stringent performance requirements and have thoroughly tested and verified that your tolerance
setting works correctly. Setting the tolerance
too low will result in measurements silently failing, yielding incorrect results. Often, the better solution to performance issues is to simply memoize the measurement results.
All measurements are multipliers, and are relative to the alphabetic baseline. That means that if you have an ascender
measurement of -0.75
, you would calculate the tallest possible ascender in a string at a 40px
font size as follows:
tallestPossibleAscender = measurements.ascender * 40;
This would yield a tallestPossibleAscender
of -30
- in other words, the tallest possible ascender reaches up to baselineHeight - 30
.
Typically, only the descender
is a positive number (since it ends up below the baseline), and all the other measurements are negative numbers (since they end up above the baseline).
A simple example:
const measureFont = require("measure-font");
let sansSerifMeasurements = measureFont("sans-serif");
console.log(sansSerifMeasurements); // {descender: 0.15, ascender: -0.75, capHeight: -0.7, median: -0.55, topBounding: -0.75}
With a custom precision option:
const measureFont = require("measure-font");
let sansSerifMeasurements = measureFont("sans-serif", {
fontSize: 40
});
console.log(sansSerifMeasurements); // {descender: 0.15, ascender: -0.75, capHeight: -0.7, median: -0.55, topBounding: -0.75}
Measures the specified font.
px
) to measure at.Returns an object containing measurements. All measurements are multipliers, relative to the alphabetic baseline.
Reference image (from Wikipedia):