0

I made a calculator in React and if I press more numbers than what fits on the display they go outside of it. If I push some more, the numbers go off the screen. How do I contain them inside the display?

Here is the link to my calculator: https://codesandbox.io/s/github/AldanaBRZ/javascript-calculator?file=/src/App.js

AldanaBRZ
  • 87
  • 5
  • 1
    Set the font size according to the number of digits. This is not easy to automate. So see how many digits fit at different sizes using the font you've chosen. – QuentinUK Jun 10 '20 at 16:23
  • Look into the overflow and text-overflow css properties to start. – junvar Jun 10 '20 at 16:24

2 Answers2

2

You could style it with overflow: hidden, but then users will not see the entire result.

To accurately display the information you should reduce font, until a minimum threshold, so that the result remains in view.

If the number still does not fit, maybe resort to scientific notation.

If you are not using a monospaced calculating an elements render dimensions is a difficult problem, and is usually done using some kind of dummy hidden element. But since you have full control over the styles applied, and you are using a monospaced font, you can just do some math to calculate the required font size for it to fit.

Because the font is monospaced you know each character is the same width. Therefore you can see what the aspect ratio of a character is (width / height), because font-size does not refer to the width of the character.

Then taking into account the amount of padding you set, you can determine the number of digits that can fit.

Calculator viewport width > padding + character width * number of characters

However, when you calculate big numbers, you will eventually need to do scientific notation, if you don't want to have a very small font, and 1 number on multiple rows.

Also, humans don't really comprehend really large numbers visually, and exponents help.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Xander
  • 161
  • 7
  • You mean if the text overflows then make it smaller? That sounds like a great behavior for a calculator. May I ask you how to do that? So far I did `overflow: hidden;` and `text-overflow: ellipsis;` as a provisional solution, but just like you said, users will not see the entire result and that can be a problem. Thank you for your answer! – AldanaBRZ Jun 10 '20 at 17:34
  • I'm trying now the approach you mention on using scientific notation. I found the `toExponential` method and I'm trying to put it in my code now. Do you know if there is any way I can tell my app that if the text overflows, it should use that method to convert it to scientific notation? – AldanaBRZ Jun 11 '20 at 13:34
1

You need to specify the white-space/box overflow:

#display {
    margin: 0;
    vertical-align: bottom;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

You can find more information at the Mozilla (or your preferred) documentation.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#:~:text=The%20overflow%20shorthand%20CSS%20property,%2Dx%20and%20overflow%2Dy%20.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Pick what makes sense for you, the key is to have the overflow specified as hidden in addition to text-overflow.

Daniel B. Chapman
  • 4,647
  • 32
  • 42
  • Thank you for your answer, I now did this provisionally. But I'm more interested in the numbers still showing, but contained in the parent element. Like shrinking the font-size the moment it overflows. Do you know how I can do that? – AldanaBRZ Jun 10 '20 at 17:38
  • @AldanaBRZ you probably want to look into `font metrics` It is a touchy subject because of the number of devices you can support. If you know your exact pixel size for numbers you can calculate the size for each element, but rendering on different devices/machines/accessibility options can be difficult. You would reduce the scale per-row. As far as pure CSS, I'm not sure there's a way to do it. It is also possible via viewports or media-queries: https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – Daniel B. Chapman Jun 10 '20 at 18:56