add figures for text-underline-position

Author: kojiishi

css3-text/Overview.html

@@ -18,6 +18,9 @@
     .char { border: 1px dotted gray; }
     .quarter { font-size: 25%; }
     tt[lang="ja"] { font-family: "MS Gothic", "Osaka", monospace }
+    div.figure table {
+      margin :auto;
+    }
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
@@ -36,7 +39,7 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 January
     <dt>This version:
 
     <dd><a href="http://dev.w3.org/csswg/css3-text/">$Date: 2012/01/12
-     02:22:09 $ (CVS $Revision$)</a> <!--
+     02:46:11 $ (CVS $Revision$)</a> <!--
       <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120112/">http://www.w3.org/TR/2012/WD-css3-text-20120112/</a></dd>
     -->
 
@@ -492,7 +495,7 @@ <h3 id=text-transform><span class=secno>2.1. </span> <a name=caps-prop></a>
      <td><dfn id=text-transform0>text-transform</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>none | [ [ capitalize | uppercase | lowercase ] || full-width ||
       full-size-kana ]
@@ -706,7 +709,7 @@ <h3 id=white-space-collapsing><span class=secno>3.1. </span> White Space
      <td><dfn id=text-space-collapse>text-space-collapse</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>collapse | preserve | preserve-breaks
 
@@ -782,7 +785,7 @@ <h3 id=tab-size><span class=secno>3.2. </span> Tab Character Size: the
      <td><dfn id=tab-size0>tab-size</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>&lt;integer&gt; | &lt;length&gt;
 
@@ -997,7 +1000,7 @@ <h3 id=white-space><span class=secno>3.4. </span> White Space and Text
      <td><dfn id=white-space0>white-space</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>normal | pre | nowrap | pre-wrap | pre-line
 
@@ -1219,7 +1222,7 @@ <h3 id=line-break><span class=secno>4.1. </span> Line Breaking Strictness:
      <td><dfn id=line-break0>line-break</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>auto | loose | normal | strict
 
@@ -1365,7 +1368,7 @@ <h3 id=word-break><span class=secno>4.2. </span> Word Breaking Rules: the
      <td><dfn id=word-break0>word-break</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>normal | keep-all | break-all
 
@@ -1604,7 +1607,7 @@ <h3 id=text-wrap><span class=secno>6.1. </span> Text Wrap Settings: the
      <td><dfn id=text-wrap0>text-wrap</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>normal | none | avoid
 
@@ -1745,7 +1748,7 @@ <h3 id=overflow-wrap><span class=secno>6.2. </span> Emergency Wrapping: the
      <td><dfn id=overflow-wrap0>overflow-wrap</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>normal | break-word
 
@@ -1833,7 +1836,7 @@ <h3 id=text-align><span class=secno>7.1. </span> Text Alignment: the
      <td><dfn id=text-align0>text-align</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>&lt;string&gt;? [ start | end | left | right | center ] | justify |
       match-parent | start end
@@ -2084,7 +2087,7 @@ <h3 id=text-align-last><span class=secno>7.2. </span> Last Line Alignment:
      <td><dfn id=text-align-last0>text-align-last</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>auto | start | end | left | right | center | justify
 
@@ -2155,7 +2158,7 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
      <td><dfn id=text-justify0>text-justify</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>auto | none | inter-word | inter-ideograph | inter-cluster |
       distribute | kashida
@@ -2657,7 +2660,7 @@ <h3 id=word-spacing><span class=secno>8.1. </span> Word Spacing: the
      <td><dfn id=word-spacing0>word-spacing</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td><a href="#spacing-limit">&lt;spacing-limit&gt;</a>
 
@@ -2737,7 +2740,7 @@ <h3 id=letter-spacing><span class=secno>8.2. </span> Tracking: the
      <td><dfn id=letter-spacing0>letter-spacing</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td><a href="#spacing-limit">&lt;spacing-limit&gt;</a>
 
@@ -2836,7 +2839,7 @@ <h3 id=text-indent><span class=secno>9.1. </span> First Line Indentation:
      <td><dfn id=text-indent0>text-indent</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>[ <span class=value-inst-length><a
       href="http://www.w3.org/TR/CSS21/syndata.html#value-def-length">&lt;length&gt;</a></span>
@@ -2945,7 +2948,7 @@ <h3 id=hanging-punctuation><span class=secno>9.2. </span> Hanging
      <td><dfn id=hanging-punctuation0>hanging-punctuation</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>none | [ first || [ force-end | allow-end ] || last ]
 
@@ -3295,7 +3298,7 @@ <h4 id=text-decoration-line><span class=secno>10.1.1. </span> Text
      <td><dfn id=text-decoration-line0>text-decoration-line</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>none | [ underline || overline || line-through ]
 
@@ -3367,7 +3370,7 @@ <h4 id=text-decoration-color><span class=secno>10.1.2. </span> Text
      <td><dfn id=text-decoration-color0>text-decoration-color</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td><a href="http://www.w3.org/TR/css3-color/#color0"><span
       class=value-inst-color>&lt;color&gt;</span></a>
@@ -3420,7 +3423,7 @@ <h4 id=text-decoration-style><span class=secno>10.1.3. </span> Text
      <td><dfn id=text-decoration-style0>text-decoration-style</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>solid | double | dotted | dashed | wavy
 
@@ -3475,7 +3478,7 @@ <h4 id=text-decoration><span class=secno>10.1.4. </span> Text Decoration
      <td><dfn id=text-decoration0>text-decoration</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td><var><a
       href="#text-decoration-line">&lt;text-decoration-line&gt;</a></var> ||
@@ -3566,7 +3569,7 @@ <h4 id=text-decoration-skip><span class=secno>10.1.5. </span> Text
      <td><dfn id=text-decoration-skip0>text-decoration-skip</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>none | [ objects || spaces || ink || edges ]
 
@@ -3662,7 +3665,7 @@ <h4 id=text-underline-position><span class=secno>10.1.6. </span> Text
      <td><dfn id=text-underline-position0>text-underline-position</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>auto | alphabetic | below && left | below && right
 
@@ -3747,6 +3750,38 @@ <h4 id=text-underline-position><span class=secno>10.1.6. </span> Text
     then an overline also switches sides and is drawn on the "under" side.
   </dl>
 
+  <div class=figure class=data id=fig-text-underline-position>
+   <table>
+    <tbody>
+     <tr>
+      <td> <img alt="text-underline-position: alphabetic"
+       src=underline-position-alphabetic.png>
+
+      <td rowspan=3> <img alt="text-underline-position: left"
+       src=underline-position-left.png>
+
+      <td rowspan=3> <img alt="text-underline-position: right"
+       src=underline-position-right.png>
+
+     <tr>
+      <td>&lsquo;<code class=css>alphabetic</code>&rsquo;
+
+     <tr>
+      <td> <img alt="text-underline-position: below"
+       src=underline-position-below.png>
+
+     <tr>
+      <td>&lsquo;<code class=css>below</code>&rsquo;
+
+      <td>&lsquo;<code class=css>left</code>&rsquo;
+
+      <td>&lsquo;<code class=css>right</code>&rsquo;
+   </table>
+
+   <p class=caption>&lsquo;<a href="#text-underline-position0"><code
+    class=property>text-underline-position</code></a>&rsquo; values</p>
+  </div>
+
   <div class=note>
    <p>In some cases (such as in OpenType) the font format can offer
     information about the appropriate position of an underline. Typically
@@ -3784,7 +3819,7 @@ <h4 id=text-emphasis-style><span class=secno>10.2.1. </span> Emphasis Mark
      <td><dfn id=text-emphasis-style0>text-emphasis-style</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>none | [ [ filled | open ] || [ dot | circle | double-circle |
       triangle | sesame ] ] | <a class=noxref
@@ -3956,7 +3991,7 @@ <h4 id=text-emphasis-color><span class=secno>10.2.2. </span> Emphasis Mark
      <td><dfn id=text-emphasis-color0>text-emphasis-color</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>&lt;color&gt;
 
@@ -4005,7 +4040,7 @@ <h4 id=text-emphasis><span class=secno>10.2.3. </span> Emphasis Mark
      <td><dfn id=text-emphasis0>text-emphasis</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>&lsquo;<code class=css>&lt;<a
       href="#text-emphasis-style">text-emphasis-style</a>&gt;</code>&rsquo;
@@ -4068,7 +4103,7 @@ <h4 id=text-emphasis-position><span class=secno>10.2.4. </span> Emphasis
      <td><dfn id=text-emphasis-position0>text-emphasis-position</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>[ above | below ] && [ right | left ]
 
@@ -4216,7 +4251,7 @@ <h3 id=text-shadow><span class=secno>10.3. </span> Text Shadows: the
      <td><dfn id=text-shadow0>text-shadow</dfn>
 
     <tr>
-     <th>Value:
+     <th><a href="#values">Value</a>:
 
      <td>none | [ &lt;length>{2,3} && &gt;color>? ]#
 

css3-text/Overview.src.html

@@ -17,6 +17,9 @@
     .char { border: 1px dotted gray; }
     .quarter { font-size: 25%; }
     tt[lang="ja"] { font-family: "MS Gothic", "Osaka", monospace }
+    div.figure table {
+      margin :auto;
+    }
   </style>
 
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
@@ -2793,6 +2796,48 @@ <h4 id="text-underline-position">
           switches sides and is drawn on the "under" side.</dd>
       </dl>
 
+      <div class="figure" class="data" id="fig-text-underline-position">
+        <table>
+          <tr>
+            <td>
+              <img
+                alt="text-underline-position: alphabetic"
+                src="underline-position-alphabetic.png"
+                />
+            </td>
+            <td rowspan="3">
+              <img
+                alt="text-underline-position: left"
+                src="underline-position-left.png"
+                />
+            </td>
+            <td rowspan="3">
+              <img
+                alt="text-underline-position: right"
+                src="underline-position-right.png"
+                />
+            </td>
+          </tr>
+          <tr>
+            <td>''alphabetic''</td>
+          </tr>
+          <tr>
+            <td>
+              <img
+                alt="text-underline-position: below"
+                src="underline-position-below.png"
+                />
+            </td>
+          </tr>
+          <tr>
+            <td>''below''</td>
+            <td>''left''</td>
+            <td>''right''</td>
+          </tr>
+        </table>
+        <p class="caption">'text-underline-position' values</p>
+      </div>
+
       <div class="note">
         <p>In some cases (such as in OpenType) the font format can offer
           information about the appropriate position of an underline.