How to avoid font size changes by Android system font display preferences

1

I had the case that Android font size settings (larger or smaller than normal) break the text wrapping in an absolute positioned design. Anybody has a fix for that, as I don't own an android?

Protect from external styles doesn't seem to help in that case.

2

Here's one idea: css - Prevent Android Webview from changing font-size (Computed Style) - Stack Overflow

(See if the computed size differs from the desired size)

A more modern method would be: Window.getComputedStyle() - Web APIs | MDN

This is unresolved in Flutter BTW:

1 Like
3

Hmm.. that is unfortunate. Yeah, accessibility basically destroys any Hype layout on Android this way. We need to find a solution. I am still testing, but unfortunately don't have an Android device at my disposal.

4

I wish I had better news for you, but this does seem to be a pain point for lots of interfaces + developers. Detecting font size + adding conditional CSS seems like the best bet at the moment until we can detect some kind of 'user font size' media query: How to detect Android device's default font size with CSS media queries? - Stack Overflow

5

Does the bottom of this post help. ?
Compatibility has improved i think across browsers since it was written.

Without the mediaQuery

Also, webview. What about wkwebview.?
A little confused on where this is being seen.
No android either

6

Just any regular Samsung phone. If you change the System font size (display setting), it will scale font sizes across all HTML pages. This is awful in an absolute positioned design, as it reflows the text without pushing anything that follows. Hence, you get overlapping text elements and undesired line breaks. Specially in ads and webpages, this breaks everything.

Setting in question (setting it to normal is fine… anything else breaks Hype designs):

slack-imgs

7

Hello! Any update on this? :blush:

8

There must be something that I'm missing, but I can't recreate the problem.

This occurs on my older Android too, but using the latest Android Studio emulator, the Settings > Display > Font Size looks unlike @MaxZieb's screenshot and is instead:

Screen Shot 2023-01-04 at 12.10.48 PM
Screen Shot 2023-01-04 at 12.10.48 PM1302×2686 109 KB

When I visit a hype-made page that has a rectangle sized the same as a text element, I see that the font size seems correct:

Screen Shot 2023-01-04 at 12.11.55 PM
Screen Shot 2023-01-04 at 12.11.55 PM1254×2568 118 KB

9

Pixel 5
Pixel 51080×750 33 KB

This one looks right on my Google Pixel 5 as well (Android 13). I am using maximum Font size.

Here are screenshots of a few ads I saw. These are not produced by me, and probably not using Hype.

Screenshot 2023-01-06 at 15.30.05
Screenshot 2023-01-06 at 15.31.11
Screenshot 2023-01-06 at 15.31.23

1 Like
10

Hello! Any more information on this? :blush:

11

I am on the road… still had an idea worth trying:

This calculates a normalized value that can be used to calculate some dependent font sizes. So, if the user switches base font size it should recalculate the normalization (in theory).

Head HTML in style tag


:root {
    --default-font-size: 16px;
}

.headline {
    font-size: calc(24px / (1rem / var(--default-font-size)));
}

.paragraph {
    font-size: calc(18px / (1rem / var(--default-font-size)));
}

Let me know if that works.

2 Likes