[css-text] Add in jdaggett's example code

--HG--
extra : rebase_source : 5537a01957e41bff2b1a89b94ed5596bc928631a

Author: fantasai

css-text/Overview.src.html

@@ -23,6 +23,28 @@
                                    padding: 2px 0; }
     #letter-spacing-example span { border: 1px solid; }
 
+    .ls-ex {
+      font-size: 200%;
+      margin-left: 1em;
+    }
+    .ls-fixed-width {
+      width: 10em;
+    }
+    .ls-right {
+      text-align: right;
+    }
+    .ls-1emsp {
+      display: inline-block;
+      width: 1em;
+    }
+    .ls-2emsp {
+      display: inline-block;
+      width: 2em;
+    }
+    .ls-bg-border { background-color: rgb(224, 203, 82); }
+    .ls-1em { letter-spacing: 1em; }
+    .ls-2em { letter-spacing: 1em; }
+
     .char { border: 1px dotted gray; }
     .quarter { font-size: 25%; }
     tt[lang="ja"] { font-family: "MS Gothic", "Osaka", monospace }
@@ -2066,6 +2088,71 @@ <h3 id="letter-spacing">
       <pre><span class="P">a[0]<span class="LS">b[1em]<span class="Z">c[0.3em]d</span>[1em]<span class="Y">e[0.4em]f</span></span>[0]g</span></pre>
     </div>
 
+  <div class="example">
+    <p>The inline box used to define backgrounds and borders for a given element
+    only includes letter spacing between characters completely contained within that element:
+    
+    <pre>
+<!-- -->p    { letter-spacing: 1em; }
+
+<!-- -->&lt;p>a&lt;span>bb&lt;/span>c&lt;/p></pre>
+
+    <p class="ls-ex good">a<span class="ls-1emsp"> </span><span class="ls-bg-border">b<span class="ls-1emsp"> </span>b</span><span class="ls-1emsp"> </span>c</p>
+
+    <p>It is incorrect to include the letter spacing on the right or trailing edge of the element:
+
+    <p class="ls-ex bad">a<span class="ls-1emsp"> </span><span class="ls-bg-border">b<span class="ls-1emsp"> </span>b<span class="ls-1emsp"> </span></span>c</p>
+
+    <p>Letter spacing is never applied at the beginning or end of a line:</p>
+    <pre>
+<!-- -->p    { letter-spacing: 1em; }
+
+<!-- -->&lt;p>abc&lt;/p></pre>
+
+    <p class="ls-ex good ls-fixed-width ls-bg-border">a<span class="ls-1emsp"> </span>b<span class="ls-1emsp"> </span>c</p>
+    <p class="ls-ex good ls-fixed-width ls-bg-border ls-right">a<span class="ls-1emsp"> </span>b<span class="ls-1emsp"> </span>c</p>
+
+    <p>It is incorrect to append letter spacing to the trailing edge of lines:</p>
+
+    <p class="ls-ex bad ls-fixed-width ls-bg-border ls-right">a<span class="ls-1emsp"> </span>b<span class="ls-1emsp"> </span>c<span class="ls-1emsp"> </span></p>
+
+    <p>A given value of 'letter-spacing' only affects the spacing
+    between characters completely contained within the element for which it is specified:
+
+    <pre>
+<!-- -->p    { letter-spacing: 1em; }
+<!-- -->span { letter-spacing: 2em; }
+
+<!-- -->&lt;p>a&lt;span>bb&lt;/span>c&lt;/p></pre>
+
+    <p class="ls-ex">a<span class="ls-1emsp"> </span><span class="ls-bg-border">b<span class="ls-2emsp"> </span>b</span><span class="ls-1emsp"> </span>c</p>
+
+    <p>This also means that applying 'letter-spacing' to an element containing only a single character
+    has no effect on the rendered result:
+
+    <pre>
+<!-- -->p    { letter-spacing: 1em; }
+<!-- -->span { letter-spacing: 2em; }
+
+    &lt;p>a&lt;span>b&lt;/span>c&lt;/p></pre>
+
+    <p class="ls-ex">a<span class="ls-1emsp"> </span><span class="ls-bg-border">b</span><span class="ls-1emsp"> </span>c</p>
+
+    <p>Letter spacing is inserted <strong>after</strong> RTL reordering,
+    so the letter spacing applied to the inner span below has no effect,
+    since after reordering the 'c' doesn't end up next to '&#x5d0;':
+    <pre>
+<!-- -->p    { letter-spacing: 1em; }
+<!-- -->span { letter-spacing: 2em; }
+
+<!-- -->&lt;!-- abc followed by Hebrew letters alef, bet and gimel
+<!-- -->reordering will display these in reverse order --&gt;
+<!-- -->&lt;p>ab&lt;span>c&amp;#x5d0;&lt;/span>&amp;#x5d1;&amp;#x5d2;&lt;/p>
+<!-- -->&lt;span>b&lt;/span>c&lt;/p></pre>
+
+    <p class="ls-ex">a<span class="ls-1emsp"> </span>b</span><span class="ls-1emsp"> </span><span class="ls-bg-border">c</span><span class="ls-1emsp"> </span><span class="ls-bg-border">&#x5d0;</span><span class="ls-1emsp"> </span>&#x5d1;<span class="ls-1emsp"> </span>&#x5d2;</p>
+  </div>
+
     <p>Letter-spacing ignores zero-width characters (such as those from the
       Unicode Cf category). For example, 'letter-spacing' applied to
       <code>A&amp;zwsp;B</code> is identical to <code>AB</code>.