How to get the accessibility font size for iOS and Android in Xamarin.Forms so I can change font-size in a HTML WebView?

Question

I am trying to allow the HTML font-size in a Xamarin.Forms WebView to increase/decrease in size according to the user's accessibility Large Text settings.

I want to do the following:

1: Get the preferred font size for text options (title, body, caption, etc.) from the Accessibility Large Text options for iOS and Android.

2: Get the default size for some HTML text (h1 could be 15px, h2 could be 13px, h3 could be 11px, p could be 7px, etc.) and use that with the correct text option (h1 <-> title, p <-> body) to calculate the new font-size for that HTML element.

I have found some links for iOS , Android/iOS and Xamarin.Forms on how to get some font-sizes but I can not figure out how I would get these sizes, translate the sizes of these text options to the size of some default HTML elements (H1,H2, P) and do the math to calculate the new font-size for the CSS.

Can someone help me out by figuring out some sort of plan on how I would do this? Or can someone help me by giving me a link on how I can get some sort of percentage on how big a font-size is compared to a certain default value thanks to Accessibility large text?

Thanks!

Answer 1

I've figured it out:

Android changes the HTML text size according to the accessibility settings automatically. No work required!

iOS allows a developer to implement several CSS classes to make the WebView change it's text size to the accessibility settings on the iOS device. Click here to find out more

These are the classes:

-apple-system-headline -apple-system-subheadline -apple-system-short-headline -apple-system-short-subheadline -apple-system-body -apple-system-short-body -apple-system-tall-body -apple-system-caption1 -apple-system-caption2 -apple-system-short-caption1 -apple-system-footnote -apple-system-short-footnote

Go to this website on your iOS device to see what the classes look like

To use Apple's predefined fonts: p {font: -apple-system-body}

To use your own font: (You can also create your own font-family with @font-face and reference that instead of Arial!)

p {
    font: -apple-system-body;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

You can use the following properties:

font-family
font-weight
font-style
font-variant`

To use your own font-size:

p {
  font: -apple-system-body;
  font-family: Arial, sans-serif;
  font-weight: normal;
}
.body-text-size {
    font-size: 1.1em;
}
<p><span class="body-text-size>This is some text in my page.</span></p>

Hope it helps!

Update 04-2020 : I noticed one of my preview links was dead. I fixed it by finding another repo that hosted the file. I have linked that one instead and in case my links die again, I have added them to the web archive so you can find them there! :)