Intent to Prototype: CSS env variable for OS-level font scale

[David Grogan]

Contact emails

dgr...@chromium.org

Explainer

None yet. An example usage is <p style="text-size-adjust: calc(100% * env(preferred-text-scale));">

Specification

https://github.com/w3c/csswg-drafts/issues/10674

Summary

Exposes a user's preferred font scale to CSS. Currently, it is not practical for a page to detect if the user has changed their preferred font size via the Operating System's preferences panel. This CSS environment variable will reflect the scale chosen by the user.

Blink component

Blink>Accessibility

Motivation

Without this API, pages cannot practically honor the user's OS-level font-size preference. Today, if you change the Android system-level font slider and browse the web you'll see that <10% of sites honor that slider. The minority that do change font sizes have mostly stumbled into a very old UA intervention that boosts font sizes on mobile.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/10674

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: No signal

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Is this feature fully tested by web-platform-tests?

No -- We use a UA-specific internals API to simulate changing the OS-level font scale

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://crbug.com/397737223

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5328467685801984?gate=6124347150041088

This intent message was generated by Chrome Platform Status.

[Thomas Steiner]

If a user has modified their preferred font sizes via browser settings, say from 16px to 20px, how would this work then? What is the 100% multiplier in your CSS rule based upon then? Would they get gigantic fonts bumped at the OS- and then the browser-level on top?  

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOZbSt1dSWUwuFD%2Bu%3DwGXf-ubdgh8K%3D0oj13%3DkrvADSOM41xtw%40mail.gmail.com.

--

Thomas Steiner, PhD—Developer Relations Engineer (blog.tomayac.com, toot.cafe/@tomayac)

Google Germany GmbH, ABC-Str. 19, 20354 Hamburg, Germany
Geschäftsführer: Paul Manicle, Liana Sebastian
Registergericht und -nummer: Hamburg, HRB 86891

----- BEGIN PGP SIGNATURE -----

Version: GnuPG v2.4.3 (GNU/Linux)

iFy0uwAntT0bE3xtRa5AfeCheCkthAtTh3reSabiGbl0ck

0fjumBl3DCharaCTersAttH3b0ttom.xKcd.cOm/1181.

----- END PGP SIGNATURE -----

[David Grogan]

Great question. We talked about this some in the WG... see https://github.com/w3c/csswg-drafts/issues/10674#issuecomment-2603454418 and the proceeding 3-4 comments.

We (chrome) intend to only include the OS-level font settings in this environment variable, at least for now, because that's what most users have modified. The demand for this feature from authors is mostly/exclusively for web on Android, which doesn't even have a chrome-level font setting, so that's a natural fit.

In the future we'll consider whether we should also fold in the chrome-level font setting.

To answer your questions more directly:

> If a user has modified their preferred font sizes via browser settings, say from 16px to 20px, how would this work then?

The environment variable would not include such change.

> What is the 100% multiplier in your CSS rule based upon then?

In <p style="text-size-adjust: calc(100% * env(preferred-text-scale));"> the calc expression would evaluate 100% * the OS-level selected scale.

> Would they get gigantic fonts bumped at the OS- and then the browser-level on top?

text-size-adjust only works on android, where there is no browser-level font setting, so no, they'd only get the OS bump.

[Thomas Steiner]

Thanks for the detailed response! It's quite a handful, but given the explanation you gave, would it maybe make sense to reflect this fact in the name: env(system-preferred-text-scale)?