{"id":21033139,"url":"https://github.com/josephuspaye/svg-text","last_synced_at":"2025-08-09T21:11:39.887Z","repository":{"id":57122149,"uuid":"317518942","full_name":"JosephusPaye/svg-text","owner":"JosephusPaye","description":"Measure and wrap text into lines for SVG in the browser","archived":false,"fork":false,"pushed_at":"2020-12-01T12:28:16.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-21T21:41:25.836Z","etag":null,"topics":["createweekly","svg","text-wrapping"],"latest_commit_sha":null,"homepage":"","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/JosephusPaye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-01T11:24:24.000Z","updated_at":"2024-01-21T17:08:42.000Z","dependencies_parsed_at":"2022-08-25T17:10:10.036Z","dependency_job_id":null,"html_url":"https://github.com/JosephusPaye/svg-text","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fsvg-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fsvg-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fsvg-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fsvg-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosephusPaye","download_url":"https://codeload.github.com/JosephusPaye/svg-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243475358,"owners_count":20296712,"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":["createweekly","svg","text-wrapping"],"created_at":"2024-11-19T12:52:01.333Z","updated_at":"2025-03-13T20:14:22.211Z","avatar_url":"https://github.com/JosephusPaye.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-text\n\n\u003e Measure and wrap text into lines for SVG in the browser.\n\nThis project is part of [#CreateWeekly](https://twitter.com/JosephusPaye/status/1214853295023411200), my attempt to create something new publicly every week in 2020.\n\n## Installation\n\n```bash\nnpm install -g @josephuspaye/svg-text\n```\n\n## Usage\n\n### Measure text\n\nThe following example shows how to measure strings of text (runs in the browser):\n\n```js\nimport { measureText } from '@josephuspaye/svg-text';\n\nconst measures = measureText(['nyan', 'oh hai mark'], {\n  fontFamily: 'Helvetica, Arial, sans-serif',\n  fontWeight: 'bold',\n  fontSize: '2em',\n});\n\nconsole.log(`measure for 'nyan':`, measures[0]);\nconsole.log(`measure for 'oh hai mark':`, measures[1]);\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eView output\u003c/summary\u003e\n\n```\nmeasure for 'nyan': { width: 74.6875, height: 35.21875 }\nmeasure for 'oh hai mark': { width: 180.21875, height: 35.21875 }\n```\n\n\u003c/details\u003e\n\n### Wrap text\n\nThe following example shows how to layout text into wrapped lines (runs in the browser):\n\n```js\nimport { layoutText } from '@josephuspaye/svg-text';\n\nconst lines = layoutText(\n  'The tired teacher told Tom to take thirty-three tables to the townhall.',\n  { maxWidth: 300, maxLines: 2 },\n  {\n    fontFamily: 'Helvetica, Arial, sans-serif',\n    fontWeight: 'bold',\n    fontSize: '2em',\n  },\n  {\n    lineSpacing: 8,\n  }\n);\n\nconsole.log(lines);\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eView output\u003c/summary\u003e\n\n```js\n[\n  {\n    width: 259.015625,\n    height: 78.4375,\n    lines: [\n      {\n        text: 'The tired teacher',\n        measure: {\n          width: 259.015625,\n          height: 35.21875,\n        },\n        position: {\n          x: 0,\n          y: 0,\n        },\n      },\n      {\n        text: 'told Tom to take',\n        measure: {\n          width: 244.734375,\n          height: 35.21875,\n        },\n        position: {\n          x: 0,\n          y: 43.21875,\n        },\n      },\n    ],\n  },\n  {\n    width: 270.28125,\n    height: 78.4375,\n    lines: [\n      {\n        text: 'thirty-three tables',\n        measure: {\n          width: 270.28125,\n          height: 35.21875,\n        },\n        position: {\n          x: 0,\n          y: 0,\n        },\n      },\n      {\n        text: 'to the townhall.',\n        measure: {\n          width: 234.640625,\n          height: 35.21875,\n        },\n        position: {\n          x: 0,\n          y: 43.21875,\n        },\n      },\n    ],\n  },\n];\n```\n\n\u003c/details\u003e\n\n## API\n\n```ts\ntype ElementAttrs = Record\u003cstring, string | number\u003e;\n\ninterface TextMeasure {\n  width: number;\n  height: number;\n}\n\ninterface MeasuredLine {\n  text: string;\n  measure: TextMeasure;\n  position: {\n    x: number;\n    y: number;\n  };\n}\n\ninterface LineGroup {\n  width: number;\n  height: number;\n  lines: MeasuredLine[];\n}\n\n/**\n * Measure the given array of texts by converting them to SVG\n * \u003ctext\u003e elements, temporarily appending to the DOM, and\n * measuring their rendered bounding boxes.\n *\n * `fontAttrs` is an object of SVG `font-*` attributes for\n * the rendered \u003ctext\u003e elements.\n */\nfunction measureText(texts: string[], fontAttrs: ElementAttrs): TextMeasure[];\n\n/**\n * Layout the given text to fit the given constraints, with line\n * wrapping and line spacing. Returns groups of lines each with\n * no more than `constraints.maxLines` number of lines.\n */\nfunction layoutText(\n  text: string,\n  constraints: {\n    maxWidth: number;\n    maxLines: number;\n  },\n  fontAttrs: ElementAttrs,\n  lineAttrs: {\n    lineSpacing: number;\n  }\n): LineGroup[];\n```\n\n## Licence\n\n[MIT](LICENCE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephuspaye%2Fsvg-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosephuspaye%2Fsvg-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephuspaye%2Fsvg-text/lists"}