Need help with tiny-sdf?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mapbox
275 Stars 30 Forks Other 61 Commits 6 Opened issues

Description

Browser-side SDF font generator

Services available

!
?

Need anything else?

Contributors list

TinySDF Build Status

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:

const tinySdf = new TinySDF({
    fontSize: 24,             // Font size in pixels
    fontFamily: 'sans-serif', // CSS font-family
    fontWeight: 'normal',     // CSS font-weight
    buffer: 3,                // Whitespace buffer around a glyph in pixels
    radius: 8,                // How many pixels around the glyph shape to use for encoding distance
    cutoff: 0.25              // How much of the radius (relative) is used for the inside part of the glyph
});

const 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.


In Node, you can't use

require
— only
import
in ESM-capable versions (v12.15+):
import TinySDF from '@mapbox/tiny-sdf';

Development

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

License

This implementation is licensed under the BSD 2-Clause license, and is 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.