[css-fonts-4] Clean up font property section

Author: svgeesus

css-fonts-4/Overview.bs

@@ -1092,174 +1092,227 @@ Relative sizing: the 'font-size-adjust' property</h3>
 <h3 id="font-prop">
 Shorthand font property: the 'font' property</h3>
 
-<pre class="propdef">
-Name: font
-Value: [ [ <<'font-style'>> || <<font-variant-css2>> || <<'font-weight'>> || <<font-stretch-css3>> ]? <<'font-size'>> [ / <<'line-height'>> ]? <<'font-family'>> ] | caption | icon | menu | message-box | small-caption | status-bar
-Initial: see individual properties
-Applies to: all elements
-Inherited: yes
-Percentages: see individual properties
-Computed value: see individual properties
-Media: visual
-Animatable: see individual properties
-</pre>
-
-The 'font!!property' property is,
-except as described below,
-a shorthand property for setting
-'font-style!!property', 'font-variant!!property', 'font-weight!!property', 'font-stretch!!property',
-'font-size!!property', 'line-height', 'font-family!!property'
-at the same place in the stylesheet.
-Values for the 'font-variant!!property' property can also be included
-but only those supported in CSS 2.1;
-none of the 'font-variant!!property' values added in this specification can be used in the
-'font!!property' shorthand:
-
-<pre class="prod"><dfn id="font-variant-css21-values"><<font-variant-css2>></dfn> = [normal | small-caps]</pre>
-
-Values for the 'font-stretch!!property' property can also be included but only those supported in
-CSS Fonts level 3, none of the 'font-stretch!!property' values added in this specification can be used in the 'font' shorthand:
-
-<pre class="prod"><dfn id="font-stretch-css3-values"><<font-stretch-css3>></dfn> = [normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]</pre>
-
-The syntax of this property is based on a traditional typographical
-shorthand notation to set multiple properties related to fonts.
-
-All subproperties of the 'font!!property' property are first reset to their initial values,
-including those listed above plus 'font-size-adjust', 'font-kerning', all subproperties of 'font-variant!!property', 'font-feature-settings!!property',
-'font-language-override!!property', 'font-min-size', 'font-max-size', 'font-optical-sizing', 'font-variation-settings!!property', and 'font-palette'.
-Then, those properties that are given explicit values in the 'font!!property'
-shorthand are set to those values. For a definition of allowed and
-initial values, see the previously defined properties. For reasons of
-backwards compatibility, it is not possible to set 'font-size-adjust'
-to anything other than its initial value using the 'font'
-shorthand property; instead, use the individual property.
-
-<div class="example">
-	<pre>
-	p { font: 12pt/14pt sans-serif }
-	p { font: 80% sans-serif }
-	p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
-	p { font: bold italic large Palatino, serif }
-	p { font: normal small-caps 120%/120% fantasy }
-	p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
-	p { font: condensed oblique 25deg 753 12pt &quot;Helvetica Neue&quot;, serif; }
+	<pre class="propdef">
+	Name: font
+	Value: [ [ <<'font-style'>> ||
+		<<font-variant-css2>> ||
+		<<'font-weight'>> ||
+		<<font-stretch-css3>> ]? <<'font-size'>> [ / <<'line-height'>> ]? <<'font-family'>> ] |
+		caption | icon | menu | message-box | small-caption | status-bar
+	Initial: see individual properties
+	Applies to: all elements
+	Inherited: yes
+	Percentages: see individual properties
+	Computed value: see individual properties
+	Media: visual
+	Animatable: see individual properties
 	</pre>
 
-	In the second rule, the font size percentage value ("80%") refers
-	to the computed 'font-size' of the parent element. In the third rule, the line
-	height percentage ("110%") refers to the font size of the element
-	itself.
-
-	The first three rules do not specify the 'font-variant!!property' and
-	'font-weight!!property' explicitly, so these properties
-	receive their initial values (''font-variant/normal''). Notice that the font family
-	name ''"new century schoolbook"'', which contains spaces, is enclosed in
-	quotes. The fourth rule sets the 'font-weight!!property' to ''bold'',
-	 the 'font-style!!property' to ''italic'', and implicitly sets
-	'font-variant!!property' to ''font-variant/normal''.
-
-	The fifth rule sets the 'font-variant!!property' (''small-caps''), the 'font-size!!property' (120% of the
-	parent's font size), the 'line-height!!property' (120% of the font size) and the
-	'font-family!!property' (''fantasy''). It follows that the keyword <css>normal</css>
-	applies to the two remaining properties: 'font-style!!property' and 'font-weight!!property'.
-
-	The sixth rule sets the 'font-style!!property', 'font-stretch!!property',
-	'font-size!!property', and 'font-family!!property', the other font
-	properties being set to their initial values.
-
-	The seventh rule sets 'font-style!!property' to ''oblique 25deg'',
-	'font-weight!!property' to ''753'', and 'font-stretch!!property' to ''condensed''.
-	Note that the ''25deg'' in this rule must be immediately following the "oblique" keyword.
-</div>
+	The 'font!!property' property is,
+	except as described below,
+	a shorthand property for setting
+	'font-style!!property', 'font-variant!!property',
+	'font-weight!!property', 'font-stretch!!property',
+	'font-size!!property', 'line-height', 'font-family!!property'
+	at the same place in the stylesheet.
+	Values for the 'font-variant!!property' property can also be included
+	but only those supported in CSS 2.1;
+	none of the 'font-variant!!property' values added in
+	CSS Fonts Levels 3 or 4
+	can be used in the
+	'font!!property' shorthand:
+
+	<pre class="prod"><dfn id="font-variant-css21-values"><<font-variant-css2>></dfn>
+		= [normal | small-caps]</pre>
+
+	Values for the 'font-stretch!!property' property can also be included
+	but only those supported in CSS Fonts level 3,
+	none of the 'font-stretch!!property' values added in this specification
+	can be used in the 'font' shorthand:
+
+	<pre class="prod"><dfn id="font-stretch-css3-values"><<font-stretch-css3>></dfn>
+		= [normal | ultra-condensed | extra-condensed | condensed |
+		  semi-condensed | semi-expanded | expanded | extra-expanded |
+		  ultra-expanded]</pre>
+
+	The syntax of this property is based on a traditional
+	typographical shorthand notation
+	to set multiple properties related to fonts.
+
+	All subproperties of the 'font!!property' property are first reset
+	to their initial values,
+	including those listed above
+	plus 'font-size-adjust', 'font-kerning',
+	all subproperties of 'font-variant!!property',
+	'font-feature-settings!!property',
+	'font-language-override!!property',
+	'font-min-size',
+	'font-max-size',
+	'font-optical-sizing',
+	'font-variation-settings!!property',
+	and 'font-palette'.
+	Then, those properties that are given explicit values
+	in the 'font!!property' shorthand
+	are set to those values.
+	For a definition of allowed and initial values,
+	see the previously defined properties.
+	For reasons of backwards compatibility,
+	it is not possible to set 'font-size-adjust'
+	to anything other than its initial value
+	using the 'font' shorthand property;
+	instead, use the individual property.
 
-Since the 'font-stretch!!property' property was not defined in CSS 2.1,
-when using 'font-stretch!!property' values within 'font' rules,
-authors should include a extra version compatible with older user agents:
+	<div class="example">
+		<pre>
+		p { font: 12pt/14pt sans-serif }
+		p { font: 80% sans-serif }
+		p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
+		p { font: bold italic large Palatino, serif }
+		p { font: normal small-caps 120%/120% fantasy }
+		p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
+		p { font: condensed oblique 25deg 753 12pt &quot;Helvetica Neue&quot;, serif; }
+		</pre>
 
-<pre>
-	p {
-		font: 80% sans-serif;   /* for older user agents */
-		font: condensed 80% sans-serif;
-	}
-</pre>
+		In the second rule, the font size percentage value ("80%")
+		refers to the computed 'font-size' of the parent element.
+		In the third rule, the line height percentage ("110%")
+		refers to the font size of the element itself.
+
+		The first three rules do not specify
+		the 'font-variant!!property' and
+		'font-weight!!property' explicitly,
+		so these properties
+		receive their initial values (''font-variant/normal'').
+		Notice that the font family name ''"new century schoolbook"'',
+		which contains spaces,
+		is enclosed in quotes.
+		The fourth rule sets the 'font-weight!!property' to ''bold'',
+		the 'font-style!!property' to ''italic'',
+		and implicitly sets 'font-variant!!property' to ''font-variant/normal''.
+
+		The fifth rule sets the 'font-variant!!property' (''small-caps''),
+		the 'font-size!!property' (120% of the parent's font size),
+		the 'line-height!!property' (120% of the font size) and
+		the 'font-family!!property' (''fantasy'').
+		It follows that the keyword <css>normal</css>
+		applies to the two remaining properties:
+		'font-style!!property' and 'font-weight!!property'.
+
+		The sixth rule sets the 'font-style!!property',
+		'font-stretch!!property',
+		'font-size!!property', and
+		'font-family!!property',
+		the other font properties being set to their initial values.
+
+		The seventh rule sets 'font-style!!property' to ''oblique 25deg'',
+		'font-weight!!property' to ''753'', and
+		'font-stretch!!property' to ''condensed''.
+		Note that the ''25deg'' in this rule must be
+		immediately following the "oblique" keyword.
+	</div>
 
-The following values refer to system fonts:
-
-<dl dfn-type=value dfn-for=font>
-	<dt><dfn>caption</dfn>
-	<dd>The font used for captioned controls (e.g., buttons, drop-downs, etc.).
-	<dt><dfn>icon</dfn>
-	<dd>The font used to label icons.
-	<dt><dfn>menu</dfn>
-	<dd>The font used in menus (e.g., dropdown menus and menu lists).
-	<dt><dfn>message-box</dfn>
-	<dd>The font used in dialog boxes.
-	<dt><dfn>small-caption</dfn>
-	<dd>The font used for labeling small controls.
-	<dt><dfn>status-bar</dfn>
-	<dd>The font used in window status bars.
-</dl>
+	Since the 'font-stretch!!property' property was not defined in CSS 2.1,
+	when using 'font-stretch!!property' values within 'font' rules,
+	authors should include a extra version compatible with older user agents:
 
-System fonts can only be set as a whole; that is, the font
-family, size, weight, style, etc. are all set at the same time.
-These values can then be altered individually if desired.  If no
-font with the indicated characteristics exists on a given platform,
-the user agent should either intelligently substitute (e.g., a smaller
-version of the ''caption'' font might be used for the ''small-caption''
-font), or substitute a user agent default font. As for regular fonts,
-if, for a system font, any of the individual properties are not part
-of the operating system's available user preferences, those properties
-should be set to their initial values.
-
-That is why this property is "almost" a shorthand property: system
-fonts can only be specified with this property, not with
-'font-family!!property' itself, so 'font!!property'
-allows authors to do more than the
-sum of its subproperties. However, the individual properties such as
-'font-weight!!property' are still given values
-taken from the system font, which can be independently varied.
-
-Note that the keywords used for the system fonts listed above are
-only treated as keywords when they occur in the initial position, in
-other positions the same string is treated as part of the font family
-name:
+	<pre>
+		p {
+			font: 80% sans-serif;   /* for older user agents */
+			font: condensed 80% sans-serif;
+		}
+	</pre>
 
-<pre>
-	font: menu;        /* use the font settings for system menus */
-	font: large menu;  /* use a font family named "menu" */
-</pre>
+	The following values refer to system fonts:
+
+	<dl dfn-type=value dfn-for=font>
+		<dt><dfn>caption</dfn>
+		<dd>The font used for captioned controls (e.g., buttons, drop-downs, etc.).
+		<dt><dfn>icon</dfn>
+		<dd>The font used to label icons.
+		<dt><dfn>menu</dfn>
+		<dd>The font used in menus (e.g., dropdown menus and menu lists).
+		<dt><dfn>message-box</dfn>
+		<dd>The font used in dialog boxes.
+		<dt><dfn>small-caption</dfn>
+		<dd>The font used for labeling small controls.
+		<dt><dfn>status-bar</dfn>
+		<dd>The font used in window status bars.
+	</dl>
 
-<div class="example">
+	System fonts can only be set as a whole;
+	that is, the font family, size, weight, style, etc.
+	are all set at the same time.
+	These values can then be altered individually if desired.
+	If no font with the indicated characteristics exists
+	on a given platform,
+	the user agent should either intelligently substitute
+	(e.g., a smaller version of the ''caption'' font might be used
+	for the ''small-caption'' font),
+	or substitute a user agent default font.
+	As for regular fonts,
+	if, for a system font, any of the individual properties
+	are not part of the operating system's available user preferences,
+	those properties
+	should be set to their initial values.
+
+	That is why this property is "almost" a shorthand property:
+	system fonts can only be specified with this property,
+	not with 'font-family!!property' itself,
+	so 'font!!property'
+	allows authors to do more than the
+	sum of its subproperties.
+	However, the individual properties
+	such as 'font-weight!!property'
+	are still given values
+	taken from the system font,
+	which can be independently varied.
+
+	Note that the keywords used for the system fonts listed above
+	are only treated as keywords
+	when they occur in the initial position,
+	in other positions the same string is treated
+	as part of the font family name:
 
 	<pre>
-	button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
-	button p { font: menu }
-	button p em { font-weight: bolder }
+		font: menu;        /* use the font settings for system menus */
+		font: large menu;  /* use a font family named "menu" */
 	</pre>
 
-	If the font used for dropdown menus on a particular system
-	happened to be, for example, 9-point Charcoal, with a weight of 600, then P
-	elements that were descendants of BUTTON would be displayed as if
-	this rule were in effect:
+	<div class="example">
 
-	<pre>button p { font: 600 9pt Charcoal }</pre>
+		<pre>
+		button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
+		button p { font: menu }
+		button p em { font-weight: bolder }
+		</pre>
 
-	Because the 'font!!property' shorthand resets to its initial value
-	any property not explicitly given a value, this has the same effect as
-	this declaration:
+		If the font used for dropdown menus
+		on a particular system
+		happened to be, for example,
+		9-point Charcoal, with a weight of 600,
+		then P elements that were descendants of BUTTON
+		would be displayed as if
+		this rule were in effect:
 
-	<pre>
-	button p {
-		font-style: normal;
-		font-variant: normal;
-		font-weight: 600;
-		font-size: 9pt;
-		line-height: normal;
-		font-family: Charcoal
-	}
-	</pre>
-</div>
+		<pre>button p { font: 600 9pt Charcoal }</pre>
+
+		Because the 'font!!property' shorthand
+		resets to its initial value
+		any property not explicitly given a value,
+		this has the same effect as
+		this declaration:
+
+		<pre>
+		button p {
+			font-style: normal;
+			font-variant: normal;
+			font-weight: 600;
+			font-size: 9pt;
+			line-height: normal;
+			font-family: Charcoal
+		}
+		</pre>
+	</div>
 
 <h3 id="font-synthesis-prop">
 Controlling synthetic faces: the 'font-synthesis' property</h3>