FONTGENERATOR.JS - DYNAMIC FONT GENERATION USING JAVASCRIPT

Following the OpenType specification, and earlier work on
generating minimal TTF fonts, fontgenerator.js generates
the bytecode for a minimal TTF with a character-to-glyph
mapping for a single character (at the moment restricted
to characters with codes between 0x0000 and 0xFFFF, due to
the font sanitiser in Chrome and Firefox only supporting
CMAP subtable format 4, which does not allow characters
with higher code points).

Since the bytecode for the minimal TTF is essentially
static code, independent of the character(s) the font
models, everything but eight bytes in the byte code are
actually boilerplate code. This means we can generate
these minimal fonts for any character we like, by simply
changing one value, encoded as a four byte value in only
two places.

Fontgenerator.js simple generates the boilerplate code,
with your character's byte code set in the right places,
and then turns that byte code into ASCII string data using
the JavaScript btoa() function, which takes binary code,
and converts it to BASE64-encoded ASCII text. This can then
be used in a data-URI so that we can load the font as if
it were a real file using a CSS @font-face rule.


WHY IS THIS USEFUL?

This little bit of code was written to solve a problem that
people were having in the PDF.js project, where a PDF file
may have fonts embedded for rendering text with, but no way
to tell whether an extracted font has actually finished
loading.

Drawing the text onto the canvas when the font isn't ready
yet will not result in an error message, but instead draws
the text with the wrong font. Clearly, something that is
undesirable when rendering PDF files. Using the fonts that
fontgenerator.js can generate, it is possible to style a
piece of sample text with "pdffont, bespokefont" and see
whether the PDF font is done loading by interval-checking
how wide the text is.

If it is zero width, the font is not done loading yet. If
it's not zero-width, the PDF's own font is available and
the real text can be rendered onto the canvas. The reason
fontgenerator.js lets you specify the character for the
sample text is that not every font is guaranteed to have
the letter you hardcode, especially since PDF allows subset
fonts.

If your text never uses the letter 'f', it simply won't
save that letter in the PDF's copy of the font. As such,
you want to extract the font, find a letter it does
implement, and then verify loading has finished based on
that letter, thus making sure every font can be checked
for, even if you don't know which letters it will contain
before opening the PDF.


DEMONSTRATOR

A demonstrator page of this approach can be found at:

  http://pomax.github.com/Minimal-font-generator/


LICENSE INFORMATION

This code is (c) Mike "Pomax" Kamermans [2012] but is
released under the MIT ("expat" flavour) license.