-
Notifications
You must be signed in to change notification settings - Fork 733
[css-fonts-5]: define text-scale, legacy/scale keywords, env(preferred-text-scale) #12469
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.
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
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -59,7 +59,83 @@ 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="environment-variables"> | ||
Environment Variables</h2> | ||
|
||
Text Scale {#text-scale-envs} | ||
------------------------------------------------------------------ | ||
|
||
<table dfn-type=value dfn-for="env()"> | ||
<tr> | ||
<th>Name | ||
<th>Value | ||
<th>Number of dimensions | ||
<tr> | ||
<td><dfn>preferred-text-scale</dfn> | ||
<td><<number>> | ||
<td>0 (scalar) | ||
</table> | ||
|
||
The text-scale [=environment variables=] define the devices text scale, which | ||
must be a non-zero number for which all text can be scaled by. | ||
|
||
The preferred-text-scale unit must be a value that computes to the documents | ||
initial font-size, when multiplied by 16px: | ||
|
||
<pre highlight=css> | ||
:root { | ||
font-size: calc(16px * env(preferred-text-scale)); | ||
} | ||
</pre> | ||
|
||
<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 | ||
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 | ||
recognized keywords. | ||
|
||
Documents without this <code><meta></code> tag will have an assumed default | ||
value of <code>legacy</code>. | ||
|
||
<h3 id="text-scale-meta-keywords"> | ||
Keywords</h3> | ||
|
||
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> | ||
|
||
<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 | ||
to 16px. The user agent may chose a different initial value, such as one based | ||
on a user preference. The ''env()/preferred-text-scale'' value must be 1. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The value is always 1 on desktop, but not necessarily on mobile. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, as in the Explainer, the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this mean in the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's correct, and is what happens in today's pre- We expect/hope that
Comment on lines
+120
to
+123
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does 'initial font size' need to be formally defined somewhere? My understanding is that the initial font size is the |
||
|
||
<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 the operating systems 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. | ||
|
||
Note: It is expected that authors will use | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @JoshTumath I'm interested to hear your thoughts on this paragraph :) As a non-author, I don't have a good sense of what authors are expected to do. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If the meta tag is set to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I think here I am simply trying to illustrate that authors might expect There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh I think I see what you mean. Yeah if the meta tag is set to the |
||
''calc(16px * env(preferred-text-scale))'' in stylesheets to match the font | ||
size of the user agent, based on the initial font size. | ||
|
||
<h3 id="values"> | ||
Value Definitions</h3> | ||
|
@@ -706,7 +782,7 @@ Issue(5484): | |
|
||
|
||
<h2 id="font-feature-variation-resolution"> | ||
Font Feature and Variation Resolution</h3> | ||
Font Feature and Variation Resolution</h2> | ||
|
||
Issue(5635): | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did you already crib everything appropriate from https://drafts.csswg.org/css-env-1/#text-zoom ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn’t even spot this, I’ll make sure everything is moved over and update this tomorrow.