{"id":21883998,"url":"https://github.com/evargast/gettextwidth","last_synced_at":"2025-04-15T07:15:50.024Z","repository":{"id":57250473,"uuid":"285447476","full_name":"evargast/getTextWidth","owner":"evargast","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-09T16:25:02.000Z","size":10,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T07:15:43.846Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/evargast.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-06T01:54:29.000Z","updated_at":"2022-12-01T15:13:10.000Z","dependencies_parsed_at":"2022-08-24T16:51:45.998Z","dependency_job_id":null,"html_url":"https://github.com/evargast/getTextWidth","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":"evargast/simple-npm-module","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evargast%2FgetTextWidth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evargast%2FgetTextWidth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evargast%2FgetTextWidth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evargast%2FgetTextWidth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evargast","download_url":"https://codeload.github.com/evargast/getTextWidth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023740,"owners_count":21199961,"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":[],"created_at":"2024-11-28T10:11:01.452Z","updated_at":"2025-04-15T07:15:49.997Z","avatar_url":"https://github.com/evargast.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# getTextWidth\n\nThis helper function is intended to get the **rendered** width of text. It leverages canvas to simulate the rendered text and calculate the width using the font of your project.\n\nIt also has a backup height:width ratio number in case something goes wrong with the canvas.\n\n**`Returns numeric value of width in pixels`**\n\n### Example\n\nHere is an example of how to implement this function.\n\n```javascript\n\nimport { getTextWidth } from 'get-text-width';\n\nconst width = getTextWidth(\"Hello world\");\n\n// The function also accepts as custom \n// backup font height:width ratio like so:\nconst width = getTextWidth(\"Hello world\", 0.5);\n\n```\n[Live demo](https://codesandbox.io/s/get-text-width-example-u2n96?file=/src/App.tsx)\n\n## Common fonts `height:width` aspect ratios\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eSans-serif fonts\u003c/b\u003e\u003c/summary\u003e\n\n| Font                      | Aspect ratio  |\n| ------------------------- | ------------- |\n| `Arial`                   |   `0.52`      |\n| `Arial Black`             | \t`0.52`      |\n| `Calibri`                 | \t`0.46`      |\n| `Candara`                 | \t`0.47`      |\n| `Century Gothic`          | \t`0.53`      |\n| `Corbel`                  | \t`0.46`      |\n| `DejaVu Sans`             | \t`0.55`      |\n| `DejaVu Sans Condensed`   | \t`0.55`      |\n| `DejaVu Sans Light`       | \t`0.55`      |\n| `Eurostile`               | \t`0.47`      |\n| `Franklin Gothic`         | \t`0.49`      |\n| `Futura`                  | \t`0.51`      | \n| `Gadget`                  | \t`0.55`      | \n| `Geneva`                  | \t`0.55`      | \n| `Gill Sans`               | \t`0.45`      | \n| `GNU Free Sans`           | \t`0.53`      | \n| `Goudy Sans`              | \t`0.48`      | \n| `Helvetica`               | \t`0.52`      | \n| `Helvetica Neue`          | \t`0.52`      | \n| `Impact`                  | \t`0.65`      | \n| `Liberation Sans`         | \t`0.53`      | \n| `Lucida Grande`           |   `0.53`      | \n| `Lucida Sans Unicode`     | \t`0.53`      | \n| `Myriad`                  | \t`0.48`      | \n| `Optima`                  | \t`0.47`      | \n| `Serpentine BoldBold`     | \t`0.47`      | \n| `Stone Sans`              | \t`0.52`      | \n| `Tahoma`                  | \t`0.55`      | \n| `Trebuchet MS`            | \t`0.52`      | \n| `Verdana`                 | \t`0.55`      | \n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eSerif fonts\u003c/b\u003e\u003c/summary\u003e\n\n| Font                      | Aspect ratio  |\n| ------------------------- | ------------- |\n| `Baskerville`              | \t`0.45`      |\n| `Bernhard Modern`         | \t`0.34`      |\n| `Big Caslon`              | \t`0.47`      |\n| `Book Antiqua`            | \t`0.46`      |\n| `Bookman Old Style`       | \t`0.47`      |\n| `Calisto MT`              | \t`0.47`      |\n| `Cambria`                 | \t`0.47`      |\n| `Century`                 | \t`0.46`      |\n| `Century Schoolbook`      | \t`0.46`      |\n| `Cochin`                  | \t`0.37`      |\n| `Constantia`              | \t`0.45`      |\n| `DejaVu Serif`            | \t`0.52`      |\n| `DejaVu Serif Condensed`  | \t`0.52`      |\n| `Didot`                   | \t`0.43`      |\n| `Garamond`                | \t`0.38`      |\n| `Georgia`                 | \t`0.48`      |\n| `GNU Free Serif`          | \t`0.45`      |\n| `Goudy Old Style`         | \t`0.40`      |\n| `Hoefler Text`            | \t`0.44`      |\n| `Humana Serif`            | \t`0.50`      |\n| `Janson Text`             | \t`0.43`      |\n| `Liberation Serif`        | \t`0.46`      |\n| `Minion`                  | \t`0.45`      |\n| `New York`                | \t`0.55`      |\n| `Palatino`                | \t`0.46`      |\n| `Times New Roman`         | \t`0.45`      |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eMonopace fonts\u003c/b\u003e\u003c/summary\u003e\n\n| Font                      | Aspect ratio  |\n| ------------------------- | ------------- |\n| `Andale Mono`             | \t`0.51`      |\n| `Consolas`                | \t`0.49`      |\n| `Courier New`             | \t`0.43`      |\n| `DejaVu Mono`             | \t`0.55`      |\n| `GNU Free Mono`           | \t`0.42`      |\n| `Liberation Mono`         | \t`0.53`      |\n| `Lucida Console`          | \t`0.53`      |\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eScript/Display/Decorative fonts\u003c/b\u003e\u003c/summary\u003e\n\n| Font                      | Aspect ratio  |\n| ------------------------- | ------------- |\n| `URW Alcuin SCT`          |\t`0.51`      |\n| `American Typewriter`     |\t`0.51`      |\n| `Barbedor`                |\t`0.49`      |\n| `Caflisch Script`         |\t`0.37`      |\n| `Chalkboard`              |\t`0.53`      |\n| `Charlemagne`             |\t`0.74`      |\n| `Comic Sans MS`           |\t`0.55`      |\n| `Copperplate`             |\t`0.44`      |\n| `Corsiva`                 |\t`0.60`      |\n| `Flemish Script`          |\t`0.28`      |\n| `Herculanum`              |\t`0.61`      |\n| `Marker Felt`             |\t`0.62`      |\n| `Papyrus`                 |\t`0.46`      |\n| `Sand`                    |\t`0.69`      |\n| `Textile`                 |\t`0.68`      |\n\u003c/details\u003e\n\n\u0026nbsp;\n\u0026nbsp;\n\u0026nbsp;\n\u0026nbsp;\n\n## \u003cdiv align=\"center\"\u003e Happy coding! 🗒 \u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevargast%2Fgettextwidth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevargast%2Fgettextwidth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevargast%2Fgettextwidth/lists"}