"The new CSS env(preferred-text-scale) variable provides a mechanism for authors to respect the user’s text scale setting that they’ve set either in their operating system or web browser settings. Authors can use it to scale the font-size and alter the layout accordingly.
Note: See the env(preferred-text-scale) Explainer [2] for a comparison of the various ways users can scale content and examples of how to use the environment variable.
However, if authors have already used font-relative units like rem and em to conform to the Resize Text guideline, the browser could automatically incorporate the OS-level text scale setting into those font-relative units. This would allow authors to avoid having to determine the precise elements to apply the env() variable to.
We propose a new HTML meta tag that tells the user agent to apply the scaling factor from env(preferred-text-scale) to the entire page. We expect it will become best practice for authors to use this meta tag, just as they would use the viewport meta tag. The environment variable would be reserved for atypical use cases."
There's no need for a text-scale CSS property because font-size already exists. The latter explainer [2] suggests that developers use font-size: calc(100% * env(preferred-text-scale)) to get the desired effect, if they are doing this in CSS rather than with just the meta tag.
Actually I don't think the explainer gets into the full story. The reality is it's not CSS's problem. It's the browsers that have historically made text scaling weird on each platform that they support.
And now just like with the viewport meta tag, we need a meta tag to say, 'Stop doing that please. Make the default font size in my CSS work the way it always should have'.
The other reason why the flag can't be in CSS is because it needs to make em and rem units in media queries get affected by the user's text scale. See the explainer for more info on that.
As someone whose eyesight is getting worse, thank you for helping make this happen
Why is this set as a meta tag rather than via CSS with html{text-scale:scale} for example?
The linked explainer [1] gets into this:
"The new CSS env(preferred-text-scale) variable provides a mechanism for authors to respect the user’s text scale setting that they’ve set either in their operating system or web browser settings. Authors can use it to scale the font-size and alter the layout accordingly.
Note: See the env(preferred-text-scale) Explainer [2] for a comparison of the various ways users can scale content and examples of how to use the environment variable.
However, if authors have already used font-relative units like rem and em to conform to the Resize Text guideline, the browser could automatically incorporate the OS-level text scale setting into those font-relative units. This would allow authors to avoid having to determine the precise elements to apply the env() variable to.
We propose a new HTML meta tag that tells the user agent to apply the scaling factor from env(preferred-text-scale) to the entire page. We expect it will become best practice for authors to use this meta tag, just as they would use the viewport meta tag. The environment variable would be reserved for atypical use cases."
There's no need for a text-scale CSS property because font-size already exists. The latter explainer [2] suggests that developers use font-size: calc(100% * env(preferred-text-scale)) to get the desired effect, if they are doing this in CSS rather than with just the meta tag.
[1] https://github.com/w3c/csswg-drafts/blob/main/css-env-1/expl... [2] https://github.com/w3c/csswg-drafts/blob/main/css-env-1/expl...
Actually I don't think the explainer gets into the full story. The reality is it's not CSS's problem. It's the browsers that have historically made text scaling weird on each platform that they support.
And now just like with the viewport meta tag, we need a meta tag to say, 'Stop doing that please. Make the default font size in my CSS work the way it always should have'.
The other reason why the flag can't be in CSS is because it needs to make em and rem units in media queries get affected by the user's text scale. See the explainer for more info on that.
Speculation on my part: Your site either supports accessible text scaling, or it doesn't. If only partly supports it – it might as well not at all.