Typr.js

LIVE DEMO Typr.js is a Javascript parser and utility for working with fonts (TTF, OTF, TTC, WOFF). It is an alternative to opentype.js. It is the main text engine for Photopea image editor.

• light and small (110 kB unminified uncompressed, 4x smaller than opentype.js)
• ultra fast (2x to 5x faster parsing than opentype.js)
• successfully parsed more than 3000 fonts (opentype.js had problems with many of them)
• simple structure and easy to extend
• supports colored (SVG) fonts and variable fonts

Typr.js consists of static functions only, it can be easily rewritten into C or any other procedural language. There are no constructors, no methods, no complex structure. It consists of two independent parts (separate files):

• Typr - main parser, parses the raw data, generates the font object.
• Typr.U - Typr utilities. Basic operations with fonts. Use it as a guide to write your own utilities.
• Typr.U.SVG - SVG-related utilities, use them only when working with SVG fonts.

Typr

Typr.parse(buffer)

• buffer: ArrayBuffer, binary data of the TTF, OTF or TTC font
• returns an array of font objects (one item for TTF/OTF, multiple for TTC)

The font object has a structure, wich corresponds to the structure of the TTF/OTF file. I.e. it is a set of tables, each table has its own structure.

var fonts = Typr.parse(buffer);
console.log(fonts[0]);

Typr.U

Typr.U.codeToGlyph(font, code)

• font: font object
• code: integer Unicode code of the character
• returns an integer index of the glyph, corresponding to the unicode character

Typr.U.shape(font, str, prm)

• font: font object
• str: standard JS string
• prm: parameters object: "ltr":left-to-right, "fts": features, "axs": axes (array of values, a value for each axis)
• returns a shape: a geometric description of a string. The output is an array of elements. Each element has these parameters g: Glyph index, cl: Cluster index , ax, ay: Advancement of a glyph, dx, dy: an offset from a pen, at which the glyph should be drawn.

The shape can have a different length, than the input string (because of ligatures, etc). The cluster index says, which part of string the glyph represents.

Typr.U.glyphToPath(font, gid, ignoreColor, axs)

• font: font object
• gid: index of the glyph, which you want to access
• ignoreColor: ignore a color version of a glyph, if present
• axs: axes (see above)
• returns the vector path of the outline of the glyph

Typr.U.shapeToPath(font, shape)

• font: font object
• shape: e.g. the output of Typr.U.shape(...)
• prm: parameters object (see above)
• returns the vector path of the outline of the glyph

Typr.js uses the following structure to represent the path:

{ cmds: [CMD,CMD,CMD, ...], crds:[X,Y,X,Y, ...] }

cmds is an array of commands (Strings), crds is an array of coordinates (Numbers). Each command needs a specific number of coordinates. The path can be processed by passing both arrays from the left, index into crds depends on the types of previous commands.

• "M": (X,Y) - move the pointer to X,Y.
• "L": (X,Y) - line from the previous position to X,Y.
• "Q": (X1,Y1,X2,Y2) - quadratic bézier curve from the previous position to X2,Y2, using X1,Y1 as a control point.
• "C": (X1,Y1,X2,Y2,X3,Y3) - cubic bézier curve from the previous position to X3,Y3, using X1,Y1 and X2,Y2 as control points.
• "Z": () - draw a line to the first point to finish the outline.
• "#rrggbb" : () - set the current collor to RGB(rr,gg,bb) (SVG fonts use this)
• "X": () - fill the current path (SVG fonts use this)

A "raindrop" shape: { cmds:["M","L","Q","Z"], crds:[0,0,20,80,0,120,-20,80] } (2 + 2 + 4 + 0 coordinates).

The format is similar to SVG, but commands and coordinates are separated. It is comfortable to work with coordinates as a set of 2D points, apply affine transformations etc.

Typr.U.pathToContext(path, ctx)

• path: path to draw
• ctx: context2d to draw the path into

It executes each command of the path with a corresponding command of context2D: moveTo(), lineTo(), ... and fill(). It does nothing else (you must call translate(), scale(), fillStyle ... manually).

Typr.U.pathToSVG(path)

Converts a path to an "SVG path string", which can be used in <path d="..." />.

Extending Typr

Let's implement a little function for drawing a string:

Typr.U.stringToContext = function(font, str, ctx, size, color, x, y)
{
  var shape = Typr.U.shape(font, str);
  var path  = Typr.U.shapeToPath(font, shape);
  var scale = size / font.head.unitsPerEm;
  
  ctx.translate(x,y);  ctx.scale(scale,-scale);
  
  ctx.fillStyle = color;
  Typr.U.pathToContext(path, ctx);
  
  ctx.scale(1/scale,-1/scale);  ctx.translate(-x,-y);
}

Shaping with HarfBuzz

Typr.U.shape() provides only basic text shaping. For advanced shaping, Typr.js can be integrated with a HarfBuzz shaping library. HarfBuzz supports advanced shaping of Arabic, Urdu, Farsi, Khmer, You need a WASM version of the library (can be found here). The integration is done through a following function.

Typr.U.initHB(url, clb)

• url: the URL of the HarfBuzz WASM file
• clb: a callback function, that is called when the HarfBuzz is loaded and ready to use

Once the HarfBuzz is loaded, you can use Typr.U.shapeHB() instead of Typr.U.shape(). It accepts identical parameters and returns a shape in the identical format, which can be used with e.g. Typr.U.shapeToPath().