[css-text] Add examples and explanatory text for word-break to make it less confusing.

Author: tabatkins

css-text/Overview.html

@@ -10,7 +10,7 @@
    rel=dcterms.rights>
   <meta content="CSS Text Module Level 3 (CSS3 Text)" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-05-11 name=dcterms.date>
+  <meta content=2013-05-13 name=dcterms.date>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -43,12 +43,12 @@
 
    <h1>CSS Text Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 May 2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 May 2013</h2>
 
    <dl>
     <dt>This version:</dt>
     <!--
-    <dd><a href="http://www.w3.org/TR/2013/WD-css3-text-20130511/">http://www.w3.org/TR/2013/WD-css3-text-20130511/</a></dd>
+    <dd><a href="http://www.w3.org/TR/2013/WD-css3-text-20130513/">http://www.w3.org/TR/2013/WD-css3-text-20130513/</a></dd>
 -->
 
     <dd><a
@@ -1380,7 +1380,31 @@ <h3 id=word-break><span class=secno>5.3. </span> Breaking Rules for
   </table>
 
   <p>This property specifies <a href="#soft-wrap-opportunity"><i>soft wrap
-   opportunities</i></a> between letters. Values have the following meanings:
+   opportunities</i></a> between letters, i.e. where it is “normal” and
+   permissible to break lines of text.
+
+  <div class=example>
+   <p>For example, in some styles of CJK typesetting, English words are
+    allowed to break between any two letters, rather than only at spaces or
+    hyphenation points; this can be enabled with ‘<a
+    href="#break-all"><code class=css>word-break:break-all</code></a>’.
+    <figure> <img
+    alt="A snippet of Japanese text with English in it. The word 'caption' is broken into 'capt' and 'ion' across two lines."
+    src=break-all.png> <figcaption>An example of English text embedded in
+    Japanese being broken at an arbitrary point in the word.</figcaption>
+    </figure>
+
+   <p>As another example, Korean has two styles of line-breaking: between any
+    two Korean syllables (‘<code class=css>word-break: normal</code>’)
+    or, like English, mainly at spaces (‘<code class=css>word-break:
+    keep-all</code>’).
+  </div>
+
+  <p class=note> To enable additional break opportunities only in the case of
+   overflow, see ‘<a href="#overflow-wrap0"><code
+   class=property>overflow-wrap</code></a>’.
+
+  <p>Values have the following meanings:
 
   <dl>
    <dt><dfn id=normal1 title="word-break:normal">‘<code

css-text/Overview.src.html

@@ -990,8 +990,29 @@ <h3 id="word-break">
         </tr>
     </table>
 
-    <p>This property specifies <i>soft wrap opportunities</i> between letters.
-      Values have the following meanings:</p>
+    <p>This property specifies <i>soft wrap opportunities</i> between letters,
+      i.e. where it is “normal” and permissible to break lines of text.
+
+    <div class="example">
+      <p>For example, in some styles of CJK typesetting, English words are allowed
+        to break between any two letters, rather than only at spaces or hyphenation points;
+        this can be enabled with ''word-break:break-all''.
+
+      <figure>
+        <img src="break-all.png" alt="A snippet of Japanese text with English in it. The word 'caption' is broken into 'capt' and 'ion' across two lines.">
+        <figcaption>An example of English text embedded in Japanese being broken at an arbitrary point in the word.</figcaption>
+      </figure>
+
+      <p>As another example, Korean has two styles of line-breaking:
+        between any two Korean syllables (''word-break: normal'')
+        or, like English, mainly at spaces (''word-break: keep-all'').
+    </div>
+
+    <p class="note">
+      To enable additional break opportunities only in the case of overflow,
+      see 'overflow-wrap'.
+
+    <p>Values have the following meanings:</p>
 
     <dl>
       <dt><dfn title="word-break:normal">''normal''</dfn></dt>