question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature(iOS): Fonts are not scaled for a11y in nativescript.

See original GitHub issue

Tell us about the problem

Platform font-size setting not respected by nativescript apps.

This is a huge problem for our target audience, which include the some who are only partially sighted.

Which platform(s) does your issue occur on?

iOS only. It works as expected on Android.

Please provide the following version numbers that your issue occurs with:

  • CLI: 4.1x
  • Cross-platform modules: 4.1.x, 4.0.x, 3.x.
  • Runtime(s): 4.1.0
  • Plugin(s): none

Please tell us how to recreate the issue in as much detail as possible.

Create a nativescript app and run it on iOS.

  1. Go to Settings -> General -> Accessibility -> Larger text and change the font-size.
  2. Go back to the nativescript app, the text is rendered the same size as before.

On iOS 10+ UILabel have the property adjustsFontForContentSizeCategory https://developer.apple.com/documentation/uikit/uicontentsizecategoryadjusting/1771731-adjustsfontforcontentsizecategor?language=objc

But my experience from solving this with our @nota/nativescript-accessibility-ext is that it only works for the preferred fonts on iOS and those are not easily set from NativeScript.

The way we solve it in @nota/nativescript-accessibility-ext is by listening for the platform setting and scaling the font-size, unfortunately this is slow and gives makes the UI jumpy.

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
m-abscommented, Jan 13, 2021

@PatrickLohan You try use our (nota.dk) @nota/nativescript-accessibility-ext and the theme extensions, that’s what we do in our own app.

0reactions
PatrickLohancommented, Mar 28, 2022

We use Nativescript-Vue and create a custom boolean prop (default true) that can be used in any text elements (labels/buttons etc.) that need to not have a11y settings.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Allow/prevent accessibility font resizing of a Label
Labels are not scaled by default. To resize a label, I need to use nativescript-accessibility-ext plugin and add the attribute ...
Read more >
@nota/nativescript-accessibility-ext - npm
Nativescript plugin for enabling accessibility features ... If you need to apply different styling when fonts are scaled, these css-classes ...
Read more >
Styling - NativeScript Docs
You can use custom fonts in your app (in .TTF or .OTF format). The NativeScript runtime will look for the font files under...
Read more >
Dynamic Type & In-App Font Scaling - Lickability
Our guide to supporting custom fonts & accessibility ... The Dynamic Type feature allows users to choose the size of textual content displayed...
Read more >
Fonts in NativeScript – Yes You Can
Did you know that you could use your own fonts in NativeScript? You're not stuck with the default Helvetica that you see every...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found