4 ms·

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

50 points by leerob 4y ago

mikojan 4y ago
This is amazing! Thank you for bringing it up! 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.
josefrichter 4y ago
This is fantastic. I remember having a requirement for this on a project some 2 years ago. The devs didn’t know how to do it easily and as always, they had bigger fish to fry. Glad to see this exists now. Would this work with React Native too?
- shuding 4y ago
  No it didn’t work with React Native because it uses a bunch of browser APIs to measure the content size, but I hope someone will build an alternative for RN!
exogen 4y ago
Hey, a topic I know something about! I've done something similar to this: "tightening" text to resist wrapping but not prevent it. I'll describe: 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/ 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 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.
- exogen 4y ago
  And while the folks who are interested in web typography are here: here's another neat experimental demo: river detection in JavaScript: https://twitter.com/ua6oxa/status/1256734388072574976 https://twitter.com/ua6oxa/status/1256734388072574976
jamesdwilson 4y ago
[deleted]
- Zpalmtree 4y ago
  no
- solardev 4y ago
  No, look at the examples on the page. It avoids typographic orphans, that lonely last word on its own line after a reflow. This is standard in desktop publishing (Word, InDesign, etc.) but CSS has very weak support for it... http://thenewcode.com/946/CSS-last-line-Controlling-Widows-amp-Orphans http://thenewcode.com/946/CSS-last-line-Controlling-Widows-a... Doesn't work in headings, and not supported by Firefox. So you need JS to hack it.

50 points by leerob 4y ago

This is amazing! Thank you for bringing it up! 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.

josefrichter 4y ago

This is fantastic. I remember having a requirement for this on a project some 2 years ago. The devs didn’t know how to do it easily and as always, they had bigger fish to fry. Glad to see this exists now. Would this work with React Native too?

shuding 4y ago
No it didn’t work with React Native because it uses a bunch of browser APIs to measure the content size, but I hope someone will build an alternative for RN!

exogen 4y ago

Hey, a topic I know something about! I've done something similar to this: "tightening" text to resist wrapping but not prevent it. I'll describe: 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/ 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 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.

exogen 4y ago
And while the folks who are interested in web typography are here: here's another neat experimental demo: river detection in JavaScript: https://twitter.com/ua6oxa/status/1256734388072574976 https://twitter.com/ua6oxa/status/1256734388072574976

jamesdwilson 4y ago

[deleted]

Zpalmtree 4y ago
no
solardev 4y ago
No, look at the examples on the page. It avoids typographic orphans, that lonely last word on its own line after a reflow. This is standard in desktop publishing (Word, InDesign, etc.) but CSS has very weak support for it... http://thenewcode.com/946/CSS-last-line-Controlling-Widows-amp-Orphans http://thenewcode.com/946/CSS-last-line-Controlling-Widows-a... Doesn't work in headings, and not supported by Firefox. So you need JS to hack it.