[css-fonts-5] Define behavior for <meta text-scale> from #12380 #13052
Conversation
|
Hi @JoshTumath , this is my fork of Keith's initial PR. I left the definition of env(preferred-text-scale) in css-env-1 and just referred to it from here. Even though this PR is not fully complete (I didn't mention media queries, for example), I'm hoping to get it in as a kind of MVP spec. Let me know if you think something major is missing and definitely let me know if something is not correct. |
fantasai
left a comment
fantasai
left a comment
There was a problem hiding this comment.
Also, in general, please follow https://rhodesmill.org/brandon/2012/one-sentence-per-line/ :)
css-fonts-5/Overview.bs
Outdated
| <h2 id="text-scale-meta"> | ||
| Text-Scale <code class=html><meta></code> element</h2> | ||
|
|
||
| A document with a <code><meta></code> tag whose <code>name</code> attribute |
There was a problem hiding this comment.
This needs to be more specific, should refer to the HTML <{meta}> tag specifically. (Random XML documents with a META tag don't count.)
css-fonts-5/Overview.bs
Outdated
| A document with a <code><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> |
There was a problem hiding this comment.
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.
| 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> | ||
| attribute must be an <a>ASCII case-insensitive</a> match for one of the |
There was a problem hiding this comment.
Added 'Otherwise the tag is ignored.'
There was a problem hiding this comment.
I'm wondering specifying the 'otherwise' case is neccessary here, because, to me, the HTML spec seems to imply it is ignored anyway.
css-fonts-5/Overview.bs
Outdated
| The recognized keywords in the [=text-scale=] | ||
| <code class=html><meta></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> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Gave it a try. Let me know if you meant something different.
css-fonts-5/Overview.bs
Outdated
| 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 |
There was a problem hiding this comment.
should or must? If not must, under what conditions is it reasonable to ignore the should?
css-fonts-5/Overview.bs
Outdated
| <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 |
There was a problem hiding this comment.
"may" or "must"? Shouldn't this be a "must"? Can we define more definitively what this is a "must" about? Like,
The medium font size must match the user's preferred paragraph text size as determined from a combination of OS and UA preferences.
There was a problem hiding this comment.
Great, taken verbatim.
Thanks for pointing that out. |
JoshTumath
left a comment
JoshTumath
left a comment
There was a problem hiding this comment.
Hi @JoshTumath , this is my fork of Keith's initial PR. I left the definition of env(preferred-text-scale) in css-env-1 and just referred to it from here. Even though this PR is not fully complete (I didn't mention media queries, for example), I'm hoping to get it in as a kind of MVP spec. Let me know if you think something major is missing and definitely let me know if something is not correct.
This looks great! As far as I can tell, it covers everything in the Explainer.
Should the font-size section of the spec also redefine the absolute size keywords in relation to the meta tag/env var?
Once this is merged, we'll need to add the meta extension to this WHATWG wiki page: https://wiki.whatwg.org/wiki/MetaExtensions
| <{meta}> element are: | ||
|
|
||
| <dl> | ||
| <dt><dfn for="text-scale"><code>legacy</code></dfn></dt> |
There was a problem hiding this comment.
'Legacy' is in a code element, but 'scale' isn't. Maybe this should be removed?
| <dt><dfn for="text-scale"><code>legacy</code></dfn></dt> | |
| <dt><dfn for="text-scale">legacy</dfn></dt> |
| Do not assume that if something is not here, it has been dropped. | ||
|
|
||
| <h2 id="text-scale-meta"> | ||
| Text-Scale <code class=html><meta></code> element</h2> |
There was a problem hiding this comment.
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.
| 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> | ||
| attribute must be an <a>ASCII case-insensitive</a> match for one of the |
There was a problem hiding this comment.
I'm wondering specifying the 'otherwise' case is neccessary here, because, to me, the HTML spec seems to imply it is ignored anyway.
|
|
||
| Documents without this <code><meta></code> tag will have an assumed default | ||
| value of <code>legacy</code>. | ||
|
|
There was a problem hiding this comment.
It would be good to add an example block here, similar to the example in the HTML spec for the color-scheme meta tag.
| <dt><dfn for="text-scale"><code>legacy</code></dfn></dt> | ||
| <dd>''env()/preferred-text-scale'' returns the user's OS-level font factor on mobile, | ||
| but 1 on desktop. | ||
| The document's initial font size only incorporates UA-level font preferences. |
There was a problem hiding this comment.
There's still a few other places that say 'initial font size'. These will also need to be updated to medium.
| 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. |
There was a problem hiding this comment.
Typo
| <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. | |
| <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 multiplier that the user has chosen in the operating system's text scale setting. |
| 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. |
There was a problem hiding this comment.
Wherever you reference the preferred-text-scale env(), maybe it should be prefixed with 'environment variable' in the prose. Since this is not the css-env spec, it's not clear that you're referencing an env().
| <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. |
There was a problem hiding this comment.
Maybe 'At the time of publishing'?
| 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 |
There was a problem hiding this comment.
Consider using active voice for the first sentence. So:
Authors are expected to use [...]
| <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 | ||
| ''<meta name="text-scale" content="scale">'' 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. |
There was a problem hiding this comment.
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.
Initial definition of
<meta name="text-scale" content="...">resolved on in #12380