[css-content] more reorg

Author: dauwhe

css-content/Overview.bs

@@ -111,7 +111,7 @@ The 'content' property dictates what is rendered inside the element or pseudo-el
 
 <dt><dfn type><<content-list>></dfn>
 <dd>
-	[ <<string>> | contents |  <<uri>> | <<quote>> | document-url | <<datetime>> | <<target>> | <<leader>> ]+
+	[ <<string>> | contents |  <<uri>> | <<quote>> | ''document-url'' | <<datetime>> | <<target>> | ''leader()'' ]+
 
 See sections below for details on each of these.
 
@@ -123,14 +123,18 @@ Issue: should the contents keyword be replaced with ''content()''
 
 
 
-If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
+	<p id="replacedContent">If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
 
 
 
 
 <h2 id="content-functions">
 Content Values and Functions</h2>
 
+	There are many ways of adding content to a document via the ''content'' property. This section describes them.
+
+	Issue: write better introduction to this section
+
 
 <h3 id="content-string">
 String</h3>
@@ -241,6 +245,43 @@ contents</h3>
 <h3 id="quotes">
 Quotes</h3>
 
+	HTML has long had the <code>q</code> element, used to delimit quotations. The ''quotes'' property, in conjunction with the various *-quote values of the ''content'' property, can be used to properly style such quotations.
+
+
+<h4 id="specifying-quotes">
+Specifying quotes with the 'quotes' property</h4>
+
+
+<pre class='propdef'>
+    Name: quotes
+    Value: [ <<string>> <<string>> ]+ | none
+    Initial: depends on user agent
+    Applies To: all elements
+    Inherited: yes
+    Percentages: n/a
+    Computed Value: specified value
+    Media: all
+</pre>
+
+	<p class="issue">The previous ED had an initial value of ''text'', which was an error. [[CSS21]] has initial value of "depends on user agent". Do we use <code>auto</code> for things like this, or is it just a UA stylesheet issue?
+
+
+This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:
+
+<dl dfn-type=value dfn-for=quotes>
+	<dt><dfn>none</dfn>
+	<dd>The ''open-quote'' and ''close-quote'' values of the 'content' property produce no quotations marks, as if they were ''no-open-quote'' and ''no-close-quote'' respectively.
+
+	<!--
+	<dt><dfn>auto</dfn>
+	<dd>TK
+	 -->
+
+	<dt>[ <<string>> <<string>> ]+
+	<dd>Values for the ''open-quote'' and ''close-quote'' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.
+</dl>
+
+
 <h4 id="inserting-quotes">
 The *-quote values of the content property
 </h4>
@@ -323,40 +364,6 @@ The *-quote values of the content property
 	</pre>
 	</div>
 
-<h4 id="specifying-quotes">
-Specifying quotes with the 'quotes' property</h4>
-
-	HTML has long had the <code>q</code> element, used to delimit quotations. The ''quotes'' property, in conjunction with the various quote values of the content property, can be used to properly style such quotations.
-
-
-<pre class='propdef'>
-    Name: quotes
-    Value: [ <<string>> <<string>> ]+ | none
-    Initial: depends on user agent
-    Applies To: all elements
-    Inherited: yes
-    Percentages: n/a
-    Computed Value: specified value
-    Media: all
-</pre>
-
-	<p class="issue">The previous ED had an initial value of ''text'', which was an error. [[CSS21]] has initial value of "depends on user agent". Do we use <code>auto</code> for things like this, or is it just a UA stylesheet issue?
-
-
-This property specifies quotation marks for any number of embedded quotations. Values have the following meanings:
-
-<dl dfn-type=value dfn-for=quotes>
-	<dt><dfn>none</dfn>
-	<dd>The ''open-quote'' and ''close-quote'' values of the 'content' property produce no quotations marks, as if they were ''no-open-quote'' and ''no-close-quote'' respectively.
-
-	<!--
-	<dt><dfn>auto</dfn>
-	<dd>TK
-	 -->
-
-	<dt>[ <<string>> <<string>> ]+
-	<dd>Values for the ''open-quote'' and ''close-quote'' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.
-</dl>
 
 
 <div class="example">
@@ -426,14 +433,19 @@ would produce:
 datetime
 </h3>
 
+
+	<pre class="prod">
+		<dfn>datetime</dfn> = [ date() | time() ];
+	</pre>
+
 	<dl dfn-for="content, <content-list>" dfn-type=value>
-		<dt><dfn><<datetime>></dfn>
+		<dt>datetime
 		<dd>Dates and times can be specified with two functions, 'date()' and 'time()'.
 	</dl>
 
 	Issue: need more details on the separate functions. How are they defined? How are they formatted?
 
-<h3>
+<h3 id="content-document-url">
 document-url
 </h3>
 
@@ -451,9 +463,9 @@ document-url
 <h3 id="leaders">
 Leaders</h3>
 
-A leader, sometimes known as a tab leader or a dot leader, is a repeating pattern used to visually connect content across horizontal spaces. They are most commonly used in tables of contents, between titles and page numbers. The ''leader()'' function, as a value for the content property, is used to create leaders in CSS. This function takes a string (the leader string), which describes the repeating pattern for the leader.
+	A leader, sometimes known as a tab leader or a dot leader, is a repeating pattern used to visually connect content across horizontal spaces. They are most commonly used in tables of contents, between titles and page numbers. The ''leader()'' function, as a value for the content property, is used to create leaders in CSS. This function takes a string (the leader string), which describes the repeating pattern for the leader.
 
-<h4>
+<h4 id="content-leader-function">
 The ''leader()'' function
 </h4>
 
@@ -462,28 +474,23 @@ The ''leader()'' function
 		<dd>Inserts a leader. See the section on <a href="#leaders">leaders</a> for more information.
 	</dl>
 
-
-
-
-
-
-<pre class="prod">
+	<pre class="prod">
 		<dfn>leader()</dfn> = leader( dotted | solid | space | <<string>>);
-</pre>
+	</pre>
 
-Three keywords are shorthand values for common strings:
+	Three keywords are shorthand values for common strings:
 
-<dl dfn-type=value dfn-for="leader()">
-	<dt><dfn>dotted</dfn>
-	<dd>Equivalent to ''leader(".")''
-	<dt><dfn>solid</dfn>
-	<dd>Equivalent to ''leader("_")''
-	<dt><dfn>space</dfn>
-	<dd>Equivalent to ''leader(" ")''
-	<dt><dfn><<string>></dfn>
-	<dd>
+	<dl dfn-type=value dfn-for="leader()">
+		<dt><dfn>dotted</dfn>
+		<dd>Equivalent to ''leader(".")''
+		<dt><dfn>solid</dfn>
+		<dd>Equivalent to ''leader("_")''
+		<dt><dfn>space</dfn>
+		<dd>Equivalent to ''leader(" ")''
+		<dt><dfn><<string>></dfn>
+		<dd>
 		Issue: Define this.
-</dl>
+	</dl>
 
 <div class="example">
 	<pre>
@@ -708,7 +715,7 @@ a::after { content: ", in the chapter entitled " target-text(attr(href url)) }
 
 
 
-<h3 id="named-strings">
+<h3 id="named-strings-heading">
 Named strings</h3>
 
 CSS3 introduces <dfn>named strings</dfn>, which are the textual equivalent of counters and which have a distinct namespace from counters. Named strings follow the same nesting rules as counters. The 'string-set' property accepts values similar to the 'content' property, including the extraction of the current value of counters.