[css-text] Add in jdaggett's letter-spacing examples

fantasai · fantasai · commit a8ad7ffd0055 · 2013-07-12T14:23:49.000-07:00
diff --git a/css-text/Overview.html b/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-06-18 name=dcterms.date>
+  <meta content=2013-07-12 name=dcterms.date>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
@@ -34,6 +34,20 @@
                                    padding: 2px 0; }
     #letter-spacing-example span { border: 1px solid; }
 
+    /* Start Letter-spacing Tutorial */
+    .ls-ex {
+      font-size: 200%;
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+    .ls-fixed-width {
+      width: 10em;
+    }
+    .color-box { background: rgb(224, 203, 82); }
+    .bad { color: red; }
+    .good { color: green; }
+    /* End Letter-spacing Tutorial */
+
     .char { border: 1px dotted gray; }
     .quarter { font-size: 25%; }
     tt[lang="ja"] { font-family: "MS Gothic", "Osaka", monospace }
@@ -62,12 +76,12 @@
 
    <h1>CSS Text Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 June 2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2013</h2>
 
    <dl>
     <dt>This version:</dt>
     <!--
-    <dd><a href="http://www.w3.org/TR/2013/WD-css3-text-20130618/">http://www.w3.org/TR/2013/WD-css3-text-20130618/</a></dd>
+    <dd><a href="http://www.w3.org/TR/2013/WD-css3-text-20130712/">http://www.w3.org/TR/2013/WD-css3-text-20130712/</a></dd>
 -->
 
     <dd><a
@@ -109,11 +123,11 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 June 2013</h2>
 
     <dd><a href="mailto:koji.a.ishii@mail.rakuten.com">Koji Ishii</a>
      (Rakuten, Inc.)
-     
-     <dt>Test Suite:
 
-     <dd><a
-      href="http://test.csswg.org/suites/css3-text/nightly-unstable/">http://test.csswg.org/suites/css3-text/nightly-unstable/</a>
+    <dt>Test Suite:
+
+    <dd><a
+     href="http://test.csswg.org/suites/css3-text/nightly-unstable/">http://test.csswg.org/suites/css3-text/nightly-unstable/</a>
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
@@ -2687,43 +2701,110 @@ <h3 id=letter-spacing><span class=secno>8.2. </span> Tracking: the ‘<a
    href="http://lists.w3.org/Archives/Public/www-style/2013May/0280.html">this
    thread</a>.
 
+  <p>For the purpose of ‘<a href="#letter-spacing0"><code
+   class=property>letter-spacing</code></a>’, each consecutive run of
+   atomic inlines (such as images and inline blocks) is treated as a single
+   <a href="#character"><i>character</i></a>.
+
   <p>Letter-spacing must not be applied at the beginning or at the end of a
-   line. The total letter spacing between two adjacent <a
-   href="#character"><i>characters</i></a> (after bidi reordering) is
-   specified by and rendered within the innermost element that
-   <em>contains</em> the boundary between the two <a
+   line.
+
+  <div class=example>
+   <p>Because letter-spacing is not applied at the beginning or end of a
+    line, text always fits flush with the edge of the block.
+
+   <pre>
+<!-- -->p    { letter-spacing: 1em; }
+
+<!-- -->&lt;p>abc&lt;/p></pre>
+
+   <p class="ls-ex good ls-fixed-width color-box"
+    style="text-align: left">a b c
+
+   <p class="ls-ex good ls-fixed-width color-box"
+    style="text-align: right">a b c
+
+   <p>UAs therefore must not append letter spacing to the right or trailing
+    edge of a line:
+
+   <p class="ls-ex bad ls-fixed-width color-box"
+    style="text-align: right">a b c 
+  </div>
+
+  <p> Letter spacing between two <a href="#character"><i>characters</i></a>
+   effectively “belongs” to the innermost element element that contains
+   the two <a href="#character"><i>characters</i></a>: the total letter
+   spacing between two adjacent <a href="#character"><i>characters</i></a>
+   (after bidi reordering) is specified by and rendered within the innermost
+   element that <em>contains</em> the boundary between the two <a
    href="#character"><i>characters</i></a>.
 
-  <div class=example id=letter-spacing-example>
-   <p>For example, given the markup
+  <div class=example>
+   <p>A given value of ‘<a href="#letter-spacing0"><code
+    class=property>letter-spacing</code></a>’ only affects the spacing
+    between characters completely contained within the element for which it
+    is specified:
 
-   <pre><span class=P>&lt;P&gt;a<span class=LS>&lt;LS&gt;b<span
-    class=Z>&lt;Z&gt;cd&lt;/Z&gt;</span><span
-    class=Y>&lt;Y&gt;ef&lt;/Y&gt;</span>&lt;/LS&gt;</span>g&lt;/P&gt;</span></pre>
+   <pre>
+<!-- -->p    { letter-spacing: 1em; }
+<!-- -->span { letter-spacing: 2em; }
 
-   <p>and the style sheet
+<!-- -->&lt;p>a&lt;span>bb&lt;/span>c&lt;/p></pre>
 
-   <pre><!--
-     -->LS { letter-spacing: 1em; }
-<!-- -->Z { letter-spacing: 0.3em; }
-<!-- -->Y { letter-spacing: 0.4em; }</pre>
+   <p class=ls-ex>a <span class=color-box>b  b</span> c
+
+   <p>This also means that applying ‘<a href="#letter-spacing0"><code
+    class=property>letter-spacing</code></a>’ 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=color-box>b</span> c
+
+   <p>An inline box 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=color-box>b b</span> c
 
-   <p>the spacing would be as [noted] below:
+   <p>It is incorrect to include the letter spacing on the right or trailing
+    edge of the element:
 
-   <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>
+   <p class="ls-ex bad">a <span class=color-box>b b </span>c
+
+   <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 ‘<code class=property>c</code>’ doesn't end up
+    next to ‘<code class=css>א</code>’:
+
+   <pre>
+<!-- -->p    { letter-spacing: 1em; }
+<!-- -->span { letter-spacing: 2em; }
+
+<!-- -->&lt;!-- abc followed by Hebrew letters alef (א), bet (ב) and gimel (ג) -->
+<!-- -->&lt;!-- Reordering will display these in reverse order. --&gt;
+<!-- --><bdo
+    dir=ltr>&lt;p>ab&lt;span>cא&lt;/span>בג&lt;/p></bdo></pre>
+
+   <p class=ls-ex>a b <span class=color-box>c</span> <span
+    class=color-box>א</span> ב ג
   </div>
 
   <p>Letter-spacing ignores zero-width characters (such as those from the
-   Unicode Cf category). For example, ‘<a href="#letter-spacing0"><code
-   class=property>letter-spacing</code></a>’ applied to
-   <code>A&amp;zwsp;B</code> is identical to <code>AB</code>.
+   Unicode Cf category).
 
-  <p>For the purpose of ‘<a href="#letter-spacing0"><code
-   class=property>letter-spacing</code></a>’, each consecutive run of
-   atomic inlines (such as images and inline blocks) is treated as a single
-   <a href="#character"><i>character</i></a>.
+  <p class=example>For example, ‘<a href="#letter-spacing0"><code
+   class=property>letter-spacing</code></a>’ applied to
+   <code>A&amp;zwsp;B</code> is identical to <code>AB</code>, regardless of
+   where any element boundaries might fall.
 
   <p>When the effective letter-spacing between two characters is not zero
    (due to either <a href="#text-justify">justification</a> or non-zero
diff --git a/css-text/Overview.src.html b/css-text/Overview.src.html
@@ -23,27 +23,19 @@
                                    padding: 2px 0; }
     #letter-spacing-example span { border: 1px solid; }
 
+    /* Start Letter-spacing Tutorial */
     .ls-ex {
       font-size: 200%;
       margin-left: 1em;
+      margin-right: 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; }
+    .color-box { background: rgb(224, 203, 82); }
+    .bad { color: red; }
+    .good { color: green; }
+    /* End Letter-spacing Tutorial */
 
     .char { border: 1px dotted gray; }
     .quarter { font-size: 25%; }
@@ -2070,77 +2062,71 @@ <h3 id="letter-spacing">
      German, for example, avoids letter-spacing for justification because it's used for emphasis.
      See <a href="http://lists.w3.org/Archives/Public/www-style/2013May/0280.html">this thread</a>.
 
+    <p>For the purpose of 'letter-spacing', each consecutive run of atomic
+      inlines (such as images and inline blocks) is treated as a single
+      <i>character</i>.
+
     <p>Letter-spacing must not be applied at the beginning or at the end of a line.
-       The total letter spacing between two adjacent <i>characters</i> (after bidi reordering)
-       is specified by and rendered within
-       the innermost element that <em>contains</em> the boundary between the two <i>characters</i>.
 
-    <div class="example" id="letter-spacing-example">
-      <p>For example, given the markup</p>
+  <div class="example">
+    <p>Because letter-spacing is not applied at the beginning or end of a line,
+    text always fits flush with the edge of the block.
+    <pre>
+<!-- -->p    { letter-spacing: 1em; }
 
-      <pre><span class="P">&lt;P&gt;a<span class="LS">&lt;LS&gt;b<span class="Z">&lt;Z&gt;cd&lt;/Z&gt;</span><span class="Y">&lt;Y&gt;ef&lt;/Y&gt;</span>&lt;/LS&gt;</span>g&lt;/P&gt;</span></pre>
+<!-- -->&lt;p>abc&lt;/p></pre>
 
-      <p>and the style sheet</p>
+    <p class="ls-ex good ls-fixed-width color-box" style="text-align: left">a&emsp;b&emsp;c</p>
+    <p class="ls-ex good ls-fixed-width color-box" style="text-align: right">a&emsp;b&emsp;c</p>
 
-      <pre><!--
-     -->LS { letter-spacing: 1em; }
-<!-- -->Z { letter-spacing: 0.3em; }
-<!-- -->Y { letter-spacing: 0.4em; }</pre>
+    <p>UAs therefore must not append letter spacing to the right or trailing edge of a line:</p>
 
-      <p>the spacing would be as [noted] below:</p>
+    <p class="ls-ex bad ls-fixed-width color-box" style="text-align: right">a&emsp;b&emsp;c&emsp;</p>
+  </div>
 
-      <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>
+       Letter spacing between two <i>characters</i> effectively “belongs”
+       to the innermost element element that contains the two <i>characters</i>:
+       the total letter spacing between two adjacent <i>characters</i> (after bidi reordering)
+       is specified by and rendered within
+       the innermost element that <em>contains</em> the boundary between the two <i>characters</i>.
 
   <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:
-    
+    <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 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 class="ls-ex">a&emsp;<span class="color-box">b&emsp;&emsp;b</span>&emsp;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>This also means that applying 'letter-spacing' to
+    an element containing only a single character
+    has no effect on the rendered result:
 
-    <p>Letter spacing is never applied at the beginning or end of a line:</p>
     <pre>
 <!-- -->p    { letter-spacing: 1em; }
+<!-- -->span { letter-spacing: 2em; }
 
-<!-- -->&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>
+<!-- -->&lt;p>a&lt;span>b&lt;/span>c&lt;/p></pre>
 
-    <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 class="ls-ex">a&emsp;<span class="color-box">b</span>&emsp;c</p>
 
-    <p>A given value of 'letter-spacing' only affects the spacing
-    between characters completely contained within the element for which it is specified:
+    <p>An inline box only includes
+    letter spacing between characters completely contained within that element:
 
     <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; }
+    <p class="ls-ex good">a&emsp;<span class="color-box">b&emsp;b</span>&emsp;c</p>
 
-    &lt;p>a&lt;span>b&lt;/span>c&lt;/p></pre>
+    <p>It is incorrect to include the letter spacing on the right or trailing edge of the element:
 
-    <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 class="ls-ex bad">a&emsp;<span class="color-box">b&emsp;b&emsp;</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,
@@ -2149,21 +2135,19 @@ <h3 id="letter-spacing">
 <!-- -->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>
+<!-- -->&lt;!-- abc followed by Hebrew letters alef (&#x5d0;), bet (&#x5d1;) and gimel (&#x5d2;) -->
+<!-- -->&lt;!-- Reordering will display these in reverse order. --&gt;
+<!-- --><bdo dir=ltr>&lt;p>ab&lt;span>c&#x5d0;&lt;/span>&#x5d1;&#x5d2;&lt;/p></bdo></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>
+    <p class="ls-ex">a&emsp;b</span>&emsp;<span class="color-box">c</span>&emsp;<span class="color-box">&#x5d0;</span>&emsp;&#x5d1;&emsp;&#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>.
-
-    <p>For the purpose of 'letter-spacing', each consecutive run of atomic
-      inlines (such as images and inline blocks) is treated as a single
-      <i>character</i>.
+      Unicode Cf category).
+    
+    <p class="example">For example, 'letter-spacing' applied to
+      <code>A&amp;zwsp;B</code> is identical to <code>AB</code>,
+      regardless of where any element boundaries might fall.
 
     <p>When the effective letter-spacing between two characters is not zero
       (due to either <a href="#text-justify">justification</a>
