Rewrite the 'generating the value of the content property' section.

Author: tabatkins

css3-lists/Overview.html

@@ -158,11 +158,11 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
     ‘<code class=property>list-style</code>’ shorthand property</a>
 
    <li><a href="#marker-pseudo-element"><span class=secno>6. </span> Markers:
-    The <code class=css>::marker</code> pseudo-element</a>
+    The ‘<code class=css>::marker</code>’ pseudo-element</a>
     <ul class=toc>
      <li><a href="#content-property"><span class=secno>6.1. </span>
-      Generating the computed value of the ‘<code
-      class=property>content</code>’ property</a>
+      Generating the value of the ‘<code class=property>content</code>’
+      property</a>
     </ul>
 
    <li><a href="#positioning-markers"><span class=secno>7. </span>
@@ -484,24 +484,26 @@ <h2 id=marker-content><span class=secno>3. </span> Default Marker Contents:
 
   <p> The ‘<a href="#list-style-type"><code
    class=property>list-style-type</code></a>’ property specifies an image
-   that will be used as the list marker's <i>default contents</i>. The values
-   are defined as follows:
+   that will be used as the list marker's <a
+   href="#default-contents"><i>default contents</i></a>. The values are
+   defined as follows:
 
   <dl>
    <dt><dfn id=list-style-image-image>&lt;image></dfn>
 
    <dd> If the <a href="#list-style-image-image"><code>&lt;image></code></a>
     is not an <a
     href="http://www.w3.org/TR/css3-images/#invalid-image">invalid image</a>,
-    the image is the <i>default contents</i> of the list item's marker.
-    Otherwise, the <i>default contents</i> are given by ‘<a
+    the image is the <a href="#default-contents"><i>default contents</i></a>
+    of the list item's marker. Otherwise, the <a
+    href="#default-contents"><i>default contents</i></a> are given by ‘<a
     href="#list-style-type"><code
     class=property>list-style-type</code></a>’ instead.
 
    <dt><dfn id=list-style-image-none>none</dfn>
 
-   <dd> The <i>default contents</i> of the of the list item's marker are
-    given by ‘<a href="#list-style-type"><code
+   <dd> The <a href="#default-contents"><i>default contents</i></a> of the of
+    the list item's marker are given by ‘<a href="#list-style-type"><code
     class=property>list-style-type</code></a>’ instead.
   </dl>
 
@@ -570,27 +572,30 @@ <h2 id=marker-content><span class=secno>3. </span> Default Marker Contents:
    <dt><dfn id=list-style-type-string>&lt;string></dfn>
 
    <dd> The <a href="#list-style-type-string"><code>&lt;string></code></a> is
-    used as the list item's marker's <i>default contents</i>.
+    used as the list item's marker's <a href="#default-contents"><i>default
+    contents</i></a>.
 
    <dt><dfn
     id=list-style-type-counter-style-name>&lt;counter-style-name></dfn>
 
    <dd> If there is a counter style defined matching the <a
     href="#list-style-type-counter-style-name"><code>&lt;counter-style-name></code></a>,
-    the list item's marker's <i>default contents</i> are that counter style.
-    Otherwise, the list item's marker's <i>default contents</i> are ‘<a
-    href="#list-style-type-none"><code class=css>none</code></a>’.
+    the list item's marker's <a href="#default-contents"><i>default
+    contents</i></a> are that counter style. Otherwise, the list item's
+    marker's <a href="#default-contents"><i>default contents</i></a> are
+    ‘<a href="#list-style-type-none"><code class=css>none</code></a>’.
 
    <dt><dfn id=list-style-type-symbols-function>&lt;symbols-function></dfn>
 
-   <dd> The list item's marker's <i>default contents</i> are the counter
-    style represented by the <a
+   <dd> The list item's marker's <a href="#default-contents"><i>default
+    contents</i></a> are the counter style represented by the <a
     href="#type-symbols-function"><code>&lt;symbols-function></code></a>.
 
    <dt><dfn id=list-style-type-none>none</dfn>
 
-   <dd> The list item's marker's <i>default contents</i> are ‘<a
-    href="#list-style-type-none"><code class=css>none</code></a>’.
+   <dd> The list item's marker's <a href="#default-contents"><i>default
+    contents</i></a> are ‘<a href="#list-style-type-none"><code
+    class=css>none</code></a>’.
   </dl>
 
   <div class=example>
@@ -927,7 +932,7 @@ <h2 id=list-style-property><span class=secno>5. </span> The ‘<a
   <!-- ====================================================================== -->
 
   <h2 id=marker-pseudo-element><span class=secno>6. </span> Markers: The
-   <code class=css>::marker</code> pseudo-element</h2>
+   ‘<code class=css>::marker</code>’ pseudo-element</h2>
 
   <p> This specification defines a new type of pseudo-element, the ‘<code
    class=css>::marker</code>’ pseudo-element, which is generated by <a
@@ -1122,57 +1127,68 @@ <h2 id=marker-pseudo-element><span class=secno>6. </span> Markers: The
   </div>
   <!-- ====================================================================== -->
 
-  <h3 id=content-property><span class=secno>6.1. </span> Generating the
-   computed value of the ‘<code class=property>content</code>’ property</h3>
+  <h3 id=content-property><span class=secno>6.1. </span> Generating the value
+   of the ‘<code class=property>content</code>’ property</h3>
 
-  <p>If a <code class=css>::marker</code> pseudo-element has its ‘<code
-   class=property>content</code>’ property set to ‘<code
-   class=css>normal</code>’, the computed value of the marker's ‘<code
-   class=property>content</code>’ property must be determined according to
-   the following algorithm:
+  <p> The ‘<code class=css>::marker</code>’ pseudo-element's ‘<code
+   class=property>content</code>’ property is set according to its <dfn
+   id=default-contents>default contents</dfn>, which are defined by the ‘<a
+   href="#list-style-image"><code
+   class=property>list-style-image</code></a>’ and ‘<a
+   href="#list-style-type"><code class=property>list-style-type</code></a>’
+   properties:
 
-  <ol>
-   <li>If the computed value of ‘<a href="#list-style-image"><code
-    class=property>list-style-image</code></a>’ is a valid &lt;image>, then
-    the computed value of the ‘<code class=property>content</code>’
-    property is that image.
+  <dl>
+   <dt>an &lt;image>
 
-   <li>Otherwise, if the computed value of ‘<a
-    href="#list-style-type"><code
-    class=property>list-style-type</code></a>’ is a &lt;string>, then the
-    computed value of the ‘<code class=property>content</code>’ property
-    is that string.
+   <dd> The computed value of the ‘<code class=property>content</code>’
+    property is the computed value of the &lt;image>.
 
-   <li>Otherwise, if the computed value of ‘<a
-    href="#list-style-type"><code
-    class=property>list-style-type</code></a>’ is a valid
-    <i>&lt;counter-style></i>, then the computed value of the ‘<code
-    class=property>content</code>’ property is <code>&lt;counter-prefix>
-    counter(list-item, &lt;counter-style>) &lt;counter-suffix></code>, where
+   <dt>a &lt;string>
+
+   <dd> The computed value of the ‘<code class=property>content</code>’
+    property is the &lt;string>.
+
+   <dt>a &lt;counter-style>
+
+   <dd> The computed value of the ‘<code class=property>content</code>’
+    property is <code>&lt;counter-prefix> counter(list-item,
+    &lt;counter-style>) &lt;counter-suffix></code>, where
     <i>&lt;counter-prefix></i> and <i>&lt;counter-suffix></i> are the values
     of the <a href="#prefix"><i title=counter-prefix>prefix</i></a> and <a
     href="#suffix"><i title=counter-suffix>suffix</i></a> descriptors for the
     counter style.
 
-   <li>Otherwise the computed value is ‘<a
-    href="#list-style-type-none"><code class=css>none</code></a>’.
-  </ol>
+   <dt><code class=css title="">‘none’</code>
+
+   <dd> The computed value of the ‘<code class=property>content</code>’
+    property is <code class=css title="">‘none’</code>.
+  </dl>
+
+  <p> If the computed value of ‘<code class=property>content</code>’ was
+   an <a href="#list-style-image-image"><code>&lt;image></code></a>, and it
+   ends up resolving to an <a
+   href="http://www.w3.org/TR/css3-images/#invalid-image">invalid image</a>,
+   the used value of the ‘<code class=property>content</code>’ property
+   is as above, but with the <a href="#default-contents"><i>default
+   contents</i></a> determined solely by ‘<a href="#list-style-type"><code
+   class=property>list-style-type</code></a>’.
 
   <div class=example>
-   <p>Given the following style sheet:
+   <p> Given the following style sheet:
 
-   <pre>
-li { display: list-item; list-style-type: decimal /* initial value */; }
-li<code
-    class=css>::marker</code> { content: normal /* initial value */; }</pre>
+   <pre><!--
+		-->li { display: list-item; list-style-type: decimal /* initial value */; }
+<!--
+		-->li::marker { content: normal /* initial value */; }</pre>
 
-   <p>And the following document fragment:
+   <p> And the following document fragment:
 
    <pre>&lt;li>List Item&lt;/li></pre>
 
-   <p>The computed value of the ‘<code class=property>content</code>’
-    property on the <code class=css>::marker</code> pseudo-element of the
-    list item element is:
+   <p> The computed value of the ‘<code class=property>content</code>’
+    property on the ‘<code class=css>::marker</code>’ pseudo-element of
+    the <code>&lt;li></code> is:
 
    <pre>counter(list-item, decimal) "."</pre>
   </div>
@@ -1186,8 +1202,8 @@ <h2 id=positioning-markers><span class=secno>7. </span> Positioning Markers</h2>
    this new value.
 
   <p>The new positioning scheme defined in this section can be used on all
-   elements, not just <code class=css>::marker</code> pseudo-elements. In
-   some situations, such as legal proceedings or official minutes, the
+   elements, not just ‘<code class=css>::marker</code>’ pseudo-elements.
+   In some situations, such as legal proceedings or official minutes, the
    precise form that the list marker takes is a vital part of the content.
    It's not acceptable for the marker to change (from a custom-defined marker
    to a default bullet or alpha marker) just because the UA is not rendering
@@ -1391,15 +1407,15 @@ <h3 id=marker-attachment><span class=secno>7.2. </span> The ‘<a
    href="#marker-attachment0"><code
    class=property>marker-attachment</code></a>’ property</h3>
 
-  <p>By default, elements or <code class=css>::marker</code> pseudo-elements
-   with ‘<code class=css>position:marker</code>’ position themselves
-   according to their list item's directionality. However, if the list item
-   is grouped with several other list items which may have different
-   directionality (for example, multiple &lt;li>s with different "dir"
-   attributes in an &lt;ol> in HTML), it is sometimes more useful to have all
-   the markers line up on one side, so the author can specify a single
-   "gutter" on that side and be assured that all the markers will lie in that
-   gutter and be visible. The ‘<a href="#marker-attachment0"><code
+  <p>By default, elements or ‘<code class=css>::marker</code>’
+   pseudo-elements with ‘<code class=css>position:marker</code>’ position
+   themselves according to their list item's directionality. However, if the
+   list item is grouped with several other list items which may have
+   different directionality (for example, multiple &lt;li>s with different
+   "dir" attributes in an &lt;ol> in HTML), it is sometimes more useful to
+   have all the markers line up on one side, so the author can specify a
+   single "gutter" on that side and be assured that all the markers will lie
+   in that gutter and be visible. The ‘<a href="#marker-attachment0"><code
    class=property>marker-attachment</code></a>’ property defined in this
    section allows an author to control this, switching list items to
    positioning their markers based off the list container's directionality
@@ -2088,9 +2104,9 @@ <h2 id=counter-style><span class=secno>10. </span> Defining Custom Counter
    string returned by the counter() or counters() functions. Instead, the
    prefix and suffix are added by the algorithm that constructs the computed
    value of the ‘<code class=property>contents</code>’ property for the
-   <code class=css>::marker</code> pseudo-element. This also implies that the
-   prefix and suffix always come from the specified counter-style, even if
-   the actual representation is constructed by a fallback style.
+   ‘<code class=css>::marker</code>’ pseudo-element. This also implies
+   that the prefix and suffix always come from the specified counter-style,
+   even if the actual representation is constructed by a fallback style.
 
   <p>The general form of an ‘<code class=css>@counter-style</code>’ rule
    is:
@@ -2704,8 +2720,8 @@ <h3 id=counter-style-prefix><span class=secno>10.3. </span> Symbols before
   <p>The ‘<a href="#descdef-prefix"><code
    class=property>prefix</code></a>’ descripter specifies a string that is
    prepended to the marker representation. Prefixes are only added by the
-   algorithm for constructing the default contents of the <code
-   class=css>::marker</code> pseudo-element; the prefix is not added
+   algorithm for constructing the default contents of the ‘<code
+   class=css>::marker</code>’ pseudo-element; the prefix is not added
    automatically when the counter() or counters() functions are used.
    Prefixes are added to the representation after negative signs.
 
@@ -2734,8 +2750,8 @@ <h3 id=counter-style-suffix><span class=secno>10.4. </span> Symbols after
   <p>The ‘<a href="#descdef-suffix"><code
    class=property>suffix</code></a>’ descripter specifies a string that is
    appended to the marker representation. Suffixes are only added by the
-   algorithm for constructing the default contents of the <code
-   class=css>::marker</code> pseudo-element; the suffix is not added
+   algorithm for constructing the default contents of the ‘<code
+   class=css>::marker</code>’ pseudo-element; the suffix is not added
    automatically when the counter() or counters() functions are used.
    Suffixes are added to the representation after negative signs.
 
@@ -3319,7 +3335,8 @@ <h2 class=no-num id=profiles> Profiles</h2>
    class=property>lower-alpha</code></a>’, ‘<a href="#upper-alpha"><code
    class=property>upper-alpha</code></a>’, ‘<a
    href="#list-style-type-none"><code class=property>none</code></a>’). It
-   does not include the <code class=css>::marker</code> pseudo element.
+   does not include the ‘<code class=css>::marker</code>’ pseudo element.
+   
 
   <p>The Full profile contains everything.
    <!-- ====================================================================== -->
@@ -3347,8 +3364,8 @@ <h2 class=no-num id=changes> Changes From CSS2.1</h2>
    in this module when compared to CSS2.1.
 
   <ol>
-   <li>The <code class=css>::marker</code> pseudo-element has been introduced
-    to allow styling of the list marker directly.
+   <li>The ‘<code class=css>::marker</code>’ pseudo-element has been
+    introduced to allow styling of the list marker directly.
 
    <li>The ‘<code class=css>marker</code>’ value for ‘<code
     class=property>position</code>’ has been added, to allow elements in
@@ -3666,6 +3683,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>decimal-leading-zero, <a href="#decimal-leading-zero"
     title=decimal-leading-zero><strong>12.</strong></a>
 
+   <li>default contents, <a href="#default-contents"
+    title="default contents"><strong>6.1.</strong></a>
+
    <li>dice, <a href="#dice" title=dice><strong>10.1.6.</strong></a>
 
    <li>disc, <a href="#disc" title=disc><strong>12.</strong></a>