Parsing on node.js, rendering in browser

Expected Behavior

Feature request / help needed: we’d like to parse fonts on the server side (Node.JS) and only render the parsed font in the client (Browser).

Current Behavior

The server part is a REST api endpoint which returns a JSON object containing all font information - basically the result of the opentype.js font instance. This enables us to do validation (font support) and caching the results of each parsed font. Output looks like this:

{
    "supported": true,
    "glyphs": {
        "glyphs": {
            "0": {
                "index": 0,
                "name": ".notdef",
                "unicodes": [],
                "advanceWidth": 748,
                "leftSideBearing": 67
            },
            ...
        },
        ...
     },
     ...
}

Goal: using the returned object in the client so we can skip parsing an ArrayBuffer on the client - to improve performance and reducing file size on the client.

Possible Solution

Idea: to create an opentype.js instance in the client with an object as source. Other ideas to get this working would be greatly appreciated.

Your Environment

• Version used: 0.10.0
• Font used: all
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): All

[adriaanmeuris]

Since we’re doing custom rendering on the client, we’ve used opentype to parse the font on the server side, returning a plain object that’s consumed on the client (were we don’t use opentype).

import { parse } from 'opentype.js';
import forEach from 'lodash/forEach';

class OpentypeParser {
  constructor(buffer) {
    // Parse the font using opentype
    this.font = parse(buffer);
    
    // Loop over glyps
    this.glyphs = [];
    forEach(this.font.glyphs.glyphs, (g) => {
      this.glyphs.push({
        index: g.index,
        advanceWidth: g.advanceWidth,
        ...
      });
    })
  }

  toJSON() {
    return {
      glyphs: this.glyphs,
    };
  }
}

This class allows us to parse a font using opentype as a plain object (pseudo code)

const buffer = fs.readFileSync('arial.ttf');
const obj = new OpentypeParser(buffer).toJSON();
console.log(obj); // Plain object to send as response to the client

This object can be used on the client as you wish, assuming you don’t want to import the entire library there.

[Jolg42]

Great! Thanks 😉