{"id":20208784,"url":"https://github.com/palantir/typesettable","last_synced_at":"2025-04-05T06:10:32.395Z","repository":{"id":21914802,"uuid":"25238947","full_name":"palantir/typesettable","owner":"palantir","description":":triangular_ruler: A typesetting library for SVG and Canvas","archived":false,"fork":false,"pushed_at":"2024-03-25T21:51:22.000Z","size":2323,"stargazers_count":148,"open_issues_count":15,"forks_count":22,"subscribers_count":271,"default_branch":"develop","last_synced_at":"2025-03-29T05:09:52.065Z","etag":null,"topics":["canvas","octo-correct-managed","svg","text","typesetting"],"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/palantir.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-10-15T04:30:34.000Z","updated_at":"2025-02-03T00:02:09.000Z","dependencies_parsed_at":"2024-06-18T16:51:43.427Z","dependency_job_id":"956502c9-224e-43f1-91d0-02efdf525170","html_url":"https://github.com/palantir/typesettable","commit_stats":{"total_commits":170,"total_committers":10,"mean_commits":17.0,"dds":0.4117647058823529,"last_synced_commit":"07abdf70e1f5506b21f8d52474eae6bc72e0e8fc"},"previous_names":["palantir/svg-typewriter"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palantir%2Ftypesettable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palantir%2Ftypesettable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palantir%2Ftypesettable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palantir%2Ftypesettable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/palantir","download_url":"https://codeload.github.com/palantir/typesettable/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294541,"owners_count":20915340,"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":["canvas","octo-correct-managed","svg","text","typesetting"],"created_at":"2024-11-14T05:37:01.444Z","updated_at":"2025-04-05T06:10:32.376Z","avatar_url":"https://github.com/palantir.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Typesettable\n\n[![Circle CI](https://circleci.com/gh/palantir/typesettable.svg?style=svg)](https://circleci.com/gh/palantir/typesettable)\n\n### :warning_sign: Deprecation notice (January 2023)\n\nThis library is mostly deprecated and its build tooling is very outdated.\nIf you need to make changes to this library, you will need to fix some\nof the build infrastructure to get it working in a modern testing \u0026\ndeployment environment.\n\n### Overview\n\n**Typesettable** is a library for measuring, wrapping, and writing text on\nCanvas, SVG, and HTML.\n\nCanvas and HTML support some rudimentary wrapping, but SVG does not support any.\nFurthermore, developers often want wrapped text to auto-hyphenate and truncate\nwith ellipses when overflowing the bounding box. **Typesettable** aims to make\nthis entire process easier.\n\n**Typesettable** works with native browser APIs and has no external\ndependencies.\n\n### Features\n\n- *Measurers* efficiently measure the size of a piece of text, taking into\n  account the font styles affecting that text.\n- *Wrappers* calculate how best to fit text into a given space, based on results\n  from the Measurer.\n- *Writers* layout and write text based on specified options such as wrapping,\n  alignment, rotation, and shearing.\n- *SvgContext*, *CanvasContext*, and *HtmlContext* implement factories for the\n  *IRuler* and *IPen* objects, which encapsulate the functionality for measuring\n  and writing text in SVG, Canvas, and HTML elements.\n\n### Installation\n\n```\nnpm install --save typesettable\n```\n\n# Usage\n\n### Example Two Liner\n\n```ts\nimport { Typesetter } from \"typesettable\";\n\nconst typesetter = Typesetter.svg(document.querySelector(\"svg\"));\ntypesetter.write(\"Hello World!\", 200, 200);\n```\n\n### Example SVG, Canvas, \u0026 HTML\n\nUse typesetters with both SVG and Canvas elements:\n\n```ts\nimport { Typesetter } from \"typesettable\";\n\n// A typesetter for SVG elements\nconst svgTypesetter = Typesetter.svg(document.querySelector(\"svg\"));\n\n// A typesetter for Canvas elements\nconst canvasTypesetter = Typesetter.canvas(document.querySelector(\"canvas\").getContext(\"2d\"));\n\n// A typesetter for HTML elements\nconst htmlTypesetter = Typesetter.html(document.querySelector(\"div.text-container\"));\n\n// The dimensions into which the text will be wrapped and truncated\nconst width = 300;\nconst height = 50;\n\n// Options for alignment, etc.\nconst writeOptions = {\n  xAlign: \"left\",\n  yAlign: \"top\",\n  textRotation: 0,\n  textShear: 0,\n};\n\n// Write the text to the elements\nsvgTypesetter.write(\"Hello SVG!\", width, height, writeOptions);\ncanvasTypesetter.write(\"Hello Canvas!\", width, height, writeOptions);\nhtmlTypesetter.write(\"Hello HTML!\", width, height, writeOptions);\n```\n\n### Example Shared Cache\n\nIf you are typesetting multiple strings of text with the same font style,\nmaintain a cache of Measurer results to improve performance.\n\nYour HTML might look like:\n\n```html\n\u003csvg\u003e\n  \u003cg class=\"section-one\"\u003e\u003c/g\u003e\n  \u003cg class=\"section-two\" transform=\"translate(120 0)\"\u003e\u003c/g\u003e\n\u003c/svg\u003e\n```\n\nTo share text measurements between writer, you can use the simple `Typesetter`\ninterface, which already uses a shared `CacheMeasurer`. Or, you can compose the\ncomponents manually like so:\n\n```ts\nimport { CacheMeasurer, SvgContext, Wrapper, Writer } from \"typesettable\";\n\nconst svg = document.querySelector(\"svg\");\nconst context = new SvgContext(svg);\nconst measurer = new CacheMeasurer(context);\nconst wrapper = new Wrapper();\nconst writer = new Writer(measurer, context, wrapper);\nconst writeOptions = { xAlign: \"center\" };\n\nwriter.write(\n  \"This text is in the first section\",\n  100, 400, writeOptions,\n  svg.querySelector(\"g.section-one\")\n);\n\nwriter.write(\n  \"This text is in the second section\",\n  100, 200, writeOptions,\n  svg.querySelector(\"g.section-two\")\n);\n```\n\n# API Docs\n\nSee [the docs](http://palantir.github.io/typesettable) for more detailed examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalantir%2Ftypesettable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpalantir%2Ftypesettable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalantir%2Ftypesettable/lists"}