In this post we explorer the idea to embed a animation into a font. We
do this using the new experimental wasm shaper in Harfbuzz. Any
comments and questions can be sent to
blog@erk.dev.

History⌗

Standard fonts are a human thing that have been a thing since moveable
type was first invented, and since it is a human thing it gets
complicated fast. A example of this could be the letter thorn (Þ)
which was a letter used in early English. When moveable type became a
thing it was the Y letter (since Þ was not in foreign imported fonts)
leading to the use of things like Ye (as in Ye olde pub) even when Ye
is said in the same way as The. Computer fonts came later and have to
be able to handle much of “technical debt” that have come over
hundreds of years.

Ligatures⌗

When handwriting letters often flow together and to emulate that in
moveable types you added new types. For example if you have two
singular “f” types they would have a unnatural large space between
them. So you use a “ff” (ff) ligature to make it seem more natural,
others like this exists for example f and i which becomes the “fi” (fi)
ligature. Some of these ligatures becomes its own symbol at some point
for example ampersand (&) started as a ligature for the latin Et
meaning and. And the Danish letter Æ started as a ligature for A and
E. This is another thing that also has to be emulated by modern
computer fonts. Some ligatures have their own unicode character like A
and E, but you can also add your own ligatures to a font. Some
computer fonts does this for example making -> into a arrow.

HarfBuzz is a tool to handle these kind of tranformations and many
others that are in use. It is used by many projects for example
Chromium uses it for its text shaping, which is what this kind (and
other) of transformation is called.

Wasm⌗

I saw the release notes for HarfBuzz
8.0.0 which
to my surprise had a new experimental feature that allowed you to use
wasm for the text shaping rules, I already had a bit of experiance
with wasm with the source written in rust as it were in the examples
they have.

At the time of writing Reddits /r/place is ongoing and a friend
pointed out to me that the /r/touhou
was doing a Bad Apple animation on the canvas. Bad
Apple
is a son