element-hq / element-hq/element-ios
Support adjustable font text size (Dynamic Type)
- Dominant language
- Swift
- Stars
- 1.8k
- Forks
- 544
- PR merge metrics
- PR metrics pending
Description
## Goal
The goal is to support as much as possible device text size change aka [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically).
This issue is focused on development side and has been made to handle #496
## Prerequisite
To support Dynamic Type we should use [Text Styles](https://developer.apple.com/documentation/uikit/uifont/textstyle/). 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](https://developer.apple.com/documentation/uikit/uicontentsizecategoryadjusting/1771731-adjustsfontforcontentsizecategor) 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](https://developer.apple.com/documentation/uikit/uicontentsizecategory/1622948-didchangenotification).
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
Contributor guide
Assessment
This issue has not been assessed yet.