Skip to content

Commit 6c51e9f

Browse files
davidsgrogandavidsgrogan
committed
update non-uniform text
1 parent 3761921 commit 6c51e9f

1 file changed

Lines changed: 18 additions & 23 deletions

File tree

‎css-fonts-5/Overview.html‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1293,24 +1293,19 @@ <h3 class="heading settled" data-level="1.1" id="values"><span class="secno">1.1
12931293
For readability they have not been repeated explicitly.</p>
12941294
<h2 class="heading settled" data-level="2" id="text-scale-meta"><span class="secno">2. </span><span class="content">
12951295
Text-Scale <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta">meta</a></code> element</span><a class="self-link" href="#text-scale-meta"></a></h2>
1296-
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="text-scale-factor">text scale factor</dfn> is a multiplier
1297-
used to calculate the computed value of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-font-size-medium" id="ref-for-valdef-font-size-medium">medium</a> font size.
1298-
The computed value of <span class="css" id="ref-for-valdef-font-size-medium①">medium</span>
1299-
is 16px
1300-
multiplied by the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor">text scale factor</a>.
1301-
This factor also
1302-
affects the computed size of the other <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css2/#value-def-absolute-size" id="ref-for-value-def-absolute-size">&lt;absolute-size></a> keywords,
1303-
but not necessarily by the same factor as <span class="css" id="ref-for-valdef-font-size-medium②">medium</span>.
1304-
The UA should non-uniformly adjust
1305-
keywords other than <span class="css" id="ref-for-valdef-font-size-medium③">medium</span> for improved readability.</p>
1306-
<p class="note" role="note"><span class="marker">Note:</span> Scaling all font sizes uniformly would lead to large fonts being too large.
1307-
See <a href="https://github.com/w3c/wcag3/issues/261#issuecomment-2598860630">
1308-
WCAG discussion about minimum and maximum critical font sizes</a>.</p>
1296+
<p>User agents must calculate the computed value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-font-size-medium" id="ref-for-valdef-font-size-medium">medium</a> by multiplying 16px by
1297+
the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="text-scale-factor">text scale factor</dfn>.
1298+
User agents must also apply this factor when determining the computed sizes of the other <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css2/#value-def-absolute-size" id="ref-for-value-def-absolute-size">&lt;absolute-size></a> keywords.
1299+
However, user agents should scale these other keywords non-linearly
1300+
to preserve readability.</p>
1301+
<p class="note" role="note"><span class="marker">Note:</span> Applying a linear scale to all keywords would render large fonts excessively large. See the
1302+
<a href="https://github.com/w3c/wcag3/issues/261#issuecomment-2598860630">
1303+
WCAG discussion on minimum and maximum critical font sizes</a>.</p>
13091304
<p>A document with a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#meta" id="ref-for-meta①">meta</a></code> tag
13101305
whose <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-name" id="ref-for-attr-meta-name">name</a></code> attribute
13111306
is an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitive</a> match for
13121307
<dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="text-scale" id="text-scale"><code class="highlight"><c- s>"text-scale"</c-></code></dfn>
1313-
is recognized as controlling the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor①">text scale factor</a>.</p>
1308+
is recognized as controlling the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor">text scale factor</a>.</p>
13141309
<p>The value of the <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-content" id="ref-for-attr-meta-content">content</a></code>
13151310
attribute must be an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive①">ASCII case-insensitive</a> match for one of the
13161311
recognized keywords. Otherwise the tag is ignored.</p>
@@ -1332,7 +1327,7 @@ <h3 class="heading settled" data-level="2.1" id="text-scale-meta-keywords"><span
13321327

13331328
The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale" id="ref-for-valdef-env-preferred-text-scale">preferred-text-scale</a> environment variable returns the user’s OS-level font factor on mobile devices,
13341329
but 1 on desktop devices.
1335-
<a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor②">text scale factor</a> incorporates UA-level font preferences but
1330+
<a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor①">text scale factor</a> incorporates UA-level font preferences but
13361331
OS-level font preferences are ignored.
13371332

13381333

@@ -1341,21 +1336,21 @@ <h3 class="heading settled" data-level="2.1" id="text-scale-meta-keywords"><span
13411336
<dt><dfn class="dfn-paneled" data-dfn-for="text-scale" data-dfn-type="dfn" data-noexport id="text-scale-scale">scale</dfn>
13421337
<dd>
13431338
The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale" id="ref-for-valdef-env-preferred-text-scale①">preferred-text-scale</a> environment variable returns the user’s OS-level font preferences.
1344-
<a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor③">text scale factor</a> incorporates both UA-level and OS-level font preferences.
1339+
<a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor②">text scale factor</a> incorporates both UA-level and OS-level font preferences.
13451340

13461341
</dl>
13471342
<h3 class="heading settled" data-level="2.2" id="legacy-keyword"><span class="secno">2.2. </span><span class="content">The <a data-link-type="dfn" href="#text-scale-legacy" id="ref-for-text-scale-legacy①">legacy</a> keyword</span><a class="self-link" href="#legacy-keyword"></a></h3>
13481343
<p>When the value of the <a data-link-type="dfn" href="#text-scale" id="ref-for-text-scale③">text-scale</a> content attribute is
13491344
<a data-link-type="dfn" href="#text-scale-legacy" id="ref-for-text-scale-legacy②">legacy</a>,
1350-
the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor④">text scale factor</a> is the font scale factor
1345+
the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor③">text scale factor</a> is the font scale factor
13511346
the user has chosen from any settings provided <i>only</i> by the user agent.
13521347
The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale" id="ref-for-valdef-env-preferred-text-scale②">preferred-text-scale</a> environment variable value must be 1 on desktop platforms.</p>
13531348
<p>On mobile platforms:</p>
13541349
<ul>
13551350
<li>
13561351

13571352
If the operating system provides a text scale setting AND
1358-
the UA hasn’t already applied that factor to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-font-size-medium" id="ref-for-valdef-font-size-medium④">medium</a> font size,
1353+
the UA hasn’t already applied that factor to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-font-size-medium" id="ref-for-valdef-font-size-medium①">medium</a> font size,
13591354
the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale" id="ref-for-valdef-env-preferred-text-scale③">preferred-text-scale</a> environment variable returns the multiplier
13601355
that the user has chosen in the operating system’s text scale setting.
13611356

@@ -1366,15 +1361,15 @@ <h3 class="heading settled" data-level="2.2" id="legacy-keyword"><span class="se
13661361
<h3 class="heading settled" data-level="2.3" id="scale-keyword"><span class="secno">2.3. </span><span class="content">The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale" id="ref-for-propdef-scale">scale</a> keyword</span><a class="self-link" href="#scale-keyword"></a></h3>
13671362
<p>When the value of the <a data-link-type="dfn" href="#text-scale" id="ref-for-text-scale④">text-scale</a> content attribute is
13681363
<a data-link-type="dfn" href="#text-scale-scale" id="ref-for-text-scale-scale">scale</a>,
1369-
the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor⑤">text scale factor</a> matches the user’s preferred paragraph text size
1364+
the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor④">text scale factor</a> matches the user’s preferred paragraph text size
13701365
(as determined from a combination of OS and UA preferences)
13711366
divided by 16px.</p>
1372-
<p>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale" id="ref-for-valdef-env-preferred-text-scale⑤">preferred-text-scale</a> environment variable must return the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor⑥">text scale factor</a>.</p>
1367+
<p>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale" id="ref-for-valdef-env-preferred-text-scale⑤">preferred-text-scale</a> environment variable must return the <a data-link-type="dfn" href="#text-scale-factor" id="ref-for-text-scale-factor⑤">text scale factor</a>.</p>
13731368
<p>Further, when the value of the <a data-link-type="dfn" href="#text-scale" id="ref-for-text-scale⑤">text-scale</a> content attribute is
13741369
<a data-link-type="dfn" href="#text-scale-scale" id="ref-for-text-scale-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 <a href="https://drafts.csswg.org/css-size-adjust-1/#intro"><cite>CSS Size Adjustment 1</cite> § 1 Introduction</a>) 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>.</p>
13751370
<p class="note" role="note"><span class="marker">Note:</span>
13761371
Authors are expected to use
1377-
<code class="highlight">&lt;meta name=<c- s>"text-scale"</c-> content=<c- s>"scale"</c->></code> in stylesheets so that the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-font-size-medium" id="ref-for-valdef-font-size-medium⑤">medium</a> 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 <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#rem" id="ref-for-rem">rem</a> throughout the page to honor the user’s font preferences.</p>
1372+
<code class="highlight">&lt;meta name=<c- s>"text-scale"</c-> content=<c- s>"scale"</c->></code> in stylesheets so that the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-font-size-medium" id="ref-for-valdef-font-size-medium②">medium</a> 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 <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#rem" id="ref-for-rem">rem</a> throughout the page to honor the user’s font preferences.</p>
13781373
<div class="example" id="ex-scaled-page">
13791374
<a class="self-link" href="#ex-scaled-page"></a>
13801375
If authors don’t alter the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#root-pseudo" id="ref-for-root-pseudo">:root</a> font size, content sized with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#rem" id="ref-for-rem①">rem</a> units will be relative to the preferred text scale
@@ -3030,7 +3025,7 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
30303025
"use strict";
30313026
{
30323027
let dfnPanelData = {
3033-
"15a266c1": {"dfnID":"15a266c1","dfnText":"medium","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-size-medium"},{"id":"ref-for-valdef-font-size-medium\u2460"},{"id":"ref-for-valdef-font-size-medium\u2461"},{"id":"ref-for-valdef-font-size-medium\u2462"}],"title":"2. \nText-Scale meta element"},{"refs":[{"id":"ref-for-valdef-font-size-medium\u2463"}],"title":"2.2. The legacy keyword"},{"refs":[{"id":"ref-for-valdef-font-size-medium\u2464"}],"title":"2.3. The scale keyword"}],"url":"https://drafts.csswg.org/css2/#valdef-font-size-medium"},
3028+
"15a266c1": {"dfnID":"15a266c1","dfnText":"medium","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-size-medium"}],"title":"2. \nText-Scale meta element"},{"refs":[{"id":"ref-for-valdef-font-size-medium\u2460"}],"title":"2.2. The legacy keyword"},{"refs":[{"id":"ref-for-valdef-font-size-medium\u2461"}],"title":"2.3. The scale keyword"}],"url":"https://drafts.csswg.org/css2/#valdef-font-size-medium"},
30343029
"15f5b381": {"dfnID":"15f5b381","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"4.4. \nGlyph Size Multiplier:\nthe size-adjust descriptor"},{"refs":[{"id":"ref-for-percentage-value\u2460"},{"id":"ref-for-percentage-value\u2461"},{"id":"ref-for-percentage-value\u2462"},{"id":"ref-for-percentage-value\u2463"}],"title":"4.5. \nLine Height Font Metrics Overrides:\nthe ascent-override, descent-override, and line-gap-override descriptors"},{"refs":[{"id":"ref-for-percentage-value\u2464"},{"id":"ref-for-percentage-value\u2465"},{"id":"ref-for-percentage-value\u2466"},{"id":"ref-for-percentage-value\u2467"},{"id":"ref-for-percentage-value\u2468"}],"title":"4.6. \nSuperscript and subscript metrics overrides:\nthe superscript-position-override, subscript-position-override,superscript-size-override and subscript-size-override descriptors"}],"url":"https://drafts.csswg.org/css-values-4/#percentage-value"},
30353030
"16310992": {"dfnID":"16310992","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"},{"id":"ref-for-number-value\u2460"},{"id":"ref-for-number-value\u2461"},{"id":"ref-for-number-value\u2462"}],"title":"3.4. \nRelative sizing: the font-size-adjust property"},{"refs":[{"id":"ref-for-number-value\u2463"},{"id":"ref-for-number-value\u2464"},{"id":"ref-for-number-value\u2465"},{"id":"ref-for-number-value\u2466"}],"title":"4.3. \nFont property descriptors: the font-size\n"}],"url":"https://drafts.csswg.org/css-values-4/#number-value"},
30363031
"1c5240b0": {"dfnID":"1c5240b0","dfnText":"vertical typographic mode","external":true,"refSections":[{"refs":[{"id":"ref-for-vertical-typographic-mode"}],"title":"4.6. \nSuperscript and subscript metrics overrides:\nthe superscript-position-override, subscript-position-override,superscript-size-override and subscript-size-override descriptors"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#vertical-typographic-mode"},
@@ -3146,7 +3141,7 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
31463141
"font-tech-values": {"dfnID":"font-tech-values","dfnText":"<font-tech>","external":false,"refSections":[{"refs":[{"id":"ref-for-font-tech-values"}],"title":"4.2.1. Parsing the src descriptor"}],"url":"#font-tech-values"},
31473142
"propdef-font-size-adjust": {"dfnID":"propdef-font-size-adjust","dfnText":"font-size-adjust","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size-adjust"},{"id":"ref-for-propdef-font-size-adjust\u2460"},{"id":"ref-for-propdef-font-size-adjust\u2461"},{"id":"ref-for-propdef-font-size-adjust\u2462"},{"id":"ref-for-propdef-font-size-adjust\u2463"},{"id":"ref-for-propdef-font-size-adjust\u2464"},{"id":"ref-for-propdef-font-size-adjust\u2465"},{"id":"ref-for-propdef-font-size-adjust\u2466"},{"id":"ref-for-propdef-font-size-adjust\u2467"},{"id":"ref-for-propdef-font-size-adjust\u2468"},{"id":"ref-for-propdef-font-size-adjust\u2460\u24ea"},{"id":"ref-for-propdef-font-size-adjust\u2460\u2460"},{"id":"ref-for-propdef-font-size-adjust\u2460\u2461"},{"id":"ref-for-propdef-font-size-adjust\u2460\u2462"}],"title":"3.4. \nRelative sizing: the font-size-adjust property"},{"refs":[{"id":"ref-for-propdef-font-size-adjust\u2460\u2463"}],"title":"4.4. \nGlyph Size Multiplier:\nthe size-adjust descriptor"},{"refs":[{"id":"ref-for-propdef-font-size-adjust\u2460\u2464"},{"id":"ref-for-propdef-font-size-adjust\u2460\u2465"}],"title":"4.5. \nLine Height Font Metrics Overrides:\nthe ascent-override, descent-override, and line-gap-override descriptors"}],"url":"#propdef-font-size-adjust"},
31483143
"text-scale": {"dfnID":"text-scale","dfnText":"\"text-scale\"","external":false,"refSections":[{"refs":[{"id":"ref-for-text-scale"}],"title":"2. \nText-Scale meta element"},{"refs":[{"id":"ref-for-text-scale\u2460"},{"id":"ref-for-text-scale\u2461"}],"title":"2.1. \nKeywords"},{"refs":[{"id":"ref-for-text-scale\u2462"}],"title":"2.2. The legacy keyword"},{"refs":[{"id":"ref-for-text-scale\u2463"},{"id":"ref-for-text-scale\u2464"}],"title":"2.3. The scale keyword"}],"url":"#text-scale"},
3149-
"text-scale-factor": {"dfnID":"text-scale-factor","dfnText":"text scale factor","external":false,"refSections":[{"refs":[{"id":"ref-for-text-scale-factor"},{"id":"ref-for-text-scale-factor\u2460"}],"title":"2. \nText-Scale meta element"},{"refs":[{"id":"ref-for-text-scale-factor\u2461"},{"id":"ref-for-text-scale-factor\u2462"}],"title":"2.1. \nKeywords"},{"refs":[{"id":"ref-for-text-scale-factor\u2463"}],"title":"2.2. The legacy keyword"},{"refs":[{"id":"ref-for-text-scale-factor\u2464"},{"id":"ref-for-text-scale-factor\u2465"}],"title":"2.3. The scale keyword"}],"url":"#text-scale-factor"},
3144+
"text-scale-factor": {"dfnID":"text-scale-factor","dfnText":"text scale factor","external":false,"refSections":[{"refs":[{"id":"ref-for-text-scale-factor"}],"title":"2. \nText-Scale meta element"},{"refs":[{"id":"ref-for-text-scale-factor\u2460"},{"id":"ref-for-text-scale-factor\u2461"}],"title":"2.1. \nKeywords"},{"refs":[{"id":"ref-for-text-scale-factor\u2462"}],"title":"2.2. The legacy keyword"},{"refs":[{"id":"ref-for-text-scale-factor\u2463"},{"id":"ref-for-text-scale-factor\u2464"}],"title":"2.3. The scale keyword"}],"url":"#text-scale-factor"},
31503145
"text-scale-legacy": {"dfnID":"text-scale-legacy","dfnText":"legacy","external":false,"refSections":[{"refs":[{"id":"ref-for-text-scale-legacy"}],"title":"2. \nText-Scale meta element"},{"refs":[{"id":"ref-for-text-scale-legacy\u2460"},{"id":"ref-for-text-scale-legacy\u2461"}],"title":"2.2. The legacy keyword"}],"url":"#text-scale-legacy"},
31513146
"text-scale-scale": {"dfnID":"text-scale-scale","dfnText":"scale","external":false,"refSections":[{"refs":[{"id":"ref-for-text-scale-scale"},{"id":"ref-for-text-scale-scale\u2460"}],"title":"2.3. The scale keyword"}],"url":"#text-scale-scale"},
31523147
"valdef-ascent-overridedescriptor-normal": {"dfnID":"valdef-ascent-overridedescriptor-normal","dfnText":"normal","external":false,"refSections":[],"url":"#valdef-ascent-overridedescriptor-normal"},

0 commit comments

Comments
 (0)