Typr.js

KO | EN

gitlite — search

#ai #typescript #llm #golang #go #android #rust #macos #awesome #awesome-list #security #ios #mcp #open-source

(★ 1,000)

Typr.js - process fonts in Javascript

File Explorer

Download Latest Version (.zip)

- Blogger_Sans.otf
- Cabin-Bold.otf
- index.html
- LiberationSans-Bold.ttf
- photopea.html
- Typr.js
- Typr.U.js
- Typr.U.SVG.js
glyphs.png
index.html
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Typr.js

[LIVE DEMO](https://photopea.github.io/Typr.js) Typr.js is a Javascript parser and utility for working with fonts (TTF, OTF, TTC, WOFF). It is an alternative to [opentype.js](https://github.com/nodebox/opentype.js). It is the main text engine for [Photopea image editor](https://www.photopea.com).

* 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 preview](https://raw.githubusercontent.com/photopea/Typr.js/gh-pages/glyphs.png "Typr.js preview")

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.

```javascript
var fonts = Typr.parse(buffer);
console.log(fonts[0]);
```
## Typr.U
![Typr U structure](https://github.com/user-attachments/assets/ac66bd99-5462-427f-ba62-00b756a56236)

#### `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:
```javascript
{ 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:
```javascript
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](http://www.harfbuzz.org/). HarfBuzz supports advanced shaping of Arabic, Urdu, Farsi, Khmer, You need a WASM version of the library (can be found [here](https://www.photopea.com/code/ext/hb.wasm)). 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()`.

Typr.js

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Typr.js

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README