Automate Text size as text increases/decreases

Automate Text size as text increases/decreases


I made a calculator app today. It works fine but there’s just one problem.

You see when the numbers are too many, it overflows the container. I do not want to use
overflow: hidden
I came across this video on youtube who automated the text-size using words and things I didn’t understand. (ref, what is that?)
So, my question basically is, can you explain what this guy did?

Starts @ 45:10
Really need help!


You haven’t really said which part you didn’t understand.
Was it the react part or the math part for eg?


The React part, please.


Apparently ref is just a way to get access to an element in the DOM (ref stands for reference).
So you can try it and see what you get with any element. Maybe try it with the element that has your numbers and then kind of play with it by forcing it to scale when you call (just to prove that you can do it).

The other part was code that was being added to measure the element and its parent to decide whether the element needs to scale or not. You could probably just try to implement the class autoShrinkingText yourself and just do something crazy with it so you can easily see how it fits into the flow (plus the part about the componentDidUpdate). All you really need is to prove that you can get that code to run everytime someone types something and the rest, as the video says, is just maths. (maybe try to change the color of the text everytime someone types or something simple first)

Not sure if this helps… Basically I’m saying, try the code out and play with it to understand it.


Thanks. I played around with it. Realised, I can’t scale the text without using
display : inline-block
I was able to do what I wanted. I still have one question, though.
So, when the text inside scaled and got smaller as more digits entered, and it scaled smaller and smaller, after a point, the window got a scroll-bar at the bottom. I figured that was overflow, so I accordingly dealt with it. But why did that happen?


i didn’t notice the scrollbar issue, was it in the video?


It wasn’t, No.
(this bot won’t let me submit just the sentence above, so i typed this)


I wonder if you have to scale the width of the container too? Try putting borders around everything so you can see what happens as you scale the numbers.