Add an example section for hanging-punctuation: allow-end and force-end

Author: kojiishi

css3-text/Overview.html

@@ -4193,6 +4193,28 @@ <h3 id=hanging-punctuation><span class=secno>10.2. </span> Hanging
    UAs that wish to support CJK typography, particularly those in the
    Japanese market.
 
+  <div class=example>
+   <p>The &lsquo;<code class=css>allow-end</code>&rsquo; and &lsquo;<code
+    class=css>force-end</code>&rsquo; are two variations of hanging
+    punctuation used in East Asia.</p>
+
+   <div class=figure>
+    <p><img alt="hanging-punctuation: allow-end (left) and force-end (right)"
+     height=51 src=hanging-punctuation-end.png width=388>
+
+    <p class=caption>&lsquo;<a href="#hanging-punctuation0"><code
+     class=property>hanging-punctuation</code></a>&rsquo;: &lsquo;<code
+     class=css>allow-end</code>&rsquo; (left) and &lsquo;<code
+     class=css>force-end</code>&rsquo; (right)</p>
+   </div>
+
+   <p>The punctuation at the end of the first line for &lsquo;<code
+    class=css>allow-end</code>&rsquo; does not hang, because it fits without
+    hanging. If &lsquo;<code class=css>force-end</code>&rsquo; is used,
+    however, it is forced to hang. The justification measures the line
+    without the hanging punctuation and therefore the line is expanded.</p>
+  </div>
+
   <h2 id=decoration><span class=secno>11. </span> <a
    name=text-decoration>Text Decoration</a></h2>
 

css3-text/Overview.src.html

@@ -3132,6 +3132,22 @@ <h3 id="hanging-punctuation">
       for UAs that wish to support CJK typography, particularly those in
       the Japanese market.</p>
 
+    <div class="example">
+      <p>The ''allow-end'' and ''force-end'' are two variations of
+        hanging punctuation used in East Asia.</p>
+      <div class="figure">
+        <p><img src="hanging-punctuation-end.png"
+          width="388" height="51"
+          alt="hanging-punctuation: allow-end (left) and force-end (right)">
+        <p class="caption">'hanging-punctuation': ''allow-end'' (left) and ''force-end'' (right)</p>
+      </div>
+      <p>The punctuation at the end of the first line for ''allow-end''
+        does not hang, because it fits without hanging.
+        If ''force-end'' is used, however, it is forced to hang.
+        The justification measures the line without the hanging punctuation
+        and therefore the line is expanded.</p>
+    </div>
+
 <h2 id="decoration">
   <a name="text-decoration">Text Decoration</a></h2>