Perfectly Fitting Text to Container in React Blog Post #146
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
public/images/perfectly-fitting-text-to-container-in-react/render-flow.png
Outdated
Show resolved
Hide resolved
| - `useLayoutEffect` fires because the font size changed. It checks the elements and finds that the child underflows the parent by a lot. It's too small! It updates the font size bounds to 50px and 100px respectively. It sets the new font size to halfway between the bounds (75px) | ||
| - `useLayoutEffect` fires because the font size changed. It checks the elements and find that the child is almost the same size as the parent, within 5px in width. We're done! Stop iterating | ||
|
|
||
| Note: Iteration only stops when the element _fits inside_, on that _tick_ of the algorithm |
There was a problem hiding this comment.
"Fits inside" here seems a bit ambiguous - when I read that, I think Item A can contain Item B with any amount of excess space to fit more stuff. Rather than something being a "correct fit." The first lacks the precision that I think you're trying to express? Maybe tie this back to the requirements you set out earlier (near-perfect fit within 1-2%) so that it's a bit more clear when the iterations stop.
As I read this more, the whole Note feels somewhat redundant with the useLayoutEffect bullet point. But similar feedback on that bullet point - does the interaction stop at 5px, or does it stop at a specific percent of closeness (which happens to be 5px in this example)?
There was a problem hiding this comment.
Gotcha! I clarified this paragraph. The idea is that the algorithm looks for a close-enough fit, but only stops if the fit is close and the content underflows the parent. This way we never cut off the content
|
|
||
| In the case of a page resize, they _do_ have to run all at once, but in my opinion that experience is still acceptable. Waiting a few hundred milliseconds on page resize is normal, and there are other more expensive operations running during a resize anyway. | ||
|
|
||
| Success! I can ship, and reduce the max iteration count to 20, just to be generous. |
There was a problem hiding this comment.
Reducing the count to be generous feels weird. Maybe "set the max iteration count to 20, just to be generous"? I think I know what you're trying to get at here - the max measured iteration count was 10, so setting it to 20 is generous in that context.
There was a problem hiding this comment.
Fair! I removed this paragraph and added more details to the paragraph below to explain the 20
Hello.