I’m scratching my head about how to solve the “digits exceed the display” issue in my calculator. I could imagine an easy way:
- I specify the calculator’s dimensions, in pixels
- I specify the display font size, in pixels
- I figure out, accounting for my font, how many monospace characters will fit in the display and use
.lengthto take action when it hits the limit (I’m trying to emulate a very basic, old-school pocket calculator, so I’d prefer to show “E” or the like instead of switching to scientific notation)
But I have a bit of a problem with the very first step, there. I was planning to make it responsive. I think it would be a real worst-case scenario if someone had to scroll to use it on a phone, and I’d prefer not to have it appear tiny on some gigantic resolution. Plus I worry–what if my font doesn’t come through? What if some different browser’s rendering throws off my visual estimation of the number of digits that fit?
I was hoping for some “magic” way, since there’s CSS
text-overflow, to alert if it’s being activated, but looks like there isn’t. I’ve seen some promising solutions involving comparing clientWidth, scrollWidth, offsetWidth, or the like, but guess what, most of those aren’t implemented yet (or is it anymore?) on most browsers.
Bottom line: Am I being too hung up on responsive design and should I go ahead and hard-code it? Or is there a way to have my cake and eat it too?