Skip to content

[css-fonts-5] Define behavior for <meta text-scale> from #12380 #13052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

[css-fonts-5] Define behavior for <meta text-scale> from #12380 #13052

Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8d5f5e2
no bs edits
davidsgrogan Nov 2, 2025
18f2f8b
Small revisions
davidsgrogan Nov 4, 2025
b729d74
after review round 1
davidsgrogan Nov 5, 2025
0206973
Apply suggestions from code review
davidsgrogan Nov 9, 2025
c287984
Josh's suggestions from review round 1
davidsgrogan Nov 12, 2025
f6d1a0c
full example
davidsgrogan Nov 14, 2025
3716341
add 'environment variable' following ''preferred-text-scale''
davidsgrogan Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions css-fonts-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,63 @@ rules defined in CSS Fonts Level 4.
This specification is currently a delta to the CSS Fonts Level 4 specification.
Do not assume that if something is not here, it has been dropped.

<h2 id="text-scale-meta">
Text-Scale <code class=html>&lt;meta&gt;</code> element</h2>
Copy link
Contributor

@JoshTumath JoshTumath Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed the HTML spec also mentions when a metadata name should not appear more than once in the document. Maybe you should add this line somewhere:

There must not be more than one meta element with its name attribute value set to an ASCII case-insensitive match for text-scale per document.

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


A document with a <code>&lt;meta></code> tag whose <code>name</code> attribute
is a <a>ASCII case-insensitive</a> match for
<dfn lt=text-scale><code>"text-scale"</code></dfn> is recognized as setting the
initial font size of the document. The value of the <code>content</code>
Copy link
Collaborator

@fantasai fantasai Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're not setting the initial font size. We're setting the computed value of the medium font-size, and scaling all the other absolute size keywords accordingly.

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed.

attribute must be an <a>ASCII case-insensitive</a> match for one of the
Copy link
Collaborator

@fantasai fantasai Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Must -> otherwise what?

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added 'Otherwise the tag is ignored.'

Copy link
Contributor

@JoshTumath JoshTumath Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering specifying the 'otherwise' case is neccessary here, because, to me, the HTML spec seems to imply it is ignored anyway.

recognized keywords.

Documents without this <code>&lt;meta></code> tag will have an assumed default
value of <code>legacy</code>.

Copy link
Contributor

@JoshTumath JoshTumath Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good to add an example block here, similar to the example in the HTML spec for the color-scheme meta tag.

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

<h3 id="text-scale-meta-keywords">
Keywords</h3>

The recognized keywords in the [=text-scale=]
<code class=html>&lt;meta&gt;</code> element are:

<ul>
<li><code class="index" lt="legacy!!text-scale-meta">legacy</code></li>
<li><code class="index" lt="scale!!text-scale-meta">scale</code></li>
</ul>
Copy link
Collaborator

@fantasai fantasai Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better to follow the DL format that we have for property values: list them in the DT with a DFN tag, and give them a definition that's understandable to authors wrt what they do.

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gave it a try. Let me know if you meant something different.


<h3 id="legacy-keyword">The 'legacy' keyword</h3>

The <dfn for="text-scale" export><code>legacy</code></dfn> property is
recognized in the [=text-scale=] content attribute value.

When the value of the [=text-scale=] content attribute is
<a for="text-scale">legacy</a> the user agent should set the initial font size
Copy link
Collaborator

@fantasai fantasai Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should or must? If not must, under what conditions is it reasonable to ignore the should?

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed to must.

to 16px multiplied by the font scale factor the user has chosen from any settings <i>provided by the user agent</i>. The ''preferred-text-scale'' value must be 1 on desktop platforms. On mobile:
<ul>
<li>if the operating system provides a text scale setting AND the UA hasn't already applied that factor to the initial font size, ''env()/preferred-text-scale'' returns the mulitplier that the user has chosen in the operating system's text scale setting.

Note: As of this writing, all combinations of Android, iOS, Gecko, WebKit, Blink satisfy this first condition.

</li>
<li>Otherwise ''env()/preferred-text-scale'' returns 1.</li>
</ul>

<h3 id="scale-keyword">The 'scale' keyword</h3>

The <dfn for="text-scale" export><code>scale</code></dfn> property is
recognized in the [=text-scale=] content attribute value.

When the value of the [=text-scale=] content attribute is
<a for=text-scale>scale</a> the user agent may determine the initial font size
based on a combination of the operating system's text scale setting and the user agent's text scale setting. The
''env()/preferred-text-scale'' value must be a number that, when multiplied by
16px, provides a <<length>> that matches that of the initial font size.

Further, when the value of the [=text-scale=] content attribute is
<a for=text-scale>scale</a>, the user agent should skip all font-sizing interventions it would otherwise perform in an attempt to automatically honor the user's preferences. E.g. text autosizing on mobile (See [[css-size-adjust#intro]]) and full-application zoom (<a href="https://github.com/w3c/csswg-drafts/blob/main/css-env-1/explainers/env-preferred-text-scale.md#windows-11">popular browsers do this on Windows)</a>.

Note: It is expected that authors will use
''&lt;meta name="text-scale" content="scale"&gt;'' in stylesheets so that the initial font size will reflect a combination of the user's font preferences, whether those are specified at the OS level or the UA level. The author will then be able to use ''rem'' throughout the page to honor the user's font preferences.
Copy link
Contributor

@JoshTumath JoshTumath Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the sentence about using rem is actually better explained in an example block.

So you could keep the Note block to explain how authors are expected to use scale in their documents, with the example block below it to explain how, if you set scale and don't alter the default font size, content sized with rem units will be relative to the preferred text scale.

Also, I'm not sure if the Note should actually be an orange Assertion box. But maybe not because assertions are normative? Where I've seen Assertion boxes in the past are places like the css-flexbox spec, where it tells authors to use the flex shorthand rather than the longhands.

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, Advisement (you meant "advisement", not "assertion". I think :) boxes are supposed to be normative. This Note seems merely descriptive as is now, but I suppose we can strengthen the language to say that authors must use it to obey the user's font preferences. Oh, though, we kind of don't care if authors use the more difficult env(..) instead to honor the user's preferences. So maybe we leave it non-normative?

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So you could keep the Note block to explain how authors are expected to use scale in their documents, with the example block below it to explain how, if you set scale and don't alter the default font size, content sized with rem units will be relative to the preferred text scale.

I'd like to think we included a good example in the explainer we can crib from.
... and we didn't.

Yeah, an example would be good here.

Copy link
Member Author

@davidsgrogan davidsgrogan Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example added.

Copy link
Contributor

@JoshTumath JoshTumath Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, Advisement (you meant "advisement", not "assertion". I think :) boxes are supposed to be normative. This Note seems merely descriptive as is now, but I suppose we can strengthen the language to say that authors must use it to obey the user's font preferences. Oh, though, we kind of don't care if authors use the more difficult env(..) instead to honor the user's preferences. So maybe we leave it non-normative?

Sorry yeah, an advisement box. And yes that makes sense to me.

The example is great! 👍🏼


<h3 id="values">
Value Definitions</h3>
Expand Down