HowTo: Autoscale Font Size - e2technologies/ViewCSS GitHub Wiki

iOS offers the user the ability to globally change their content size settings. However, it is up to the responsibility of the developer to implement this which can be extremely cumbersome. If you are using "ViewCSS", this is straight forward (this is the reason I thought to create this library).

ViewCSS defines the "font-size-scale" property which allows the developer to automatically specify that a certain text element should scale. Note that it is still up to the developer to make sure the UI looks OK when the text is scaled.

The library implements the scaling by applying the scale factor to the original font size and rounding the font size to the nearest pixel to ensure there is no strange aliasing. The final font size will be in the "config.font.scaledSize" property of the config object. This is the property that the "config.font.getFont()" method uses.

There are 2 ways to specify the scale size

Specifying a number for the "font-size-scale" Property

The number value for "font-size-scale" allows a number to be specified. This is shown below

let css: [String:Any] = [
    "my_controller.label": [
        "font-size-scale": "1.25"
    ]
]

Note that this only changes the scaling for the specific element. If you would like to globally control the scaling of all elements, you can user CSS variables as shown below.

let css: [String:Any] = [
    ":root": [
        "--global-font-size-scale": "1.25"
    ],
    "my_controller.label": [
        "font-size-scale": "var(--global-font-size-scale)"
    ]
]

This approach defines a global scaling factor in the CSS dictionary that can then be changed by the developer based on the user's OS settings. Remember, these values are cached so you will want to do it BEFORE loading. You can force a cache flush by setting the CSS dictionary again. Note that this could affect user experience because the views will not automatically reload so the user may see items of different sizes.

Specifying "auto" for the "font-size-scale" Property

By setting the "font-size-scale" property to "auto", you are telling the ViewCSS logic to decide automatically how much the font size should scale based on the user's OS settings. The library will use the UIApplication.shared.preferredContentSizeCategory to get the user's setting and a "0.15" increment of the scaling factor for each "tick" that the user adjusts the size.

If you want to bound the size of the scaling, you can use the "font-size-scale-min" and "font-size-scale-max" properties. These accept a length value. An example is shown below

let css: [String:Any] = [
    "my_controller.label": [
        "font-size-scale": "auto",
        "font-size-scale-min": "8px",
        "font-size-scale-max": "20px",
    ]
]

Retrieving the Scale Setting

The scale factor being used by ViewCSS can be read by accessing the ".cssScale" property of any class or instance (it is attached to NSObject). For example

class MyViewController : UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()

        // Get the scale factor to change the size of a UI element
        let scale = self.cssScale
    }
}

This will allow the developer to resize other UI elements based on the scale setting