Normalize anchors to match css3-background convention

Author: fantasai

css3-images/Overview.html

@@ -194,15 +194,15 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#resolution-units"><span class=secno>2. </span> Resolution
     Units: the &lt;resolution> type</a>
 
-   <li><a href="#the-image-type"><span class=secno>3. </span> Image Values:
-    the &lt;image> type</a>
+   <li><a href="#image-values"><span class=secno>3. </span> Image Values: the
+    &lt;image> type</a>
     <ul class=toc>
-     <li><a href="#the-url-type"><span class=secno>3.1. </span> Image
+     <li><a href="#url-notation"><span class=secno>3.1. </span> Image
       References and Image Slices: the &lsquo;<code
       class=css>&lt;url></code>&rsquo; type and &lsquo;<code
       class=css>url()</code>&rsquo; notation</a>
 
-     <li><a href="#the-image-notation"><span class=secno>3.2. </span> Image
+     <li><a href="#image-notation"><span class=secno>3.2. </span> Image
       Fallbacks and Annotations: the &lsquo;<code
       class=css>image()</code>&rsquo; notation</a>
       <ul class=toc>
@@ -212,7 +212,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
        <li><a href="#image-fallbacks"><span class=secno>3.2.2. </span> Image
         Fallbacks</a>
 
-       <li><a href="#solid-color-images"><span class=secno>3.2.3. </span>
+       <li><a href="#color-images"><span class=secno>3.2.3. </span>
         Solid-color Images</a>
       </ul>
     </ul>
@@ -258,24 +258,24 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
      <li><a href="#object-sizing-examples"><span class=secno>5.4. </span>
       Examples of CSS Object Sizing</a>
 
-     <li><a href="#the-object-fit-property"><span class=secno>5.5. </span>
-      Sizing Objects: the &lsquo;<code
-      class=property>object-fit</code>&rsquo; property</a>
+     <li><a href="#the-object-fit"><span class=secno>5.5. </span> Sizing
+      Objects: the &lsquo;<code class=property>object-fit</code>&rsquo;
+      property</a>
 
-     <li><a href="#the-object-position-property"><span class=secno>5.6.
-      </span> Positioning Objects: the &lsquo;<code
+     <li><a href="#the-object-position"><span class=secno>5.6. </span>
+      Positioning Objects: the &lsquo;<code
       class=property>object-position</code>&rsquo; property</a>
     </ul>
 
    <li><a href="#image-processing"><span class=secno>6. </span> Image
     Processing</a>
     <ul class=toc>
-     <li><a href="#the-image-resolution-property"><span class=secno>6.1.
-      </span> Overriding Image Resolutions: the &lsquo;<code
+     <li><a href="#the-image-resolution"><span class=secno>6.1. </span>
+      Overriding Image Resolutions: the &lsquo;<code
       class=property>image-resolution</code>&rsquo; property</a>
 
-     <li><a href="#the-image-orientation-property"><span class=secno>6.2.
-      </span> Orienting an Image on the Page: the &lsquo;<code
+     <li><a href="#the-image-orientation"><span class=secno>6.2. </span>
+      Orienting an Image on the Page: the &lsquo;<code
       class=property>image-orientation</code>&rsquo; property</a>
     </ul>
 
@@ -422,7 +422,7 @@ <h2 id=resolution-units><span class=secno>2. </span> Resolution Units: the
   </div>
   <!-- ====================================================================== -->
 
-  <h2 id=the-image-type><span class=secno>3. </span> Image Values: the
+  <h2 id=image-values><span class=secno>3. </span> Image Values: the
    &lt;image> type</h2>
 
   <p>The &lsquo;<a href="#image-type"><code
@@ -454,7 +454,7 @@ <h2 id=the-image-type><span class=secno>3. </span> Image Values: the
    notation.</p>
   <!-- ====================================================================== -->
 
-  <h3 id=the-url-type><span class=secno>3.1. </span> Image References and
+  <h3 id=url-notation><span class=secno>3.1. </span> Image References and
    Image Slices: the &lsquo;<code class=css>&lt;url></code>&rsquo; type and
    &lsquo;<code class=css>url()</code>&rsquo; notation</h3>
 
@@ -476,8 +476,8 @@ <h3 id=the-url-type><span class=secno>3.1. </span> Image References and
    href="#invalid-image"><i>invalid image</i></a>.</p>
   <!-- ====================================================================== -->
 
-  <h3 id=the-image-notation><span class=secno>3.2. </span> Image Fallbacks
-   and Annotations: the &lsquo;<code class=css>image()</code>&rsquo; notation</h3>
+  <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
+   Annotations: the &lsquo;<code class=css>image()</code>&rsquo; notation</h3>
 
   <p>The &lsquo;<code class=css>image()</code>&rsquo; function allows an
    author to:
@@ -631,8 +631,7 @@ <h4 id=image-fallbacks><span class=secno>3.2.2. </span> Image Fallbacks</h4>
   </div>
   <!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) -->
 
-  <h4 id=solid-color-images><span class=secno>3.2.3. </span> Solid-color
-   Images</h4>
+  <h4 id=color-images><span class=secno>3.2.3. </span> Solid-color Images</h4>
 
   <div class=example>
    <p>At times, one may need a solid-color image for a property or function
@@ -673,7 +672,7 @@ <h4 id='bidi-images'>
 -->
   <!-- ====================================================================== -->
   <!-- removed per WG decision
-<h3 id='element-reference'>
+<h3 id='element-notation'>
 Using Elements as Images: the ''element()'' notation</h3>
 
 	<p>The ''element()'' function allows an author to use an element in the document as an image.  As the referenced element changes appearance, the image changes as well.  This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.</p>
@@ -1970,8 +1969,8 @@ <h3 id=object-sizing-examples><span class=secno>5.4. </span> Examples of
   </div>
   <!-- ====================================================================== -->
 
-  <h3 id=the-object-fit-property><span class=secno>5.5. </span> Sizing
-   Objects: the &lsquo;<a href="#object-fit"><code
+  <h3 id=the-object-fit><span class=secno>5.5. </span> Sizing Objects: the
+   &lsquo;<a href="#object-fit"><code
    class=property>object-fit</code></a>&rsquo; property</h3>
 
   <table class=propdef>
@@ -2108,8 +2107,8 @@ <h3 id=the-object-fit-property><span class=secno>5.5. </span> Sizing
    attributes on the root &lt;svg> element to determine how to draw itself.</p>
   <!-- ====================================================================== -->
 
-  <h3 id=the-object-position-property><span class=secno>5.6. </span>
-   Positioning Objects: the &lsquo;<a href="#object-position"><code
+  <h3 id=the-object-position><span class=secno>5.6. </span> Positioning
+   Objects: the &lsquo;<a href="#object-position"><code
    class=property>object-position</code></a>&rsquo; property</h3>
 
   <table class=propdef>
@@ -2173,8 +2172,8 @@ <h3 id=the-object-position-property><span class=secno>5.6. </span>
 
   <h2 id=image-processing><span class=secno>6. </span> Image Processing</h2>
 
-  <h3 id=the-image-resolution-property><span class=secno>6.1. </span>
-   Overriding Image Resolutions: the &lsquo;<a href="#image-resolution"><code
+  <h3 id=the-image-resolution><span class=secno>6.1. </span> Overriding Image
+   Resolutions: the &lsquo;<a href="#image-resolution"><code
    class=property>image-resolution</code></a>&rsquo; property</h3>
 
   <p>The <i>image resolution</i> is defined as the number of image pixels per
@@ -2328,9 +2327,8 @@ <h3 id=the-image-resolution-property><span class=secno>6.1. </span>
   </div>
   <!-- ====================================================================== -->
 
-  <h3 id=the-image-orientation-property><span class=secno>6.2. </span>
-   Orienting an Image on the Page: the &lsquo;<a
-   href="#image-orientation"><code
+  <h3 id=the-image-orientation><span class=secno>6.2. </span> Orienting an
+   Image on the Page: the &lsquo;<a href="#image-orientation"><code
    class=property>image-orientation</code></a>&rsquo; property</h3>
 
   <p>If a picture is taken with a camera turned on its side, or a document

css3-images/Overview.src.html

@@ -152,7 +152,7 @@ <h2 id='resolution-units'>
 
 <!-- ====================================================================== -->
 
-<h2 id="the-image-type">
+<h2 id="image-values">
 Image Values: the &lt;image> type</h2>
 
 	<p>The ''&lt;image>'' value type denotes a 2D image. It can be a
@@ -169,7 +169,7 @@ <h2 id="the-image-type">
 
 <!-- ====================================================================== -->
 
-<h3 id="the-url-type">
+<h3 id="url-notation">
 Image References and Image Slices: the ''&lt;url>'' type and ''url()'' notation</h3>
 
 	<p>The simplest way to indicate an image is to reference an image file by URL. This can be done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]].
@@ -185,7 +185,7 @@ <h3 id="the-url-type">
 
 <!-- ====================================================================== -->
 
-<h3 id="the-image-notation">
+<h3 id="image-notation">
 Image Fallbacks and Annotations: the ''image()'' notation</h3>
 
 	<p>The ''image()'' function allows an author to:</p>
@@ -207,7 +207,7 @@ <h3 id="the-image-notation">
 
 	<p>Each ''&lt;string>'' or ''&lt;url>'' inside ''image()'' represents an image, just as if the <a href="#url">''url()'' notation</a> had been used.  As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values &amp; Units [[!CSS3VAL]]) when a specified ''image()'' value is computed.</p>
 
-<h4>
+<h4 id="image-fragments">
 Image Fragments</h4>
 
 	<p>When a URL specified in ''image()'' represents a portion of a resource
@@ -244,7 +244,7 @@ <h4>
 <!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
 	</div>
 
-<h4>
+<h4 id="image-fallbacks">
 Image Fallbacks</h4>
 
 	<p>Multiple ''&lt;image-decl>s'' can be given separated by commas, in which case the function represents the first image that's not an <i>invalid image</i>.  The final argument can specify a ''&lt;color>'' to serve as an ultimate fallback; this can be used, e.g. for 'background-image', to ensure adequate contrast if none of the preceding ''&lt;image-decl>s'' can be used. If the final argument is a ''&lt;color>'', it represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.  If all of the provided ''&lt;image-decl>s'' are <i>invalid images</i> and a fallback color was not provided as the last argument, the entire ''image()'' function must be treated as an <i>invalid image</i>.
@@ -281,7 +281,7 @@ <h4>
 
 <!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) -->
 
-<h4>
+<h4 id="color-images">
 Solid-color Images</h4>
 
 	<div class='example'>
@@ -319,7 +319,7 @@ <h4 id='bidi-images'>
 
 <!-- ====================================================================== -->
 <!-- removed per WG decision
-<h3 id='element-reference'>
+<h3 id='element-notation'>
 Using Elements as Images: the ''element()'' notation</h3>
 
 	<p>The ''element()'' function allows an author to use an element in the document as an image.  As the referenced element changes appearance, the image changes as well.  This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.</p>
@@ -1225,7 +1225,7 @@ <h3 id='object-sizing-examples'>
 
 <!-- ====================================================================== -->
 
-<h3 id="the-object-fit-property">
+<h3 id="the-object-fit">
 Sizing Objects: the 'object-fit' property</h3>
 
 	<table class="propdef">
@@ -1328,7 +1328,7 @@ <h3 id="the-object-fit-property">
 
 <!-- ====================================================================== -->
 
-<h3 id="the-object-position-property">
+<h3 id="the-object-position">
 Positioning Objects: the 'object-position' property</h3>
 
 	<table class="propdef">
@@ -1370,7 +1370,7 @@ <h3 id="the-object-position-property">
 <h2 id="image-processing">
 Image Processing</h2>
 
-<h3 id="the-image-resolution-property">
+<h3 id="the-image-resolution">
 Overriding Image Resolutions: the 'image-resolution' property</h3>
 
 	<p>The <i>image resolution</i> is defined as the number of image
@@ -1493,7 +1493,7 @@ <h3 id="the-image-resolution-property">
 
 <!-- ====================================================================== -->
 
-<h3 id="the-image-orientation-property">
+<h3 id="the-image-orientation">
 Orienting an Image on the Page: the 'image-orientation' property</h3>
 
 	<p>If a picture is taken with a camera turned on its side, or a document isn't positioned correctly within a scanner, the resultant image may be "sideways" or even upside-down.  The 'image-orientation' property provides a way to apply an "out-of-band" rotation to image source data to correctly orient an image.</p>