[css-values] Consistently separate <number> (the type) from 'number' (the literal syntax) for integer/number/percentage/dimension. This makes calc()/etc nesting actually work.

Author: tabatkins

css-values/Overview.bs

@@ -614,7 +614,9 @@ Numeric Data Types</h2>
 Integers: the <<integer>> type</h3>
 
 	Integer values are denoted by <dfn id="integer-value">&lt;integer></dfn>.
-	An <dfn>integer</dfn> is one or more decimal digits ''0'' through ''9''
+
+	When written literally,
+	an <dfn export>integer</dfn> is one or more decimal digits ''0'' through ''9''
 	and corresponds to a subset of the <<number-token>> production
 	in the CSS Syntax Module [[!CSS3SYN]].
 	The first digit of an integer may be immediately preceded by ''-'' or ''+''
@@ -633,8 +635,11 @@ Integers: the <<integer>> type</h3>
 <h3 id="numbers">
 Real Numbers: the <<number>> type</h3>
 
-	Number values are denoted by <dfn id="number-value">&lt;number></dfn>.
-	A <dfn>number</dfn> is either an <<integer>>
+	Number values are denoted by <dfn id="number-value">&lt;number></dfn>,
+	and represent real numbers, possibly with a fractional component.
+
+	When written literally,
+	a <dfn export>number</dfn> is either an <a>integer</a>,
 	or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits
 	and optionally an exponent composed of "e" or "E" and an integer.
 	It corresponds to the <<number-token>> production
@@ -655,9 +660,11 @@ Real Numbers: the <<number>> type</h3>
 <h3 id="percentages">
 Percentages: the <<percentage>> type</h3>
 
-	A <dfn>percentage</dfn> value is denoted by
-	<dfn id="percentage-value">&lt;percentage></dfn>,
-	and consists of a <<number>>
+	Percentage values are denoted by <dfn id="percentage-value">&lt;percentage></dfn>,
+	and indicates a value that is some fraction of another reference value.
+
+	When written literally,
+	a <dfn export>percentage</dfn> consists of a <a>number</a>
 	immediately followed by a percent sign ''%''.
 	It corresponds to the <<percentage-token>> production
 	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
@@ -711,14 +718,18 @@ Percentages: the <<percentage>> type</h3>
 <h3 id='dimensions'>
 Numbers with Units: <a>dimensions</a></h3>
 
+	The general term "dimension" refers to a number with a unit attached to it,
+	and are denoted by <dfn>&lt;dimension></dfn>.
 
-	A <dfn>dimension</dfn> is a <<number>>
-	immediately followed by a unit identifier.
+	When written literally,
+	a <dfn>dimension</dfn> is a <a>number</a>
+	immediately followed by a unit identifier,
+	which is an <a>identifier</a>.
 	It corresponds to the <<dimension-token>> production
 	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
 	Like keywords, unit identifiers are <a>ASCII case-insensitive</a>.
 
-	<p>CSS uses <a>dimensions</a> to specify
+	CSS uses <<dimension>>s to specify
 	distances (<<length>>),
 	durations (<<time>>),
 	frequencies (<<frequency>>),
@@ -1389,8 +1400,6 @@ Syntax</h4>
 	<dfn>&lt;calc-value></dfn> = <<number>> | <<dimension>> | <<percentage>> | ( <<calc-sum>> )
 	</pre>
 
-	<p noexport>Where a <dfn>&lt;dimension></dfn> is a <a>dimension</a>.
-
 	In addition, <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a>
 	is required on both sides of the ''+'' and ''-'' operators.
 	(The ''*'' and ''/'' operaters can be used without white space around them.)