{"id":46415,"date":"2025-01-13T15:11:42","date_gmt":"2025-01-13T20:11:42","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=46415"},"modified":"2025-01-13T15:11:42","modified_gmt":"2025-01-13T20:11:42","slug":"accessibility-that-fits","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2025\/01\/13\/accessibility-that-fits\/","title":{"rendered":"Accessibility That Fits"},"content":{"rendered":"

Soroush Khanlou<\/a>:<\/p>\n

\n

Building a design that’s responsive to both its contents and its environment is a one of the primary challenges of robust user interface programming. There are some false gods<\/a> out there and some legitimate best practices<\/a>. However, I’ve found a new strategy that really helps, especially for text that has been scaled up for accessibility reasons.<\/p>\n

[…]<\/p>\n

So it’s not going to work to just shorten the string a little bit to get the text to fit. It is an interesting idea, though, that you can make the date take up less space by configuring it slightly differently. How do you get it to show the narrower string only if it needs to? You could try to key it off the dynamicTypeSize<\/code>, which you can pull out of the environment:<\/p>\n

@Environment(\\.dynamicTypeSize) var dynamicTypeSize<\/pre>\n
But, this would ultimately be vague guesswork, and might break based on other factors, like screen size.<\/p>\n
Fortunately, SwiftUI comes with a tool that helps us pick the best fitting option out of a series of compatible views, and it’s called ViewThatFits<\/code>.<\/p>\n<\/blockquote>\n
I’ve usually seen ViewThatFits<\/code> discussed as a way to make a responsive layout that changes shape based on the available space. But it also seems to be an elegant solution for more mundane situations of figuring out how much text can fit—in this case choosing which date format to use.<\/p>\n
I was going to say that Apple has used auto-changing date formats for decades, e.g. in Mail’s table view, but upon checking it looks like Apple removed that when it removed the Mail table view in Catalina and didn’t restore it when bringing back the table view a few years later. The column no longer separately aligns the days and times, either.<\/p>\n
Finder does still adjust date formats based on the table column width, and it was not uncommon for apps to implement this themselves when I was initially developing EagleFiler, but Apple never added it as a standard framework feature, and it seems less common these days.<\/p>","protected":false},"excerpt":{"rendered":"
Soroush Khanlou: Building a design that’s responsive to both its contents and its environment is a one of the primary challenges of robust user interface programming. There are some false gods out there and some legitimate best practices. However, I’ve found a new strategy that really helps, especially for text that has been scaled up […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2025-01-13T20:11:45Z","apple_news_api_id":"afe56b37-e912-4917-81e7-8252c5f361db","apple_news_api_modified_at":"2025-01-13T20:11:45Z","apple_news_api_revision":"AAAAAAAAAAD\/\/\/\/\/\/\/\/\/\/w==","apple_news_api_share_url":"https:\/\/apple.news\/Ar-VrN-kSSReB54JSxfNh2w","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":[126,458,31,2586,30,1666,2598,568,71,1812],"class_list":["post-46415","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-applemail","tag-finder","tag-ios","tag-ios-18","tag-mac","tag-macos-10-15","tag-macos-15-sequoia","tag-nsdateformatter","tag-programming","tag-swiftui"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/46415","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=46415"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/46415\/revisions"}],"predecessor-version":[{"id":46416,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/46415\/revisions\/46416"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=46415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=46415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=46415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}