Natural Performance Manager

    @mapbox/tiny-sdf
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.5 • Public • Published

    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
        fontStyle: 'normal',      // CSS font-style
        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.

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

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

    Install

    npm i @mapbox/tiny-sdf

    DownloadsWeekly Downloads

    630,542

    Version

    2.0.5

    License

    BSD-2-Clause

    Unpacked Size

    10.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • mapbox-npm-01
    • mapbox-npm-02
    • mapbox-npm-07
    • mapbox-npm-03
    • mapbox-npm-04
    • mapbox-npm-09
    • mapbox-npm-05
    • mapbox-npm-06
    • mapbox-npm-08
    • mapbox-npm-advanced-actions
    • mapbox-npm-ci
    • mapbox-npm
    • mapbox-admin
    • mapbox-machine-user