Show HN: Scrawl-canvas – a new text layout engine

scrawl-v8.rikweb.org.uk

2 points

2 years ago

I've spent the last 4 months ripping out my canvas library's text layout engine and replacing it with something entirely new. This work has led me on an adventure of discovery around how various languages choose to record their sounds in fonts (why, Thai? Just ... why??) and the various (nefarious!) approaches browsers use to layout those fonts in web pages.

The new engine:

- Handles horizontal (ltr and rtl) and vertical fonts, with justify options.

- Styling text (underlines, overlines, highlights) is done with the help of HTML/CSS markup in the text, and can include gradients and patterns as well as any CSS color string.

- Text can be fitted into template shapes, or along a path. This is a bit like the CSS shape-inside property[1] (currently not supported widely by browsers).

- With a bit of extra work, text can be selected/copied - even text-along-a-path. (Though I'm determined not to be tricked into creating a text editor demo for this sort of thing!)

This is an MVP release. If anyone sees glitches, errors or improvements please let me know. Also: enjoy!

[1] - see the "Creative text flows using CSS shapes" article on LogRocket - https://blog.logrocket.com/creative-text-flows-using-css-sha...