Support adjustable font text size (Dynamic Type)

[SBiOSoftWhare]

Goal

The goal is to support as much as possible device text size change aka Dynamic Type.
This issue is focused on development side and has been made to handle #496

Prerequisite

To support Dynamic Type we should use Text Styles. In Element we are now using following Text Styles: https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0

Update automatically views on device font size change

UILabel, UITextField and UITextView conform to UIContentSizeCategoryAdjusting protocol and have a property called adjustsFontForContentSizeCategory that enables to automatically updates its font when the device's content size category changes.

To automatically update views when text size change in system:

• For UILabel, UITextField and UITextView:
  • In interface builder: Check the Automatically Adjusts Font checkbox in the Attribute inspector.
  • Programmatically: adjustsFontForContentSizeCategory = true
• For UIButton a variable called @IBInspectable var vc_adjustsFontForContentSizeCategory: Bool has been added in UIButton extension:
  • In interface builder: In the Attribute inspector set the custom vairable vc_adjustsFontForContentSizeCategory to on.
  • Programmatically: vc_adjustsFontForContentSizeCategory = true

Listen to device font size change

If you want to update your layout in real time according to the device font changes and adjustsFontForContentSizeCategory is not enough. You can react to the change in UIView or UIViewController this way:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
  if previousTraitCollection?.preferredContentSizeCategory !=
    traitCollection.preferredContentSizeCategory {
    // content size has changed
  }
}

It's also possible to listen to changes with UIContentSizeCategory.didChangeNotification notification. More information here.

Source: https://useyourloaf.com/blog/auto-adjusting-fonts-for-dynamic-type/

Debug font size change

In Xcode with the Environment Overrides: https://sarunw.com/posts/scaling-custom-fonts-automatically-with-dynamic-type/#debugging-font-size

With the Accessibility Inspector: https://fluffy.es/introduction-to-dynamic-type/#inspector

[manuroe]

An example of implementation is #4445

[ara4n]

(the non-goal-based version of this issue is #496)

[YourOrdinaryCat]

Has there been any movement here? There's many inconsistencies with text sizing, having this addressed would be great - some screenshots with a large text size (I don't tend to use text this large, but I do have it a bit smaller, and it's still noticeable - this just makes it clearer):

Would be great to have everything functioning.

[pixlwave]

@YourOrdinaryCat This is unlikely to happen on Element iOS any more. We're focussed on Element X (which has supported Dynamic Type from the get go) and a lot of the code that would need to be updated is very old and fragile. Sorry I can't be more helpful here, but I would recommend you try out our early TestFlight of Element X to see if it suits your needs.

[YourOrdinaryCat]

Got it, that is a bit sad though. Element X doesn't support iOS 15, are there any plans for an iOS 15 target or are we stuck with Element (and the web version)?

[pixlwave]

Sadly no, Element X's navigation is all based upon APIs from iOS 16, so it won't be possible to support 15 I'm afraid.