{"id":17471710,"url":"https://github.com/bezoerb/text-metrics","last_synced_at":"2025-10-20T08:14:04.179Z","repository":{"id":14101465,"uuid":"75977920","full_name":"bezoerb/text-metrics","owner":"bezoerb","description":"An efficient text measurement set for the browser","archived":false,"fork":false,"pushed_at":"2023-10-16T21:55:10.000Z","size":2769,"stargazers_count":63,"open_issues_count":6,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-13T22:25:18.219Z","etag":null,"topics":["fast","height-calculation","linebreak","width-calculation"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bezoerb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-08T21:47:58.000Z","updated_at":"2024-05-02T06:38:55.256Z","dependencies_parsed_at":"2024-05-02T06:38:13.824Z","dependency_job_id":"01411c03-d36c-4222-8544-b4a4fbb39c47","html_url":"https://github.com/bezoerb/text-metrics","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Ftext-metrics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Ftext-metrics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Ftext-metrics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bezoerb%2Ftext-metrics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bezoerb","download_url":"https://codeload.github.com/bezoerb/text-metrics/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230501172,"owners_count":18236061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fast","height-calculation","linebreak","width-calculation"],"created_at":"2024-10-18T16:53:16.788Z","updated_at":"2025-10-20T08:14:04.103Z","avatar_url":"https://github.com/bezoerb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# text-metrics\n\n[![NPM version][npm-image]][npm-url] [![Build Status][ci-image]][ci-url] [![BrowserStack Status][browserstack-image]][browserstack-url] [![Download][dlcounter-image]][dlcounter-url] [![Coverage Status][coveralls-image]][coveralls-url]\n\n\u003e An lightweight \u0026 efficient text measurement set for the browser using canvas to prevent layout reflows.\n\n## Features\n\n- Compute width\n- Compute height\n- Compute linebreaks\n- Compute max font-size to fit into element\n\n## Installation\n\nIf you're using node, you can run `npm install text-metrics`.\n\ntext-metrics is also available via [Bower](https://github.com/bower/bower) (`bower install text-metrics`)\n\nAlternatively if you just want to grab the file yourself, you can download either the current stable [production version][min] or the [development version][max] directly.\n\n[min]: https://raw.github.com/bezoerb/text-metrics/master/dist/text-metrics.min.js\n[max]: https://raw.github.com/bezoerb/text-metrics/master/dist/text-metrics.js\n\n## Setting it up\n\ntext-metrics supports AMD (e.g. RequireJS), CommonJS (e.g. Node.js) and direct usage (e.g. loading globally with a \u0026lt;script\u0026gt; tag) loading methods.\nYou should be able to do nearly anything, and then skip to the next section anyway and have it work. Just in case though, here's some specific examples that definitely do the right thing:\n\n### CommonsJS (e.g. Node)\n\ntext-metrics needs some browser environment to run.\n\n```javascript\nconst textMetrics = require('text-metrics');\n\nconst el = document.querySelector('h1');\nconst metrics = textMetrics.init(el);\n\nmetrics.width('unicorns');\n// -\u003e 210\n\nmetrics.height('Some long text with automatic word wraparound');\n// -\u003e 180\nmetrics.lines('Some long text with automatic word wraparound');\n// -\u003e ['Some long text', 'with automatic', 'word', 'wraparound']\nmetrics.maxFontSize('Fitting Headline');\n// -\u003e 33px\n```\n\n### Webpack / Browserify\n\n```javascript\nconst textMetrics = require('text-metrics');\ntextMetrics.init(document.querySelector('.textblock')).lines();\n```\n\n### AMD (e.g. RequireJS)\n\n```javascript\ndefine(['text-metrics'], function (textMetrics) {\n  textMetrics.init(document.querySelector('h1')).width('unicorns');\n});\n```\n\n### Directly in your web page:\n\n```html\n\u003cscript src=\"text-metrics.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  textMetrics.init(document.querySelector('h1')).width('unicorns');\n\u003c/script\u003e\n```\n\n## API\n\nConstruct textmetrics object:\n\n`textMetrics.init([el, overwrites])`\n\nYou can call textMetrics with either an HTMLElement or with an object with style overwrites or with both.\ne.g.\n\n```javascript\n// takes styles from h1\ntextMetrics.init(document.querySelector('h1'));\n\n// takes styles from h1 and overwrites font-size\ntextMetrics.init(document.querySelector('h1'), {fontSize: '20px'});\n\n// only use given styles\ntextMetrics.init({\n  fontSize: '14px',\n  lineHeight: '20px',\n  fontFamily: 'Helvetica, Arial, sans-serif',\n  fontWeight: 400,\n  width: 100,\n});\n```\n\n## Methods\n\n`width([text, [options, [overwrites]]])`\u003cbr/\u003e\n`height([text, [options, [overwrites]]])`\u003cbr/\u003e\n`lines([text, [options, [overwrites]]])`\u003cbr/\u003e\n`maxFontSize([text, [options, [overwrites]]])`\u003cbr/\u003e\n\n#### text\n\nType: `string`\nDefaults to `el.innerText` if an element is available\n\n#### options\n\nType: `object`\n\n| key       | default | description                                                        |\n| --------- | ------- | ------------------------------------------------------------------ |\n| multiline | `false` | The width of widest line instead of the width of the complete text |\n\n#### overwrites\n\nType: `object`\n\nUse to overwrite styles\n\n## Performance\n\nI've compared this module with a very naive jQuery implementation as well as\nthe . See https://jsperf.com/bezoerb-text-metrics\nEven if `Range.getBoundingClientRect` should be considered as a performance bottleneck according to\n[what-forces-layout](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) by Paul Irish,\ni couldn't detect any sort of recalculate style and it massively outperforms `textMetrics.height()`.\n\n## Compatibility\n\nThe normal build (3,2kb gzipped) should work well on modern browsers.\u003cbr/\u003e\nThese builds are tested using \u003cbr/\u003e\u003ca href=\"http://browserstack.com/\" target=\"_blank\"\u003e\u003cimg src=\"./test/fixtures/Browserstack-logo.svg\" width=\"200\" alt=\"Browserstack\"\u003e\u003c/a\u003e\n\n## License\n\nCopyright (c) 2016 Ben Zörb\nLicensed under the [MIT license](http://bezoerb.mit-license.org/).\n\n[npm-url]: https://npmjs.org/package/text-metrics\n[npm-image]: https://badge.fury.io/js/text-metrics.svg\n[ci-url]: https://github.com/bezoerb/text-metrics/actions?workflow=Tests\n[ci-image]: https://github.com/bezoerb/text-metrics/workflows/Tests/badge.svg\n[dlcounter-url]: https://www.npmjs.com/package/text-metrics\n[dlcounter-image]: https://img.shields.io/npm/dm/text-metrics.svg\n[coveralls-url]: https://coveralls.io/github/bezoerb/text-metrics?branch=master\n[coveralls-image]: https://coveralls.io/repos/github/bezoerb/text-metrics/badge.svg?branch=master\n[browserstack-url]: https://automate.browserstack.com/public-build/WHRoUjI2QnRnb0dlUDVtaUpDbFFNdHJWVEVUT2VLdUZ0QVF6bWROT2Ntdz0tLWRzUmk1dkhwQnhZQThvTWNDVzJyL2c9PQ==--933d8c999a8c7868c7133144fdcd6ff2df8248d8\n[browserstack-image]: https://automate.browserstack.com/badge.svg?badge_key=WHRoUjI2QnRnb0dlUDVtaUpDbFFNdHJWVEVUT2VLdUZ0QVF6bWROT2Ntdz0tLWRzUmk1dkhwQnhZQThvTWNDVzJyL2c9PQ==--933d8c999a8c7868c7133144fdcd6ff2df8248d8\n\n\n## License\n\n[MIT](https://bezoerb.mit-license.org/) © [Ben Zörb](http://sommerlaune.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbezoerb%2Ftext-metrics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbezoerb%2Ftext-metrics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbezoerb%2Ftext-metrics/lists"}