https://github.com/Pomax/Minimal-font-generator

This bit of JavaScript generates fonts that implement a single character, as a zero-width glyph.
https://github.com/Pomax/Minimal-font-generator

Last synced: 3 months ago
JSON representation

This bit of JavaScript generates fonts that implement a single character, as a zero-width glyph.

• Host: GitHub
• URL: https://github.com/Pomax/Minimal-font-generator
• Owner: Pomax
• Created: 2012-01-14T01:31:42.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2016-02-05T18:10:46.000Z (almost 9 years ago)
• Last Synced: 2024-05-10T08:31:55.576Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 13
• Watchers: 6
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README

Awesome Lists containing this project

• awesome-typography - Minimal-font-generator - Font's Hello world. (JavaScript)

README

        
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.