ttf2c.js

A tool to rasterize TTF fonts and convert to C code.

Works best with simple pixels fonts, particulary those made with bitfontmaker2.

Installation

npm install

Notably this requires canvas to rasterize the fonts. If it fails to install/build make sure you have the required dependencies for that first.

Usage

➜  ttf2c.js git:(main) ✗ npm run -s generate -- examples/simple4x5.ttf -c "AB?"

  "simple4x5"

Auto-generated by ttf2c.js:
  Version: v0.0.1
  Font:    simple4x5
  Glyphs:  3 / 108

+--------------------------------------+
| U+0041    "A"            4x5  (0, 0) |
+--------------------------------------+
 ███
█  █
████
█  █
█  █

+--------------------------------------+
| U+0042    "B"            4x5  (0, 0) |
+--------------------------------------+
███
█  █
███
█  █
███

+--------------------------------------+
| U+003f    "?"            3x5  (0, 0) |
+--------------------------------------+
██
  █
 █

 █

➜  ttf2c.js git:(main) ✗ npm run -s generate -- examples/simple4x5.ttf -c "AB?" -f er-301
/**
 *
 *   "simple4x5"
 *
 * Auto-generated by ttf2c.js:
 *   Version: v0.0.1
 *   Font:    simple4x5
 *   Glyphs:  3 / 108
 */

#include "font.h"

static const font_family_t info = {
  .line_height = 12.65625,
  .base        = 10.65625,
  .name        = "simple4x5"
}

const font_family_t * simple4x5_info(int id) {
  return &info;
}

/**
 * +------------------------------------------+
 * | U+0041  "A"            4x5  (0, 0)       |
 * +------------------------------------------+
 */
static const uint8_t glyph_65[] = {
  0xff, 0x00, 0x00, 0xff,                 // █  █
  0xff, 0x00, 0x00, 0xff,                 // █  █
  0xff, 0xff, 0xff, 0xff,                 // ████
  0xff, 0x00, 0x00, 0xff,                 // █  █
  0x00, 0xff, 0xff, 0xff                  //  ███
};

/**
 * +------------------------------------------+
 * | U+0042  "B"            4x5  (0, 0)       |
 * +------------------------------------------+
 */
static const uint8_t glyph_66[] = {
  0xff, 0xff, 0xff, 0x00,                 // ███
  0xff, 0x00, 0x00, 0xff,                 // █  █
  0xff, 0xff, 0xff, 0x00,                 // ███
  0xff, 0x00, 0x00, 0xff,                 // █  █
  0xff, 0xff, 0xff, 0x00                  // ███
};

/**
 * +------------------------------------------+
 * | U+003f  "?"            3x5  (0, 0)       |
 * +------------------------------------------+
 */
static const uint8_t glyph_63[] = {
  0x00, 0xff, 0x00,                       //  █
  0x00, 0x00, 0x00,                       //
  0x00, 0xff, 0x00,                       //  █
  0x00, 0x00, 0xff,                       //   █
  0xff, 0xff, 0x00                        // ██
};

static const font_t metadata[3] = {
  { .width =  4, .height =  5, .xadvance =  5, .xOffset =  0, .yOffset =  0, .bitmap = glyph_65 },  // U+0041 "A"
  { .width =  4, .height =  5, .xadvance =  5, .xOffset =  0, .yOffset =  0, .bitmap = glyph_66 },  // U+0042 "B"
  { .width =  3, .height =  5, .xadvance =  4, .xOffset =  0, .yOffset =  0, .bitmap = glyph_63 }   // U+003f "?"
};

const font_t * simple4x5_lookup(int id) {
  switch (id) {
    case 65: return &metadata[0];  // U+0041 "A"
    case 66: return &metadata[1];  // U+0042 "B"
    case 63: return &metadata[2];  // U+003f "?"
  }

  return &metadata[2];
};