diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs index 026a8b54deaa..a037a3ecac5a 100644 --- a/css-fonts-5/Overview.bs +++ b/css-fonts-5/Overview.bs @@ -25,6 +25,7 @@ spec:css-color-4; type:property; text:color spec:css-values; type:value; text:ex spec:css22; type:value; for:/; text:block spec:html; type:element; text:font +spec:html; type:element; text:meta spec:css-fonts-4; type:property; text:font-size spec:css-fonts-4; type:descriptor; text:font-language-override spec:css-fonts-4; type:property; text:font-family @@ -74,6 +75,126 @@ all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly. +

+Text-Scale <{meta}> element

+ +User agents must calculate the computed value of ''font-size/medium'' by multiplying 16px by +the text scale factor. +User agents must also apply this factor when determining the computed sizes of the other <> keywords. +However, user agents should scale these other keywords non-linearly +to preserve readability. + +Note: Applying a linear scale to all keywords would render large fonts excessively large. See the + +WCAG discussion on minimum and maximum critical font sizes. + +A document with a <{meta}> tag +whose <{meta/name}> attribute +is an ASCII case-insensitive match for +"text-scale" +is recognized as controlling the [=text scale factor=]. + +The value of the <{meta/content}> +attribute must be an ASCII case-insensitive match for one of the +recognized keywords. Otherwise the tag is ignored. + +Documents without this <{meta}> tag will have an assumed default +value of legacy. + +
+
<meta name="text-scale" content="scale" />
+
+ +There must not be more than one <{meta}> element with its <{meta/name}> attribute value set to an [=ASCII case-insensitive=] match for [=text-scale=] per document. + +

+Keywords

+ +The recognized keywords in the [=text-scale=] +<{meta}> element are: + +
+
legacy
+
+ The ''env()/preferred-text-scale'' environment variable returns the user's OS-level font factor on mobile devices, + but 1 on desktop devices. + [=text scale factor=] incorporates UA-level font preferences but + OS-level font preferences are ignored. + + Note: Equivalent to omitting a [=text-scale=] <{meta}> tag or + including an unrecognized content attribute keyword. +
+
scale
+
+ The ''env()/preferred-text-scale'' environment variable returns the user's OS-level font preferences. + [=text scale factor=] incorporates both UA-level and OS-level font preferences. +
+
+ +

The legacy keyword

+ +When the value of the [=text-scale=] content attribute is +[=text-scale/legacy=], +the [=text scale factor=] is the font scale factor +the user has chosen from any settings provided only by the user agent. +The ''env()/preferred-text-scale'' environment variable value must be 1 on desktop platforms. + +On mobile platforms: + + +

The 'scale' keyword

+ +When the value of the [=text-scale=] content attribute is +scale, +the [=text scale factor=] matches the user's preferred paragraph text size +(as determined from a combination of OS and UA preferences) +divided by 16px. + +The ''env()/preferred-text-scale'' environment variable must return the [=text scale factor=]. + +Further, when the value of the [=text-scale=] content attribute is +scale, 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 (popular browsers do this on Windows). + +Note: +Authors are expected to use +<meta name="text-scale" content="scale"> in stylesheets so that the ''font-size/medium'' 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. + +
+ If authors don't alter the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale +
+<!DOCTYPE html>
+<html> <!-- leave this element's font-size as the default -->
+	<head>
+		<meta name="text-scale" content="scale" />
+	</head>
+	<body>
+		<div style="font-size: 1rem;">
+			This font size obeys the user's font preferences, **whether
+			those preferences are specified at the operating system level
+			or the user agent level**
+		</div>
+		<div style="font-size: 20px;">
+			This font size does NOT respect the user's font preferences.
+			<div style="font-size: 1rem;">
+				But this font size does!
+			</div>
+		</div>
+	</body>
+</html>
+	
+
+ +

Basic Font Properties