mattdesl/fontpath

Font to vector path tools

fontpath

A tool which generates paths and kerning data from a TTF/OTF/WOFF/etc font. The paths can then be decomposed into points, or rendered to a canvas, or triangulated.

The project is similar to typeface.js and cufon. Both of those tools are very old, and were made before @font-face gained widespread support. This project has a few different goals in mind:

• Stronger focus on WebGL/animations/effects rather than trying to replace DOM text rendering
• NPM/node tooling, eventual integration with build tools
• decoupled modules, e.g. outline generator doesn't depend on rendering utils, glyph layout doesn't depend on canvas rendering
• rendering engine isn't tied to Canvas (or even the browser; e.g. you could use node-canvas)
• eventually, these tools could be used by a server to generate paths or hinted bitmap data for the client
• TTF, OTF, WOFF, and most other formats supported (FreeType2)
• font converter is an offline tool and fairly easy to modify (i.e. for a custom JSON/binary exporter)
• you can specify any charsets with the API (e.g. foreign and icon fonts)
• other stuff: hit detection on paths, advanced glyph/face metrics

example

fontpath myfont.ttf -o mfont.json --size 128

The default size is 12 pt, but exporting with a higher font size will give you better resolution when rendering the path at large sizes. It's best to match the exported size to the final rendered size, as it will produce better rounding when scaled down.

roadmap

This project is a heavy WIP. Some things I want to explore:

• Bitmap font rendering and atlas packing for Canvas/WebGL
• Basic support for styled/attributed text (italics, bold, color, etc)
• Maybe some tools for SDF rendering
• Better Node/CLI integration

New modules will be added to text-modules.

demos

• Triangulated text effect - a custom renderer using triangles
• Custom steiner points - finer control over triangulation for creative effects
• WebGL Path Rendering
• WebGL Triangulated Rendering
• Bitmap Fonts
• Signed-Distance Field Bitmap Fonts

modules

Note: New modules will be more generic and not specifically tied to "fontpath." See text-modules.

The framework is split into many small modules. Some of them aren't specific to fontpath, but are useful alongside it. You generally won't need to use all of them together; but instead, you'll pick and choose based on your particular application.

Most commonly, you might want to use a "renderer" which gives you a basic word-wrapper and glyph layout tools.

• fontpath-canvas - a renderer using 2D Canvas and paths for fill/stroke
• fontpath-gl - a WebGL renderer using stackgl modules
• gl-sprite-text - a WebGL renderer for BMFont files that can also be used for signed-distance field text

Some other utilities that make up the ecosystem:

• fontpath-simple-renderer a generic renderer, useful if you need something more optimized
• fontpath-wordwrap a basic word wrapper that supports pre and nowrap (for parity with CSS)
• fontpath-util - point to pixel utilities
• shape2d - Converts bezier/quadratic curves into points, with HTML5CanvasContext-like API
• shape2d-triangulate - triangulates a list of Shapes from shape2d, ideal for triangulating fontpath glyphs. uses poly2tri
• fontpath-shape2d - decomposes a fontpath JSON/JS glyph into points with shape2d
• fontpath-test-fonts - some fonts that have already been exported to JSON, so you can easily pull them in with NPM
• fontpath-vecmath - vector/matrix utilities for font and glyph faces, built on vecmath
• point-util - used by shape2d-triangulate, but includes a couple of handy features like pointInPoly

license

MIT

fontpath's Issues

fontpath npm install

Hey Matt!

There is a problem when installing fontpath via npm.
I use command: sudo npm install fontpath
but then i get an error:
https://drive.google.com/file/d/0BzxbsmpZqdGZdmprYVcwMUphS2s/view?usp=sharing
https://drive.google.com/file/d/0BzxbsmpZqdGZelg4SUtmNkpkbTg/view?usp=sharing

My main goal is to make 3d webtext via threejs with kerning by converting ttf to js format.

Do you have any suggestions?

Thanks, Andy.

My system: OSX 10.10

Build problem with node-4.1.2 (problem with freetype dependency ?)

$ npm install fontpath --save-dev
\
> [email protected] install /Users/bsergean/src/webgl-surfacemeshfile-viewer/node_modules/fontpath/node_modules/freetype2
> node-gyp rebuild

  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftsystem.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftinit.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftdebug.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftbase.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftbbox.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftglyph.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftbdf.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftbitmap.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftcid.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftfstype.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftgasp.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftgxval.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftlcdfil.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftmm.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftotval.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftpatent.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftpfr.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftstroke.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftsynth.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/fttype1.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftwinfnt.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftxf86.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/bdf/bdf.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/cff/cff.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/cid/type1cid.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/pcf/pcf.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/pfr/pfr.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/sfnt/sfnt.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/truetype/truetype.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/type1/type1.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/type42/type42.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/winfonts/winfnt.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/raster/raster.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/smooth/smooth.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/autofit/autofit.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/cache/ftcache.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/gzip/ftgzip.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/lzw/ftlzw.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/bzip2/ftbzip2.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/gxvalid/gxvalid.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/otvalid/otvalid.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/psaux/psaux.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/pshinter/pshinter.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/psnames/psnames.o
  CC(target) Release/obj.target/libfreetype/vendor/freetype/src/base/ftmac.o
  LIBTOOL-STATIC Release/freetype.a
  CXX(target) Release/obj.target/freetype2/src/init.o
In file included from ../src/init.cc:1:
../node_modules/nan/nan.h:339:13: error: no member named 'New' in 'v8::String'
    return  _NAN_ERROR(v8::Exception::Error, errmsg);
            ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:343:5: error: no member named 'ThrowException' in namespace 'v8'
    _NAN_THROW_ERROR(v8::Exception::Error, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:11: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
      ~~~~^
../node_modules/nan/nan.h:343:5: error: no member named 'New' in 'v8::String'
    _NAN_THROW_ERROR(v8::Exception::Error, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:26: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
                         ^~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:348:9: error: no type named 'ThrowException' in namespace 'v8'
    v8::ThrowException(error);
    ~~~~^
../node_modules/nan/nan.h:355:65: error: no member named 'New' in 'v8::String'
    v8::Local<v8::Value> err = v8::Exception::Error(v8::String::New(msg));
                                                    ~~~~~~~~~~~~^
../node_modules/nan/nan.h:357:26: error: no member named 'New' in 'v8::String'
    obj->Set(v8::String::New("code"), v8::Int32::New(errorNumber));
             ~~~~~~~~~~~~^
../node_modules/nan/nan.h:369:12: error: no member named 'New' in 'v8::String'
    return _NAN_ERROR(v8::Exception::TypeError, errmsg);
           ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:373:5: error: no member named 'ThrowException' in namespace 'v8'
    _NAN_THROW_ERROR(v8::Exception::TypeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:11: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
      ~~~~^
../node_modules/nan/nan.h:373:5: error: no member named 'New' in 'v8::String'
    _NAN_THROW_ERROR(v8::Exception::TypeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:26: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
                         ^~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:377:12: error: no member named 'New' in 'v8::String'
    return _NAN_ERROR(v8::Exception::RangeError, errmsg);
           ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:381:5: error: no member named 'ThrowException' in namespace 'v8'
    _NAN_THROW_ERROR(v8::Exception::RangeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:11: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
      ~~~~^
../node_modules/nan/nan.h:381:5: error: no member named 'New' in 'v8::String'
    _NAN_THROW_ERROR(v8::Exception::RangeError, errmsg);
    ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:324:26: note: expanded from macro '_NAN_THROW_ERROR'
      v8::ThrowException(_NAN_ERROR(fun, errmsg));                             \
                         ^~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:319:50: note: expanded from macro '_NAN_ERROR'
# define _NAN_ERROR(fun, errmsg) fun(v8::String::New(errmsg))
                                     ~~~~~~~~~~~~^
../node_modules/nan/nan.h:406:13: error: no member named 'smalloc' in namespace 'node'
    , node::smalloc::FreeCallback callback
      ~~~~~~^
../node_modules/nan/nan.h:141:71: note: expanded from macro 'NAN_INLINE'
# define NAN_INLINE(declarator) inline __attribute__((always_inline)) declarator
                                                                      ^
../node_modules/nan/nan.h:416:12: error: no matching function for call to 'New'
    return node::Buffer::New(data, size);
           ^~~~~~~~~~~~~~~~~
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:28:40: note: candidate function not viable: no
      known conversion from 'char *' to 'v8::Isolate *' for 1st argument
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate, size_t length);
                                       ^
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:31:40: note: candidate function not viable: no
      known conversion from 'char *' to 'v8::Isolate *' for 1st argument
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                       ^
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:36:40: note: candidate function not viable:
      requires 5 arguments, but 2 were provided
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                       ^
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:43:40: note: candidate function not viable:
      requires 3 arguments, but 2 were provided
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                       ^
In file included from ../src/init.cc:1:
../node_modules/nan/nan.h:420:12: error: no matching function for call to 'New'
    return node::Buffer::New(size);
           ^~~~~~~~~~~~~~~~~
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:28:40: note: candidate function not viable:
      requires 2 arguments, but 1 was provided
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate, size_t length);
                                       ^
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:31:40: note: candidate function not viable:
      requires at least 2 arguments, but 1 was provided
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                       ^
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:36:40: note: candidate function not viable:
      requires 5 arguments, but 1 was provided
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                       ^
/Users/bsergean/.node-gyp/4.1.2/include/node/node_buffer.h:43:40: note: candidate function not viable:
      requires 3 arguments, but 1 was provided
NODE_EXTERN v8::MaybeLocal<v8::Object> New(v8::Isolate* isolate,
                                       ^
In file included from ../src/init.cc:1:
../node_modules/nan/nan.h:427:26: error: no member named 'Use' in namespace 'node::Buffer'
    return node::Buffer::Use(data, size);
           ~~~~~~~~~~~~~~^
../node_modules/nan/nan.h:727:49: error: too few arguments to function call, single argument 'isolate' was not
      specified
    v8::Local<v8::Object> obj = v8::Object::New();
                                ~~~~~~~~~~~~~~~ ^
/Users/bsergean/.node-gyp/4.1.2/include/node/v8.h:2933:3: note: 'New' declared here
  static Local<Object> New(Isolate* isolate);
  ^
In file included from ../src/init.cc:1:
../node_modules/nan/nan.h:733:49: error: too few arguments to function call, single argument 'isolate' was not
      specified
    v8::Local<v8::Object> obj = v8::Object::New();
                                ~~~~~~~~~~~~~~~ ^
/Users/bsergean/.node-gyp/4.1.2/include/node/v8.h:2933:3: note: 'New' declared here
  static Local<Object> New(Isolate* isolate);
  ^
In file included from ../src/init.cc:1:
../node_modules/nan/nan.h:740:12: error: no member named 'Dispose' in 'v8::Persistent<v8::Object,
      v8::NonCopyablePersistentTraits<v8::Object> >'
    handle.Dispose();
    ~~~~~~ ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
make: *** [Release/obj.target/freetype2/src/init.o] Error 1

Three.js compatibility

Can I output a js[on] file that is compatible with the files generated by typeface.js so they can be used without modifications in three.js?

better CLI tooling

• use streams, pipe to stdout unless specified
• ensure that FreeType can be closed without memory leak (for continuous build tools)
• multiple files? globs etc?
• do not console log unless --verbose is specified

Three js integration

Hello.
I just came here and inmediately thought about threejs. It is posible to integrate this tool with the three.js API to use it as text within the WebGL Renderer?