[css-env][css-fonts] Changing the initial font size using `<meta text-scale>`

[JoshTumath]

@davidsgrogan, @progers and I would like to propose a new HTML meta tag called text-scale with the following values:

• <meta name="text-scale" content="legacy">
• <meta name="text-scale" content="scale">

When the author specifies the scale option, the UA's initial font size is affected by the OS-level text scale setting.

➡️ For all of the details of the proposal, read our Explainer on a meta tag for text scaling behaviour.

We'd love to hear your feedback!

Background

In #10674, I wanted to solve the problem of how web content doesn't scale based on the OS text scale setting, which was an important accessibility issue for us at the BBC.

The CSSWG resolved to adopt:

• a new environment variable env(preferred-text-scale), which will give authors the amount that the user has scaled their text size.
• a new unit called pem which will be relative to env(preferred-text-scale)

Since then, we published an Explainer for env(preferred-text-scale).

However, after gathering feedback from authors at conferences recently, I found authors didn't like the sound of the pem unit. They would rather continue to use rem units as they do now. So we no longer believe the pem units are worthwhile, and believe the original idea for a <meta> tag to turn on the new/correct/proper text scaling behaviour will be much better (see the Explainer for more info).

Proposed resolutions

• To adopt the proposal in the Explainer for a <meta text-scale> tag
• To retract the resolution for a pem unit

[JoshTumath]

I categorised this as relating to the css-env-1 and css-fonts-5 specs for now, but actually, if we all have consensus to adopt this, it's not clear to me what spec it would live in. It may even be in WHATWG territory.

[tabatkins]

To be a little clearer about the reasoning here (since the explainer just mentions the meta at the end as an alternative considered):

Before anything about this topic was introduced, the behavior was that text-size-adjust: auto applies heuristic size adjustment, upscaling some text to the UA/OS text size indicated by the user. Where this happens is unpredictable, as it's heuristic-based, and depends on the device being used (it only applied on mobile). Authors can't respond to this except by shutting down the auto-sizing altogether in a subtree, with text-size-adjust: none, and then hand-scaling their text by a page-chosen amount based on page-chosen device heuristics, with no way to know what the user wants. For back-compat reasons, we couldn't touch the initial font size of the page; text scaling is instead done as a funky used-value adjustment on individual elements.

We resolved on fixing this in two complementary ways: exposing the user's UA/OS preferred text scale factor in an env() value, and providing a pre-scaled pem unit which represents the page's initial font size, scaled by that scale factor. (The pem is just an authoring convenience; it's identical to calc(1rem * env(preferred-text-scale)) if the root's font-size wasn't adjusted.) Authors can then either set text-size-adjust: none and use the env()+pem to adjust things as needed by hand, or set text-size-adjust: calc(env(preferred-text-scale) * 100%) on the root to scale the entire page's text accordingly.

The new proposal complements this. The new <meta name="text-scale" content="scale"> value bakes the UA/OS text size adjustment into the page's initial font size (aka font-size: medium on the root), makes text-size-adjust:auto behave identically to none (because there's no need to scale), and sets env(preferred-text-scale) is 1 (ditto). Authors don't need to do anything further; it's identical to the "force text-size-adjust to match the env(preferred-text-scale)" solution from above, but easier to use.

We also think that, with this, we can probably drop the pem unit, since it's subsumed by just using rem + the meta value. We still want to keep the env(), as there are some use-cases that do want to respond to the user's preferred text scale in a more case-by-case basis, and they can continue using just using text-size-adjust: none and either omitting the meta or setting it to the legacy value, then using the env() where desired.