Fenix: Use system font size for non-mobile pages

[cpeterso]

Why/User Benefit/User Problem

Visit pages that are not optimized for mobile, such as:

• https://history.nasa.gov/afj/ap11fj/01launch.html
• http://diamondgeezer.blogspot.com/2018/08/across-london-by-bus-77.html

With GeckoView the page text is very tiny or requires horizontal scrolling.

Chrome uses the system font size for non-mobile pages by default. Fennec will as well if you enable its "Use system font size" setting.

See more detailed description of the problem, see mozilla-mobile/focus-android#3057.

What / Requirements

@buttercookie42 landed the GeckoView API RuntimeSettings.setAutomaticFontSizeAdjustment() which can be used like Fennec's "Use system font size" in the accessibility settings works today.

https://bugzilla.mozilla.org/show_bug.cgi?id=1460874

Acceptance Criteria (how do I know when I’m done?)

Non-mobile pages have readable text without unnecessary horizontal scrolling.

See the related Reference Browser and Focus issues:
mozilla-mobile/reference-browser#165
mozilla-mobile/focus-android#2752

[buttercookie42]

Just for completeness, if you've got a non-default (i.e. larger or smaller than normal) font size option set up in Android's OS settings, setAutomaticFontSizeAdjustment() will also scale font sizes in mobile-friendly pages accordingly to match the OS font size setting.
If the OS font size setting is at "normal", then nothing will be done to mobile-friendly pages (i.e. anything with a viewport tag), and only non-mobile-friendly pages will be scaled as described above by cpeterson.

[bbinto]

@st3fan, @cpeterso, @lime124 - is there UX required? I assume a toggle under settings?

I'd love to understand effort from UX and Eng in order to prioritize.

/cc @mheubusch

[cpeterso]

No work is needed on the GV side. Fenix would need to expose one (or more) toggle in the settings UI.

GV has a few APIs to control font sizes:

• "Automatic font size adjustment" (aka "use system font size") to scale font sizes in web content according to the device's current system font scale setting.
• "Font inflation" (and zoom factor) for non mobile-friendly pages (pages that are lacking a viewport tag).

@buttercookie42 knows more about the specific details on what this APIs do. He can probably make a recommendation of which font settings should be exposed to users or whether the settings should be enabled by default. Chrome uses the system font size for non-mobile pages by default; Fennec does not.

[lime124]

Without having done any research into this topic, I'm curious - do we need a setting? Could we have the behaviour just be the right thing?

@bbinto At most this I would think this would be a toggle under settings. It would be less than 1/2 day to investigate the above question and make a recommendation.

[buttercookie42]

Enabling GeckoRuntimeSettings.setAutomaticFontSizeAdjustment() would give approximately the same behaviour as in Chrome by default, i.e. font sizes are scaled with the system font size and font inflation is used to bring non-mobile-friendly pages up to a readable font size, too.
The only caveat is that while for most non-mobile-friendly pages font inflation works well enough - at least in my experience -, on a few pages it can occasionally misfire and break the layout, so an escape hatch with a toggle to turn it off might be nice to have (although on the other hand probably not really obvious, so still of limited value).

Chrome instead has a percentage-based slider control that allows you to further tune the desired font size on top of the automatic scaling - if you want something like that, that might require some further GeckoView work, because at the moment you can either control the amount of font scaling completely manually (i.e. you could offer a slider in the settings menu, but font sizes wouldn't change at all in response to the OS-level font size setting), or do everything completely automatically according to the OS-wide font size setting, but you cannot use the automatic mechanism together with a further user-controlled multiplier on top.

[cpeterso]

Thanks, @buttercookie42. That's helpful information about Chrome's approach. Since most pages (mobile and non-mobile-friendly) are designed and tested in Chrome, matching Chrome's default settings is probably wise.

~GV has an about:config pref called font.size.use_system_font_size that can be used to enable setAutomaticFontSizeAdjustment() (i.e. use system font size). A product or UX person could use the pref to compare the results and decide whether it should be enabled by default (or always) in Fenix.~

AFAIK, there is no pref to enable font inflation for non-mobile-friendly pages.

[buttercookie42]

GV has an about:config pref called font.size.use_system_font_size that can be used to enable setAutomaticFontSizeAdjustment() (i.e. use system font size). A product or UX person could use the pref to compare the results and decide whether it should be enabled by default (or always) in Fenix.

It does? All I know of (and now that it's no longer out of date, DXR supports my memory) is a Fennec android app shared pref of the same name, but nothing in GeckoView. The various about:config options that are available allow for full manual control, but you cannot turn on the automatic system that way and you need to know what you're doing to replicate its effects.

However that quibbling aside, Fennec's "Accessibility -> Use system font size" option is in fact wired up to GeckoRuntimeSettings.setAutomaticFontSizeAdjustment(), so you can test the effects of that option using that.

[cpeterso]

All I know of (and now that it's no longer out of date, DXR supports my memory) is a Fennec android app shared pref of the same name, but nothing in GeckoView.

You're correct. I misread the code. I'll edit my comment.

Fennec's "Accessibility -> Use system font size" option

Thanks!

[bbinto]

Without having done any research into this topic, I'm curious - do we need a setting? Could we
have the behaviour just be the right thing?

Thanks @lime124, as per further comments, maybe we should have this on by default and as @buttercookie42 suggested, have a toggle to turn this off where it potentially could break layouts.

I'll leave it up to @mheubusch though to make the call from UX/PM if this is a blocker for MVP.

[pocmo]

Functionality landed in AC today :)

[vesta0]

Closing this issue and addressing the UX work here: #1285

[karlcow]

This feature might create regression issues on some site.
see https://github.com/webcompat/web-bugs/issues/29379