← Back to context

Comment by jansan

1 year ago

The blog post talks a lot about how he got the frames into the font, but very little about how the animation works.

AFAICT this is how it is done (edit: I am wrong, it uses Wasm):

- The frames of the video are simply stored as glyphs in the font

- There is a ligature mapping for sequences of dots to glyphs (for example "." is mapped to glyph 1, ".." is mapped to glyph 2, "..." is mapped to glyph 3, etc.

- If you use the font in an editable part of the browser and hold the "." key pressed, dots get added by autorepeat and a growing a sequence of dots is inserted. This sequence of dots is converted by the font's ligature mapping to different animation frame glyphs, thus showing the animation.

I have no idea why WASM and HarfBuzz are needed (it should work in any modern browser without them), but it looks like a fun little experiment.

5 comments

jansan

Reply
zerocrates  1 year ago

A new experimental feature of HarfBuzz allows the font to include WASM code for the shaper within the font itself. So the code shown in the post is inside the font and getting run "live," rather than being something that generated or modified the ligature tables in the font file in advance.

I wondered myself about just using "simple" ligatures, but I don't know whether or not it's feasible to statically store several thousand ligature definitions in a font that are each mostly runs of several thousand characters being substituted. But maybe? OpenType has mysterious depths.

  • jansan  1 year ago

    Should be no problem. GSUB lookup type 4.1* uses a uint16 to store the number of ligatures, so 65000 ligatures should be feasible. To store the actual glyphs, 32bit offsets are used, so you theoretically have a 2GByte of memory available, which should be plenty (although I have never seen a font larger than 15MB).

    Using Wasm for this animation really is an overkill IMHO.

    *) https://learn.microsoft.com/en-us/typography/opentype/spec/g...

    Edit: IIRC Ligatures are applied recursively, so you can have a ligature based on other ligatures. If I am right here, each ligature can consist only of two glyphs (the glyph of the previous animation frame followed by a dot). This would keep the GSUB table small.

    • erk__  1 year ago

      I used wasm because bad apple was the first thing I thought of when I saw the update that added wasm. I have thought about doing something where wasm fits better, but I have not gotten around to that yet.