{"id":16125700,"url":"https://github.com/dy/font-atlas-sdf","last_synced_at":"2025-09-12T19:31:36.377Z","repository":{"id":57239765,"uuid":"80606085","full_name":"dy/font-atlas-sdf","owner":"dy","description":"Populate \u003ccanvas\u003e with SDF font atlas texture","archived":false,"fork":false,"pushed_at":"2018-06-06T15:20:36.000Z","size":175,"stargazers_count":22,"open_issues_count":2,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-31T15:09:47.849Z","etag":null,"topics":["font","sdf","typography","webgl"],"latest_commit_sha":null,"homepage":"https://dy.github.io/font-atlas-sdf","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.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":"2017-02-01T09:37:15.000Z","updated_at":"2024-07-29T13:57:50.000Z","dependencies_parsed_at":"2022-09-11T01:10:21.023Z","dependency_job_id":null,"html_url":"https://github.com/dy/font-atlas-sdf","commit_stats":null,"previous_names":["dfcreative/font-atlas-sdf"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ffont-atlas-sdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ffont-atlas-sdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ffont-atlas-sdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Ffont-atlas-sdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/font-atlas-sdf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232776775,"owners_count":18575005,"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":["font","sdf","typography","webgl"],"created_at":"2024-10-09T21:30:46.962Z","updated_at":"2025-01-06T19:57:01.488Z","avatar_url":"https://github.com/dy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# font-atlas-sdf [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges)\n\nPopulate a `\u003ccanvas\u003e` element with a font texture atlas – can be used to quickly generate SDF (Signed Distance Field) fonts. SDF is the most efficient way to draw text in WebGL, see [article](https://www.mapbox.com/blog/text-signed-distance-fields/). For bitmap fonts see [font-atlas](https://github.com/hughsk/font-atlas).\n\n[Demo](https://dy.github.io/font-atlas-sdf)\n\n## Usage\n\n[![npm install font-atlas-sdf](https://nodei.co/npm/font-atlas-sdf.png?mini=true)](https://npmjs.org/package/font-atlas-sdf/)\n\n### canvas = fontAtlas(options?)\n\nPopulates and returns a `\u003ccanvas\u003e` element with a font texture atlas. Takes\nthe following options:\n\nProperty | Default | Meaning\n---|---|---\n`canvas` | New canvas | use an existing `\u003ccanvas\u003e` element.\n`font` | `16px sans-serif` | the font family to use when drawing the text. Can be a [css font](https://developer.mozilla.org/en-US/docs/Web/CSS/font) string or an object with font properties: `size`, `family`, `style`, `weight`, `variant`, `stretch`.\n`shape` | `[512, 512]` | an array containing the `[width, height]` for the canvas in pixels.\n`step` | `[32, 32]` | an array containing the `[width, height]` for each cell in pixels.\n`chars` | `[32, 126]` | may be one of either: a string containing all of the characters to use; an array of all the characters to use; an array specifying the `[start, end]` character codes to use.\n`radius` | _size × 1.5_ | affects the \"slope\" of distance-transform.\n`align` | `'optical'` | align symbol vertically by bounding box rather than font baseline. Available values: `'optical'` for center of mass alignment (see [optical-properties](https://github.com/dfcreative/optical-properties)), `'bounds'` for bounding box alignment or `false` to use font alignment.\n`fit` | `0.5` | normalize glyph sizes to cover same part of `size`. Can be a number or bool, eg. `0.5` covers half of `size`, `1` fits to the full size and `false` disables fit.\n\n\u003cimg src=\"https://raw.githubusercontent.com/dy/font-atlas-sdf/master/atlas.png\" alt=\"Font atlas texture\"/\u003e\n\n## Related\n\n* [font-atlas](https://github.com/hughsk/font-atlas) − bitmap font atlas.\n* [tiny-sdf](https://github.com/mapbox/tiny-sdf) − fast glyph signed distance field generation.\n* [optical-properties](https://github.com/dy/optical-properties) − glyph optical center and bounding box calculation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Ffont-atlas-sdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Ffont-atlas-sdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Ffont-atlas-sdf/lists"}