Wednesday, September 28, 2022 [Tweets] [Favorites]

Monospaced Digits in SwiftUI

Natalia Panferova:

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

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 🙄

Stay up-to-date by subscribing to the Comments RSS Feed for this post.

Leave a Comment