{"id":37174,"date":"2022-09-28T15:19:48","date_gmt":"2022-09-28T19:19:48","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=37174"},"modified":"2022-09-28T15:19:48","modified_gmt":"2022-09-28T19:19:48","slug":"monospaced-digits-in-swiftui","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2022\/09\/28\/monospaced-digits-in-swiftui\/","title":{"rendered":"Monospaced Digits in SwiftUI"},"content":{"rendered":"<p><a href=\"https:\/\/nilcoalescing.com\/blog\/DynamicDatesWithMonospacedDigits\/\">Natalia Panferova<\/a>:<\/p>\n<blockquote cite=\"https:\/\/nilcoalescing.com\/blog\/DynamicDatesWithMonospacedDigits\/\"><p>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.<\/p><p>To stop the UI from moving when the time changes, we can apply the <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/text\/monospaceddigit%28%29\">monospacedDigit()<\/a> modifier to the <code>Text<\/code>. It will force all the numeric characters take the same width independent of the digits they display. The other characters will remain unchanged.<\/p><\/blockquote>\n<p>It&rsquo;s one of my pet peeves when apps don&rsquo;t handle this properly. I also prefer monospaced digits with static columns of text. Otherwise, it&rsquo;s harder to scan numbers that don&rsquo;t line up, and the edge looks ragged.<\/p>","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2022-09-28T19:19:50Z","apple_news_api_id":"5808f2b3-5d7b-4a9b-bfbf-a4e5ee289180","apple_news_api_modified_at":"2022-09-28T19:19:50Z","apple_news_api_revision":"AAAAAAAAAAD\/\/\/\/\/\/\/\/\/\/w==","apple_news_api_share_url":"https:\/\/apple.news\/AWAjys117Spu_v6Tl7iiRgA","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[4],"tags":[77,133,31,2185,30,2077,71,1812],"class_list":["post-37174","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-design","tag-font","tag-ios","tag-ios-16","tag-mac","tag-macos-12","tag-programming","tag-swiftui"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/37174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=37174"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/37174\/revisions"}],"predecessor-version":[{"id":37175,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/37174\/revisions\/37175"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=37174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=37174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=37174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}