npmpackage.info

Gathering detailed insights and metrics for @mapbox/tiny-sdf

Other packages similar to @mapbox/tiny-sdf

bitmap-sdf

1.0.4

Calculate SDF for image/bw-data/array

geojson-vt

4.0.2

Slice GeoJSON data into vector tiles efficiently

webgl-sdf-generator

1.1.1

WebGL-accelerated signed distance field generation for 2D paths

@mapbox/node-pre-gyp

1.0.11

Node.js native addon binary install tool

Gathering detailed insights and metrics for @mapbox/tiny-sdf

@mapbox/tiny-sdf

Browser-side SDF font generator

2.0.6

579

BSD-2-Clause

HTML

202,116,385 4.6

Installations

npm install @mapbox/tiny-sdf

Pull Requests

Open

1

Total

28

Closed

5

Merged

22

Issues

Open

8

Total

28

Closed

20

Releases

v2.0.5

Published on 01 Feb 2022

v2.0.4

Published on 18 Oct 2021

v2.0.3

Published on 18 Oct 2021

v2.0.2

Published on 24 Sept 2021

v2.0.1

Published on 22 Sept 2021

v2.0.0

Published on 22 Sept 2021

View all 13 releases

Developer

mapbox

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

14.19.1

NPM Version

8.5.5 Statistics

579 Stars

96 Commits

58 Forks

121 Watching

5 Branches

544 Contributors

Updated on 19 Nov 2024

Languages

HTML (60.83%)

JavaScript (39.17%)

Total Downloads

Cumulative downloads

Total Downloads

202,116,385

Last day

-5.4%

272,458

Compared to previous day

Last week

1.9%

1,452,573

Compared to previous week

Last month

6,137,728

Compared to previous month

Last year

17.4%

64,348,144

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

canvas eslint eslint-config-mourner eslint-plugin-html pixelmatch pngjs st tape

Versions

TinySDF

TinySDF is a tiny and fast JavaScript library for generating SDF (signed distance field) from system fonts on the browser using Canvas 2D and Felzenszwalb/Huttenlocher distance transform. This is very useful for rendering text with WebGL.

Demo

Usage

Create a TinySDF for drawing glyph SDFs based on font parameters:

1const tinySdf = new TinySDF({
2    fontSize: 24,             // Font size in pixels
3    fontFamily: 'sans-serif', // CSS font-family
4    fontWeight: 'normal',     // CSS font-weight
5    fontStyle: 'normal',      // CSS font-style
6    buffer: 3,                // Whitespace buffer around a glyph in pixels
7    radius: 8,                // How many pixels around the glyph shape to use for encoding distance
8    cutoff: 0.25              // How much of the radius (relative) is used for the inside part of the glyph
9});
10
11const glyph = tinySdf.draw('泽'); // draw a single character

Returns an object with the following properties:

data is a Uint8ClampedArray array of alpha values (0–255) for a width x height grid.
width: Width of the returned bitmap.
height: Height of the returned bitmap.
glyphTop: Maximum ascent of the glyph from alphabetic baseline.
glyphLeft: Currently hardwired to 0 (actual glyph differences are encoded in the rasterization).
glyphWidth: Width of the rasterized portion of the glyph.
glyphHeight Height of the rasterized portion of the glyph.
glyphAdvance: Layout advance.

TinySDF is provided as a ES module, so it's only supported on modern browsers, excluding IE.

1<script type="module">
2import TinySDF from 'https://cdn.skypack.dev/@mapbox/tiny-sdf';
3...
4</script>

In Node, you can't use require — only import in ESM-capable versions (v12.15+):

1import TinySDF from '@mapbox/tiny-sdf';

Development

1npm test  # run tests
2npm start # start server for the demo page

License

This implementation is licensed under the BSD 2-Clause license. It's based directly on the algorithm published in the Felzenszwalb/Huttenlocher paper, and is not a port of the existing C++ implementation provided by the paper's authors.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

4.6

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More