{"_id":"fontmetrics","_rev":"3-ab29323b9c16306283d4589029e1ad60","name":"fontmetrics","description":"A lightweight JavaScript utility for computing accurate font metrics, such as x-height, cap-height, ascent and descent.","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"fontmetrics","version":"1.0.0","description":"A lightweight JavaScript utility for computing accurate font metrics, such as x-height, cap-height, ascent and descent.","main":"output/FontMetrics.js","scripts":{"deploy":"npm run build && git branch gh-pages && git push -f origin gh-pages:gh-pages && git branch -D gh-pages","minify":"uglifyjs -cmo ./output/FontMetrics.min.js ./output/FontMetrics.js","clean":"rm -rf ./output","build":"npm run clean && webpack --progress --colors && npm run minify","start":"webpack-dev-server --inline --hot","test":"echo \"Error: no test specified\" && exit 1","prepublish":"npm run build"},"keywords":["font","metrics"],"author":{"name":"Justin Windle","email":"justin@soulwire.co.uk"},"license":"MIT","repository":{"type":"git","url":"git://github.com/soulwire/FontMetrics.git"},"bugs":{"url":"https://github.com/soulwire/FontMetrics/issues"},"devDependencies":{"babel":"^6.5.2","babel-core":"^6.9.1","babel-eslint":"^6.0.4","babel-loader":"^6.2.4","babel-plugin-add-module-exports":"^0.2.1","babel-preset-es2015":"^6.9.0","babel-preset-stage-2":"^6.5.0","es6-promise":"^3.2.1","uglify-js":"^2.6.2","webpack":"^1.13.1","webpack-dev-server":"^1.14.1"},"gitHead":"0e7ddc4f492b0865912adf22862fdc395ddc7609","homepage":"https://github.com/soulwire/FontMetrics#readme","_id":"fontmetrics@1.0.0","_shasum":"38b205a1eb2e331a77f93fda4028c7037a2869a7","_from":".","_npmVersion":"3.6.0","_nodeVersion":"5.6.0","_npmUser":{"name":"soulwire","email":"justin@soulwire.co.uk"},"dist":{"shasum":"38b205a1eb2e331a77f93fda4028c7037a2869a7","tarball":"https://registry.npmjs.org/fontmetrics/-/fontmetrics-1.0.0.tgz","integrity":"sha512-Jv0JO7bvyv+PAMhPeZxk9f8rm1zp7m+eDHeeFBj1SEeb/T5tKWqNlYTW8ZPZDcslusSFOZjjzr85DMd10eVgIA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgpPXJP85sBvb5iIOSiWY8wevKX75/FCHU8MeaCwOirgIhAITnu9yruMTovF1iftQ6926btF3/80iKy08S/6naNSTx"}]},"maintainers":[{"name":"soulwire","email":"justin@soulwire.co.uk"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/fontmetrics-1.0.0.tgz_1468337337439_0.26234607957303524"}}},"readme":"# FontMetrics\n\nA lightweight JavaScript library for computing accurate font metrics such as __x-height__, __cap height__, __ascent__, __descent__ and __tittle__ for any loaded web font.\n\n## Demo\nYou can see it in action [here](http://soulwire.github.io/FontMetrics/).\n\n## Installation \n\nInstall via npm\n\n  npm install fontmetrics\n\nOr include [the script](https://github.com/soulwire/FontMetrics/blob/master/output/FontMetrics.min.js) in your page\n\n  <script src=\"FontMetrics.min.js\" type=\"text/javascript\"></script>\n\n## Usage\n\n__Make sure your font is loaded first!__ A good way to do this is by using [WebFontLoader](https://github.com/typekit/webfontloader).\n\n```javascript\n// If installed via npm...\nimport FontMetrics from 'fontmetrics'\n\nconst metrics = FontMetrics({\n  fontFamily: 'Roboto',\n  // Optional (defaults)\n  fontWeight: 'normal',\n  fontSize: 200,\n  origin: 'baseline'\n})\n```\n\nThis will return an object containing values that are normalised to `fontSize` and relative to `origin`, for example:\n\n```javascript\n{\n  capHeight: -0.73,\n  baseline: 0,\n  xHeight: -0.54,\n  descent: 0.195,\n  bottom: 0.5,\n  ascent: -0.76,\n  tittle: -0.73,\n  top: -0.935,\n  fontFamily: 'Roboto',\n  fontWeight: 'normal',\n  fontSize: 200\n}\n```\n## How to use metrics\n\nAs mentioned above, the values returned are normalised to `fontSize` and relative to `origin`. This is useful because you should then be able to use the returned values regardless of your display font size, simply by scaling them.\n\nFor example, if the value returned for `ascent` is `-0.695` with `origin` set to `'baseline'`, then you can get the pixel value for ascent by using `yourBaselinePosition + metrics.ascent * fontSize`.\n\n## Origin\n\nYou will likely need different origins based on how you're wanting to use the metrics. `'baseline`' is the default, but you can pass the name of any metric returned from `FontMetrics` to be used as the origin (e.g. `'top'`.) This will mean that all returned metrics will now be relative to `top` and of course `top` will be `0`.\n\n## Settings\n\nYou can define the characters used to test certain metrics via `FontMetrics.settings.chars`. For example, `FontMetrics.settings.chars.xHeight` defines the character used to measure the `xHeight` metric (defaults to `'x'`.)\n\n## How it works\n\nFontMetrics works by rendering your font to a `CanvasRenderingContext2D` and then measuring the pixel bounds of the output. This is a fairly well documented technique and seems to provide pretty decent results.","maintainers":[{"name":"soulwire","email":"justin@soulwire.co.uk"}],"time":{"modified":"2022-06-18T02:50:05.548Z","created":"2016-07-12T15:28:59.308Z","1.0.0":"2016-07-12T15:28:59.308Z"},"homepage":"https://github.com/soulwire/FontMetrics#readme","keywords":["font","metrics"],"repository":{"type":"git","url":"git://github.com/soulwire/FontMetrics.git"},"author":{"name":"Justin Windle","email":"justin@soulwire.co.uk"},"bugs":{"url":"https://github.com/soulwire/FontMetrics/issues"},"license":"MIT","readmeFilename":"README.md"}