Can we access Accessibility's Larger Text Value?


#1

I’m wondering if there is a way to have my app adjust it’s text size based on the value the user sets under Accessibility:

I figure if there is just a way to get that slider value, that I can pretty easily make the necessary CSS adjustments on my end.
Thanks.


#2

Did you find a way to get the information?


#3

Unfortunately, I haven’t.

I ended up creating a “Use Larger Font” toggle switch that applied one of two stylesheets, depending if it was on/off. I used @NathanaelA’s nativescript-themes plugin to apply them dynamically.


#4

Try:

var utils = require(“utils/utils”);
var fontScale = utils.ad.getApplicationContext().getResources().getConfiguration().fontScale;

I believe that should work.

Nathanael A.


#5

@NathanaelA, thanks for the reply!

However, I’m looking for an iOS solution.
Do you know of a similar way to access the font scale on iOS?


#6

LOL, duh that is an iOS screen… I’ll see what I can dig up. :smiley:

Nathanael A.


#7

Try:

var application = require(‘application’);
var fontSize = application.ios.nativeApp.preferredContentSizeCategory;

Nathanael A.


#8

YES! Thank you :smile:

I need to look into application.ios.nativeApp a bit more, looks like there’s a lot of really useful stuff there!


#9

@NathanaelA
That’s great, thank you very much.

We can definitely use that in our accessibility plugin.

Question:
Do you know if there is a way to monitor for changes in the values on both platforms?
I assume NSNotificationCenter can be used on iOS, but what about android?


#10

Sorry, I have no idea if either of them have any sort of emitted event when they change.

Nathanael A.


#11

On iOS it is very easy to get the updated value:

import * as application from 'application';

if (application.ios) {
  application.ios.addNotificationObserver(UIContentSizeCategoryDidChangeNotification, (args) => {
    const newValue = args.userInfo.UIContentSizeCategoryNewValueKey.
    // DO STUFF.
  });
}

NOTE: The iOS simulator doesn’t give the proper value.

On Android I think we need to update android:configChanges in AndroidManifest.xml, but I don’t (yet) know how to get the update inside the app.

Updated:
On Android Labels, buttons etc. have their text scaled with you change the system’s Display -> font size.
On iOS I can’t get Labels, buttons etc to auto scale their text content.
On iOS 10 there should be an adjustsFontForContentSizeCategory property on UILabels, but it doesn’t seem to work.


#12

Sorry I keep updating, but I figured it out on both platforms:

import * as nsApp from 'application';
import { isAndroid, isIOS } from 'platform';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

const fontScaleSubject = new BehaviorSubject<number>(1);
fontScaleSubject.subscribe((value) => console.log(`fontScale = ${value}`));

if (isAndroid) {
  nsApp.on(nsApp.launchEvent, (/*eventData: nsApp.LaunchEventData*/) => {
    fontScaleSubject.next(nsApp.android.context.getResources().getConfiguration().fontScale);

    nsApp.android.context.registerComponentCallbacks(new android.content.ComponentCallbacks2({
      onLowMemory() {
        // Dummy
      },
      onTrimMemory() {
        // Dummy
      },
      onConfigurationChanged(newConfig: android.content.res.Configuration) {
        fontScaleSubject.next(newConfig.fontScale);
      }
    }));
  });
} else if (isIOS) {
  const sizeMap = new Map<string, number>([
    [UIContentSizeCategoryExtraSmall, 0.5],
    [UIContentSizeCategorySmall, 0.7],
    [UIContentSizeCategoryMedium, 0.85],
    [UIContentSizeCategoryLarge, 1],
    [UIContentSizeCategoryExtraLarge, 1.15],
    [UIContentSizeCategoryExtraExtraLarge, 1.30],
    [UIContentSizeCategoryExtraExtraExtraLarge, 1.50],
    [UIContentSizeCategoryAccessibilityMedium, 2],
    [UIContentSizeCategoryAccessibilityLarge, 2.5],
    [UIContentSizeCategoryAccessibilityExtraLarge, 3],
    [UIContentSizeCategoryAccessibilityExtraExtraLarge, 3.5],
    [UIContentSizeCategoryAccessibilityExtraExtraExtraLarge, 4],
  ]);

  const contentSizeUpdated = (fontSize: string) => {
    if (sizeMap.has(fontSize)) {
      fontScaleSubject.next(sizeMap.get(fontSize));
    } else {
      console.error(`fontSize: ${fontSize} is unknown`);
    }
  };

  let fontSizeObserver: any;
  nsApp.on(nsApp.launchEvent, (/*eventData: nsApp.LaunchEventData*/) => {
    contentSizeUpdated(utils.ios.getter(nsApp.ios.nativeApp, nsApp.ios.nativeApp.preferredContentSizeCategory));

    fontSizeObserver = nsApp.ios.addNotificationObserver(UIContentSizeCategoryDidChangeNotification, (args) => {
      const fontSize = args.userInfo.valueForKey(UIContentSizeCategoryNewValueKey);
      contentSizeUpdated(fontSize);
    });
  });

  nsApp.on(nsApp.exitEvent, () => {
    nsApp.ios.removeNotificationObserver(fontSizeObserver, UIContentSizeCategoryDidChangeNotification);
  });
}

#13

A little shameless promotion of our @nota/nativescript-accessibility-ext plugin:

We now support font scaling on both platforms.

Android have always had auto scaling of fonts in their Labels.
iOS 10+ you could to set the adjustsFontForContentSizeCategory=true on their UILabel. Unfortunately this only applied to a few predefined fonts (which were hard to set from NativeScript CSS).

Using the plugin:
If all you need is get the Labels to scale their fonts, simply set accessibilityAdjustsFontSize="true" in your template.

If you need to apply styles at a certain fontScale label, you can use these CSS-classes from the Page.

a11y-fontscale-50 (iOS only)
a11y-fontscale-70 (iOS only)
a11y-fontscale-85
a11y-fontscale-100
a11y-fontscale-115
a11y-fontscale-130
a11y-fontscale-150 (iOS only)
a11y-fontscale-200 (iOS only - extra large fonts)
a11y-fontscale-250 (iOS only - extra large fonts)
a11y-fontscale-300 (iOS only - extra large fonts)
a11y-fontscale-350 (iOS only - extra large fonts)
a11y-fontscale-400 (iOS only - extra large fonts

This is useful, if you want/need to adjust padding/margins.

Finally, if you need to get the font scale value yourself, you can use the FontScaleObservable to get the value of fontScale :slight_smile:

https://www.npmjs.com/package/@nota/nativescript-accessibility-ext

We have a stable release for {N}-2.5 and an alpha release for {N}-3.0.

  • @nota/nativescript-accessibility-ext@2.5.x - For {N}-2.5
  • @nota/nativescript-accessibility-ext@3.0.x - For {N}-3.0

#14

Seems like a great plugin! Can you add the “NativeScript” key to the package files. The plugin sites normally will ignore you plugin unless you tag it as a NativeScript plugin. :wink:

http://fluentreports.com/blog/?p=489

Nathanael A.


#15

Thanks for the tip.

I’ve added the NativeScript to the package.json and it is already on nativescript.rocks :slight_smile:


#16

Awesome… That is because my plugin site is very smart… :wink:

Nathanael A.