Monospaced Digits in SwiftUI
We can see that the time within the text dynamically changes but the UI jitters as digits update. This happens because by default digits have proportional width and different digits take a different amount of space.
To stop the UI from moving when the time changes, we can apply the monospacedDigit() modifier to the
Text. It will force all the numeric characters take the same width independent of the digits they display. The other characters will remain unchanged.
It’s one of my pet peeves when apps don’t handle this properly. I also prefer monospaced digits with static columns of text. Otherwise, it’s harder to scan numbers that don’t line up, and the edge looks ragged.
1 Comment RSS · Twitter
Nice touch and great advice to devs who comes across such use cases.
Now I’ll just patiently wait for Apple to fix countdown Texts on iOS 16 widgets 🙄
