This Nile pipeline, TextSpans, takes a stream of
GlyphBeziers: each glyph's outline curves, read from the font by
plain TypeScript, tagged with the glyph's advance. It wraps the text into
lines (WordWidths runs backwards, so each word's first glyph
knows how wide the word is), lays the glyphs out, transforms them onto the
page, clips them and rasterizes them into coverage spans.
PaintSpans turns the spans into coloured pixels, which TypeScript
writes to the canvas. The pipeline is parameterized by the line width, the
line height, a matrix that scales and places the text, and the clip
rectangle. Colour emoji are layers of outlines, so the page splits the stream
after layout and paints each colour in turn. On the GPU, the rasterizer runs
as WGSL (Rasterize2).
This page: about 170 lines of Nile and 720 lines of TypeScript (210 of them read TrueType fonts), compiled by umgeni.
How to use: edit the text, drag the size, or pick a font;
drop a .ttf file onto the page to set the text in it. The renderer
menu switches between the CPU and the GPU.