add CSS IS AWESOME example for text-overflow, clarify definition a bit, change (X)HTML references to HTML.

Author: Tantek Çelik

css3-ui/Overview.html

@@ -55,12 +55,12 @@
    src="http://www.w3.org/Icons/w3c_home" width=72> </a>
    <h1>CSS Basic User Interface Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 January
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 January
     2011</h2>
 
    <dl>
     <dt>This version:</dt>
-    <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-ui-20110123">http://www.w3.org/TR/2011/ED-css3-ui-20110123</a></dd> -->
+    <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-ui-20110126">http://www.w3.org/TR/2011/ED-css3-ui-20110126</a></dd> -->
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-ui/">http://dev.w3.org/csswg/css3-ui/</a>
@@ -1091,8 +1091,8 @@ <h5 class="no-num no-toc" id=sample-css>sample CSS:</h5>
 input::value { border:solid }
 </code></pre>
 
-   <h5 class="no-num no-toc" id=an-xhtmlcss-approximation-of-this-exampl>an
-    (X)HTML+CSS approximation of this example</h5>
+   <h5 class="no-num no-toc" id=an-htmlcss-approximation-of-this-example>an
+    HTML+CSS approximation of this example</h5>
 
    <p> <span style="border:dashed;display:inline-block;padding:10px"> <label
     style="border:dotted;display:inline-block;padding:2px;margin:0;font-size:1em">Zip
@@ -1758,8 +1758,7 @@ <h5 class="no-num no-toc" id=sample-css0>sample CSS:</h5>
 }
 </code></pre>
 
-   <h5 class="no-num no-toc" id=sample-xhtml-fragment>sample (X)HTML
-    fragment:</h5>
+   <h5 class="no-num no-toc" id=sample-html-fragment>sample HTML fragment:</h5>
 
    <pre><code>
 &lt;input type="button" value="Plain button" /&gt; 
@@ -2237,8 +2236,7 @@ <h5 class="no-num no-toc" id=sample-css1>sample CSS:</h5>
 }
 </code></pre>
 
-   <h5 class="no-num no-toc" id=sample-xhtml-fragment0>sample (X)HTML
-    fragment:</h5>
+   <h5 class="no-num no-toc" id=sample-html-fragment0>sample HTML fragment:</h5>
 
    <pre><code>
 &lt;div class="container"&gt;
@@ -2248,8 +2246,8 @@ <h5 class="no-num no-toc" id=sample-xhtml-fragment0>sample (X)HTML
 </code></pre>
 
    <h5 class="no-num no-toc"
-    id=demonstration-of-sample-css-and-xhtml>demonstration of sample CSS and
-    (X)HTML:</h5>
+    id=demonstration-of-sample-css-and-html>demonstration of sample CSS and
+    HTML:</h5>
 
    <div style="width:38em; border:1em solid black">
     <div style="box-sizing:border-box; width:50%; border:1em silver ridge;
@@ -2913,9 +2911,10 @@ <h3 id=text-overflow><span class=secno>9.2. </span> Overflow Ellipsis: the
      <td>as specified
   </table>
 
-  <p>This property specifies the behavior when text overflows its element
-   (e.g. has &lsquo;<code class=property>overflow</code>&rsquo; of hidden)
-   when text is prevented from wrapping (e.g. due to &lsquo;<code
+  <p>This property specifies the behavior when text overflows a block-level
+   element that has &lsquo;<code class=property>overflow</code>&rsquo; other
+   than &lsquo;<code class=property>visible</code>&rsquo;. Text may overflow
+   for example when it is prevented from wrapping (e.g. due to &lsquo;<code
    class=css><code>white-space:nowrap</code></code>&rsquo; or a single word
    is too long to fit). Values have the following meanings:
 
@@ -2939,6 +2938,80 @@ <h3 id=text-overflow><span class=secno>9.2. </span> Overflow Ellipsis: the
     deeper descendants without text-overflow ellipsis).
   </dl>
 
+  <div class=example>
+   <p style="display:none">Example(s):</p>
+
+   <h4 class="no-num no-toc" id=text-overflow-examples>text-overflow examples</h4>
+
+   <p>These examples demonstrate setting the text-overflow of a block-level
+    element that has text which overflows its dimensions:</p>
+
+   <h5 class="no-num no-toc" id=sample-css-for-a-div>sample CSS for a div:</h5>
+
+   <pre><code class=css>div { width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif}
+</code></pre>
+
+   <h5 class="no-num no-toc"
+    id=sample-html-fragments-renderings-and-you>sample HTML fragments,
+    renderings, and your browser:</h5>
+
+   <table border=1 cellpadding=5>
+    <tbody>
+     <tr>
+      <th>HTML
+
+      <th>sample rendering
+
+      <th>your browser
+
+     <tr>
+      <td>
+       <pre><code>&lt;div&gt;
+CSS IS AWESOME
+&lt;/div&gt;
+</code></pre>
+
+      <td> <object data=cssisawesome.png type="image/png"> First, a box with
+       text drawing outside of it. </object>
+
+      <td>
+       <div style="width:3.2em; border:solid .1em black; margin:1em 0;
+        padding:.2em; font-family:Helvetica,sans-serif;">CSS IS AWESOME</div>
+
+     <tr>
+      <td>
+       <pre><code>&lt;div style="<a href="#clip"><strong>text-overflow:clip;</strong></a> overflow:hidden"&gt;
+CSS IS AWESOME
+&lt;/div&gt;
+</code></pre>
+
+      <td> <object data=cssisaweso.png type="image/png"> Second, a similar
+       box with the text clipped outside the box. </object>
+
+      <td>
+       <div style="width:3.2em; border:solid .1em black; margin:1em 0;
+        padding:.2em;
+        font-family:Helvetica,sans-serif;overflow:hidden;text-overflow:clip;">CSS
+        IS AWESOME</div>
+
+     <tr>
+      <td>
+       <pre><code>&lt;div style="<a href="#ellipsis"><strong>text-overflow:ellipsis;</strong></a> overflow:hidden"&gt;
+CSS IS AWESOME
+&lt;/div&gt;
+</code></pre>
+
+      <td> <object data=cssisaw.png type="image/png"> Third, a similar box
+       with an ellipsis representing the clipped text. </object>
+
+      <td>
+       <div style="width:3.2em; border:solid .1em black; margin:1em 0;
+        padding:.2em;
+        font-family:Helvetica,sans-serif;overflow:hidden;text-overflow:ellipsis;">CSS
+        IS AWESOME</div>
+   </table>
+  </div>
+
   <h2 id=pointing-devices-and-keyboards><span class=secno>10. </span>Pointing
    Devices and Keyboards</h2>
 

css3-ui/Overview.src.html

@@ -625,7 +625,7 @@ <h5 class="no-num no-toc">sample CSS:</h5>
 input::value { border:solid }
 </code></pre>
 
-<h5 class="no-num no-toc">an (X)HTML+CSS approximation of this example</h5>
+<h5 class="no-num no-toc">an HTML+CSS approximation of this example</h5>
 <p>
 <span style="border:dashed;display:inline-block;padding:10px">
  <label 
@@ -989,7 +989,7 @@ <h5 class="no-num no-toc">sample CSS:</h5>
   background-color: #9cf; 
 }
 </code></pre>
-<h5 class="no-num no-toc">sample (X)HTML fragment:</h5>
+<h5 class="no-num no-toc">sample HTML fragment:</h5>
 <pre><code>
 &lt;input type="button" value="Plain button" /&gt; 
 &lt;input type="button" value="With color" class="custom" /&gt;
@@ -1220,14 +1220,14 @@ <h5 class="no-num no-toc">sample CSS:</h5>
 	float:left;
 }
 </code></pre>
-<h5 class="no-num no-toc">sample (X)HTML fragment:</h5>
+<h5 class="no-num no-toc">sample HTML fragment:</h5>
 <pre><code>
 &lt;div class="container"&gt;
 &lt;div class="split"&gt;This div occupies the left half.&lt;/div&gt;
 &lt;div class="split"&gt;This div occupies the right half.&lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
-<h5 class="no-num no-toc">demonstration of sample CSS and (X)HTML:</h5>
+<h5 class="no-num no-toc">demonstration of sample CSS and HTML:</h5>
 <div style="width:38em; border:1em solid black"><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the left half.</div><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the right half.</div>The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support <span class="property">'box-sizing'</span>.
 </div>
 </div>
@@ -1537,8 +1537,8 @@ <h3 id="text-overflow">
     <td>as specified</td></tr>
 </tbody></table>
 
-<p>This property specifies the behavior when text overflows its  
-element (e.g. has 'overflow' of hidden) when text is prevented from wrapping (e.g. due to '<code>white-space:nowrap</code>' or a single word is too long to fit). Values have the following meanings:</p>
+<p>This property specifies the behavior when text overflows a block-level  
+element that has 'overflow' other than 'visible'. Text may overflow for example when it is prevented from wrapping (e.g. due to '<code>white-space:nowrap</code>' or a single word is too long to fit). Values have the following meanings:</p>
 
 <dl>
   <dt><dfn title="text-overflow:clip"><code>clip</code></dfn></dt>
@@ -1548,6 +1548,70 @@ <h3 id="text-overflow">
     <dd>Render an ellipsis character (U+2026) to represent clipped text, just before where the text would be otherwise clipped (in the direction of the flow of the text being clipped), replacing however many characters are necessary for the ellipsis to fit. If there is insufficient space for the ellipsis itself to fit, then clip the rendering of the ellipsis itself. Implementations may substitute a more language/script-appropriate ellipsis character. Implementations may render three dots "..." instead if the ellipsis character is unavailable. The ellipsis is styled according to the element with text-overflow ellipsis (rather than any deeper descendants without text-overflow ellipsis).</dd>
 </dl>
 
+<div class="example"><p style="display:none">Example(s):</p>
+<h4 class="no-num no-toc">text-overflow examples</h4>
+<p>These examples demonstrate setting the text-overflow of a block-level element that has text which overflows its dimensions:
+</p>
+<h5 class="no-num no-toc">sample CSS for a div:</h5>
+<pre><code class="css">div { width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif}
+</code></pre>
+<h5 class="no-num no-toc">sample HTML fragments, renderings, and your browser:</h5>
+<table border="1" cellpadding="5"><tbody>
+<tr><th>HTML</th><th>sample rendering</th><th>your browser</th></tr>
+<tr>
+<td><pre><code>&lt;div&gt;
+CSS IS AWESOME
+&lt;/div&gt;
+</code></pre></td>
+
+
+<td>
+<object type="image/png" data="cssisawesome.png">
+First, a box with text drawing outside of it.
+</object>
+</td>
+
+<td>
+<div style="width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif;">CSS IS AWESOME</div>
+</td>
+</tr>
+
+<tr>
+<td><pre><code>&lt;div style="<strong>text-overflow:clip;</strong> overflow:hidden"&gt;
+CSS IS AWESOME
+&lt;/div&gt;
+</code></pre></td>
+
+<td>
+<object type="image/png" data="cssisaweso.png">
+Second, a similar box with the text clipped outside the box.
+</object></td>
+
+<td>
+<div style="width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif;overflow:hidden;text-overflow:clip;">CSS IS AWESOME</div>
+</td>
+</tr>
+
+<tr>
+<td><pre><code>&lt;div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"&gt;
+CSS IS AWESOME
+&lt;/div&gt;
+</code></pre></td>
+
+<td>
+<object type="image/png" data="cssisaw.png">
+Third, a similar box with an ellipsis representing the clipped text.
+</object>
+</td>
+
+<td>
+<div style="width:3.2em; border:solid .1em black; margin:1em 0; padding:.2em;  font-family:Helvetica,sans-serif;overflow:hidden;text-overflow:ellipsis;">CSS IS AWESOME</div>
+</td>
+</tr>
+</tbody></table>
+
+</div>
+
 
 <h2>Pointing Devices and Keyboards</h2>