element-hq / element-hq/element-ios

Support adjustable font text size (Dynamic Type)

Open
#4,444 6 comments 6 reactions 0 assignees View on GitHub
A11y O-Frequent T-Enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.