feat: dynamic type text sizes not supported

[timhunt]

Bug Report

Ionic version:

4.11.0

Current behavior:

On iOS, ionic apps ignore the preferred font size that the user has set in the system preferences. (Apple calls this Dynamic Type Sizes https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/). Irrespective of what you set there, the text inside Ionic apps is always the same size.

(For comparison, when you build for Android, the Ionic app uses the font size the user has set in system preferences. https://material.io/design/usability/accessibility.html#layout-typography)

Expected behavior:

Ionic apps by default use the system-defined font size on all platforms.

Steps to reproduce:

On iOS:

1. Go to Phone settings -> Display & Brightness -> Text Size, and change the system font size. (Note that the text on that page resizes immediately.)
2. Run any Ionic app (e.g. the test app mentioned below, or the Moodle mobile app https://moodle.com/app/)
3. Note the size of the text.
4. Now go back to the phone settings and change to font size to something different.
5. Go back to the Ionic app, and note that the text size has not changed.

For comparison, you can do the same thing on an Android device, and the Ionic app will change font size, and the font size will match the system text, e.g. on the settings screen.

Note that this is important for accessibility.

Related code:

I made the simplest possible Ionic/Cordova app to test this:
https://github.com/timhunt/dynamicTypeTest

When run, it just displays this screen: https://github.com/timhunt/dynamicTypeTest/blob/master/src/pages/home/home.html which has this associated JS https://github.com/timhunt/dynamicTypeTest/blob/master/src/pages/home/home.ts#L14 to display a simple dialogue if you click the button. All this just uses the standard Ionic SCSS to style things. I have not added any SCSS of my own.

The https://github.com/timhunt/dynamicTypeTest/tree/master/screengrabs folder has some screen-grabs of the app running (in an emulator, but that does not matter) with different settings for the system preferred font size. For comparison, there are also screen-grabs of a page from an Apple / Google app. This shows that on Android does a good job of picking up the system font setting, but on iOS it completely ignores the system font setting. (The Ionic default styling seems to be a good match for the smallest system font size.)

Other information:

I have done my best to research this before raising an issue (and I was not sure if this was a bug report or a feature request. I'm sorry if I got this wrong.) The thing that surprises me most is how little discussion I can find about this. I feel sure that people must have thought about this before, but I have not found much. Pretty much the only thing I found was https://forum.ionicframework.com/t/ionic-get-the-mobile-os-font-size-in-app/101498/3 and the phonegap plugin it links to. I am surprised behaviour is so different between iOS and Android.

Thanks in advance for any information you can give up. Since we want this fixed, then given some suitable guidance, we might have resources to work on a pull request. (However, I have not done any development on the Ionic framework code before.)

Cross reference: here is the bug report on the Moodle Mobile app that lead me to start investigating this: https://tracker.moodle.org/browse/MOBILE-2097.)

Ionic info:

Ionic:

ionic (Ionic CLI) : 4.11.0 (C:\Users[DELETED]\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 3.2.2

Cordova:

cordova (Cordova CLI) : 9.0.0
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 4 other plugins)

System:

NodeJS : v8.14.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 7

Environment:

HTTP_PROXY : [DELETED]
HTTPS_PROXY : [DELETED]

[liamdebeasi]

Thanks for the issue! While this is an Ionic 3 application, I am going to keep this open since this is still occurring in Ionic 4.

I have created an Ionic 4 reproduction here: https://github.com/liamdebeasi/dynamic-text-ionic

[Tsabrandon]

Is there any update on this?

[NilLlisterri]

Is there any update on this?

[davidseek]

Any news?

[sathyaincampus]

Are there any updates on this? Is there any workaround for showing bigger fonts on IOS. I see that comparitively my android fonts are bigger and looking good but on ios app fonts are way too smaller when generated from ionic! Would like to launch the app asap! Fast response would be much appreciated!!

[svknvs]

Yes, I also tried with iPhone and found it is not possible to increase the font size by making adjustment in the iphone settings by changing the Text Size to Larger Font Size.
It doesn't makes any change in the Ionic App. The text remains the same.

[davidseek]

I have not yet looked deeper into this.
But my suggestion would be to see if there is any variable or exposed API to get the current accessibility settings. So you know whatever the user selected.

Then I would do something like get font-size from ngStyle and use whatever I got from above to determine the value.

If there is nothing, then I suggest creating a plugin that exposes it.

[kpedrok]

Nothing yet?

[mastergogo]

any update on this? it is very important for our low vision users and WCAG compliance.

[toncabral1988]

Hi guys!

This did work for me.

@supports (font: -apple-system-body) {
html {
font: -apple-system-body;
}
}

[mastergogo]

Hi @toncabral, Thanks for sharing, but it didn't work for me - I added this in the global.scss file that I have and the app still does not react if I increase the text size.

[toncabral1988]

Hi @toncabral, Thanks for sharing, but it didn't work for me - I added this in the global.scss file that I have and the app still does not react if I increase the text size.

in my case, it was necessary reload the application after change the text size. I know that doesn't better solution, but for now it helps me

[appstore-redphoenix]

@toncabral BTW thank you for the suggestion. By "reload the application" do you mean pause (go to backgroun) and then resume or remove the app from memory and then restart via click of icon? TIA.

[toncabral1988]

@toncabral BTW thank you for the suggestion. By "reload the application" do you mean pause (go to backgroun) and then resume or remove the app from memory and then restart via click of icon? TIA.

Yes, restart the app.

[appstore-redphoenix]

thank you

…

On Nov 6, 2020, at 12:16 PM, toncabral ***@***.***> wrote: @toncabral <https://github.com/toncabral> BTW thank you for the suggestion. By "reload the application" do you mean pause (go to backgroun) and then resume or remove the app from memory and then restart via click of icon? TIA. Yes, restart the app. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#18592 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQDXICYKLNFUIP4FZU42I3DSOQ4QZANCNFSM4H2TF5KA>.

[JanettHolst290490]

It is a law in my country to support accessibility in all public projects. So this is a huge problem and might be a deal breaker when choosing app framework.
Hope it gets resolved soon.

[tauhidbs23]

Hi guys!

This did work for me.

@supports (font: -apple-system-body) { html { font: -apple-system-body; } }

in my case not working , any update

[dimitriscsd]

Has there been any decision about this issue? Is it something ionic plans to sort out? If not, is there a suggested workaround, approved by Ionic?

I have seen the suggestion above and will give that a shot but it sounds like some people had success with it and some not.

[m-apsolon]

+1 on this issue.

[DalterioRaffaele]

Hi guys!

This did work for me.

https://ionicframework.com/docs/v3/native/mobile-accessibility/

After adding the plugin, i entered this code in app-component.ts

initializeApp() {
this.platform.ready().then(async () => {
if(this.platform.is('ios')){this.mobileAccessibility.usePreferredTextZoom(true);}
)}

and in app.module.ts add MobileAccessibility as providers and now iOS work with 'Dynamic type' user preferred font size, also works with capacitor.

[sedonaguy]

This plugin will also fix the problem (and is more lightweight):
https://capacitorjs.com/docs/apis/text-zoom

[JulienLecoq]

This plugin will also fix the problem (and is more lightweight): https://capacitorjs.com/docs/apis/text-zoom

But you have to kill and re-start the app to take effect, right? I don't see any listener to the preferred font-size. So that's half a solution :/

[corysmc]

This plugin will also fix the problem (and is more lightweight): https://capacitorjs.com/docs/apis/text-zoom

But you have to kill and re-start the app to take effect, right? I don't see any listener to the preferred font-size. So that's half a solution :/

You can use the app state listener to then check the preferences, and update zoom when the app becomes active
https://capacitorjs.com/docs/apis/app#example

[JulienLecoq]

This plugin will also fix the problem (and is more lightweight): https://capacitorjs.com/docs/apis/text-zoom

But you have to kill and re-start the app to take effect, right? I don't see any listener to the preferred font-size. So that's half a solution :/

You can use the app state listener to then check the preferences, and update zoom when the app becomes active https://capacitorjs.com/docs/apis/app#example

Ah right, nice trick. But we agree that this is still a workaround and that this issue should just not exist at all.

[slclark]

I'm working on an app that is specifically for accessibility purposes. It would be preferred for the app to use the system font settings. This doesn't seem to be working at the moment. Has there been any movement on this issue?

[liamdebeasi]

We plan to ship this feature. I don't have an estimate of when it will be done, but we recently finished design work for this and are now proceeding to implementation.

[staff0rd]

@liamdebeasi the implementation you speak of - is it specific to iOS as OP is suggesting? Or, will the implementation affect Android as well? I'm trying to understand whether Ionic currently has any support for system (actually browser) based text scaling in Android as I'm isolating an issue where sometimes text scaling works as expected on Android but sometimes it does not.

[liamdebeasi]

Android's text scaling applies to all web content, so text in Ionic apps should already scale up and down according to the system level setting. This feature is dedicated to the iOS Dynamic Type feature which requires us to opt-in to using it.

[BrianSchwaz]

This plugin will also fix the problem (and is more lightweight): https://capacitorjs.com/docs/apis/text-zoom

But you have to kill and re-start the app to take effect, right? I don't see any listener to the preferred font-size. So that's half a solution :/

You can use the app state listener to then check the preferences, and update zoom when the app becomes active https://capacitorjs.com/docs/apis/app#example

@corysmc Can you possibly include an example code snippet of combining the listener with the appropriate logic from https://capacitorjs.com/docs/apis/text-zoom to have the application react to the font size set in the user's settings?

[liamdebeasi]

Hi everyone,

The team is very excited to announce that this has been implemented in Ionic via #28314! We plan to release this in an upcoming minor release of Ionic. We'll have a formal announcement as well as new documentation when this feature ships.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.