React Wrap Balancer: Simple React component that makes titles more readable

A subtle feature of OS X since its early days (but possibly not anymore) is that if you had something like a window title or a filename in Finder's column view, and you made the window or column smaller, before cutting off the text, OS X would shrink the letter spacing (and possibly other metrics) by a barely perceptible amount, so that the text could still fit. I always thought that was brilliant.

One day I was working on a very design-forward web project and wanted the same thing. Occasionally, text would wrap when it really only needed a few pixels of wiggle room to stay on one line. Thus, react-typesetting and a <TightenText> component were born: https://exogen.github.io/react-typesetting/

Eventually I realized it would be neat to make work with variable fonts (and their arbitrary axes) as well. Check out this demo: https://react-typesetting-alpha.surge.sh

I haven't touched or thought about this in a while, but I still think there's an interesting blog post to be made there about how it's done!

An interesting fact I learned about professional typesetting (and justification) is that, in order to justify lines, books don't just shrink the letter and word spacing: they also squish the characters themselves (in CSS this can be done with a scaleX transform). I guess my eyes have actually noticed this when reading books before, but I found it surprising because I always thought of the letterforms themselves as sacrosanct, and any distortion would be unacceptable. But it turns out, in almost every book you've ever read, 2–3% squishiness is perfectly acceptable.

I viciously hate that part of writing an article where I am editing the title text again and again to make it look good in the contexts of my websites.

Would this work with React Native too?