[css-text] Fix up wording for 'text-justify'

Author: fantasai

css-text/Overview.html

@@ -2132,13 +2132,14 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
      class=css>inter-word</code>’ for English, etc. Another possibility is
      to use a justification method that is a simple universal compromise for
      all writing systems, such as primarily expanding <a
-     href="#word-separator"><i>word separators</i></a> along with expanding
-     between CJK and Southeast Asian <a href="#letter0"><i>letters</i></a>.
+     href="#word-separator"><i>word separators</i></a> along with secondarily
+     expanding between CJK and Southeast Asian <a
+     href="#letter0"><i>letters</i></a>.
 
     <div class=figure id=fig-text-justify-cursive>
      <p> <img
       alt="Two lines of calligraphic Arabic end together due to a mix of compressed and swash forms."
-      class=example src=text-justify-cursive.png
+      src=text-justify-cursive.png
       title="Swash forms elongate the first line while a compressed contextual ligature shortens the second, allowing both to end precisely together.">
 
      <p class=caption>An example of cursively-justified Arabic text rendered
@@ -2148,7 +2149,7 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
     <div class=figure id=fig-text-justify-compromise>
      <p> <img
       alt="Extra space is partly to spaces and partly among CJK and Thai letters."
-      class=example src=text-justify-compromise.png>
+      src=text-justify-compromise.png>
 
      <p class=caption>Mixed-script text with ‘<code class=css>text-justify:
       auto</code>’: this interpretation uses a universal-compromise
@@ -2166,15 +2167,15 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
    <dt><dfn id=inter-word title="text-justify:inter-word">‘<code
     class=css>inter-word</code>’</dfn>
 
-   <dd>Justification primarily varies the used ‘<a
-    href="#word-spacing0"><code class=property>word-spacing</code></a>’;
-    the first-level <a href="#expansion-opportunity"><i>expansion
-    opportunities</i></a> are at <a href="#word-separator"><i>word
-    separators</i></a>. This behavior is typical for languages that separate
-    words using spaces, like English or Korean.
+   <dd>Justification varies the used ‘<a href="#word-spacing0"><code
+    class=property>word-spacing</code></a>’ on the line, i.e. the primary
+    <a href="#expansion-opportunity"><i>expansion opportunities</i></a> are
+    at <a href="#word-separator"><i>word separators</i></a>. This behavior is
+    typical for languages that separate words using spaces, like English or
+    Korean.
     <div class=figure id=fig-text-justify-interword>
      <p> <img alt="Extra space is equally distributed mainly to spaces."
-      class=example src=text-justify-interword.png>
+      src=text-justify-interword.png>
 
      <p class=caption>Mixed-script text with ‘<code class=css>text-justify:
       inter-word</code>’
@@ -2195,18 +2196,19 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
    <dt><dfn id=distribute title="text-justify:distribute">‘<code
     class=css>distribute</code>’</dfn>
 
-   <dd>Justification primarily varies the used ‘<a
-    href="#letter-spacing0"><code
-    class=property>letter-spacing</code></a>’; the first-level <a
-    href="#expansion-opportunity"><i>expansion opportunities</i></a> are
-    between adjacent <a href="#character"><i>characters</i></a> (except
-    between <a href="#letter0"><i>letters</i></a> in <a
-    href="#cursive-scripts"><i>cursive scripts</i></a> such as Arabic). This
-    value is sometimes used in e.g. Japanese.
+   <dd>Justification varies the spacing between adjacent <a
+    href="#character"><i>characters</i></a> (except between <a
+    href="#letter0"><i>letters</i></a> in <a
+    href="#cursive-scripts"><i>cursive scripts</i></a> such as Arabic), i.e.
+    the primary <a href="#expansion-opportunity"><i>expansion
+    opportunities</i></a> are between adjacent <a
+    href="#character"><i>characters</i></a> where both <a
+    href="#character"><i>characters</i></a> in the pair are
+    non-<i>cursive</i>. This value is sometimes used in e.g. Japanese.
     <div class=figure id=fig-text-justify-distribute>
      <p> <img
       alt="Extra space is equally distributed at points between spaces and letters of all writing systems."
-      class=example src=text-justify-distribute.png>
+      src=text-justify-distribute.png>
 
      <p class=caption>Mixed-script text with ‘<code class=css>text-justify:
       distribute</code>’
@@ -2227,7 +2229,7 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
       <div class="figure" id="fig-text-justify">
         <p>
           <img alt="Examples of text-justify values commonly used in East Asian scripts"
-               class="example" src="text-justify-east-asia.png" height="376" width="491"></p>
+               src="text-justify-east-asia.png" height="376" width="491"></p>
         <p class="caption">Values of 'text-justify': ''inter-word'', ''auto'', and ''distribute''</p>
       </div>
 -->
@@ -2268,30 +2270,18 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
     letter spacing.
   </div>
 
-  <p>CSS defines <dfn id=expansion-opportunity
-   title="expansion opportunity">expansion opportunities</dfn> as points
-   where the justification algorithm may alter spacing within the text. <a
-   href="#expansion-opportunity"><i>Expansion opportunities</i></a> are
-   divided into different priority levels: within a level, all <a
-   href="#expansion-opportunity"><i>expansion opportunities</i></a> are
-   expanded or compressed at the same priority, with space distributed in
-   proportion to the <a href="#expansion-opportunity"><i>expansion
-   opportunity</i></a>’s ‘<code class=property>font-size</code>’. In
-   the case of an <a href="#expansion-opportunity"><i>expansion
-   opportunity</i></a> introduced by a single <a
-   href="#character"><i>character</i></a>, (as with ‘<a
-   href="#word-spacing0"><code class=property>word-spacing</code></a>’) the
-   ‘<code class=property>font-size</code>’ of that <a
-   href="#character"><i>character</i></a> is used; in the case of an <a
-   href="#expansion-opportunity"><i>expansion opportunity</i></a> between <a
-   href="#character"><i>characters</i></a>, (as with ‘<a
-   href="#letter-spacing0"><code class=property>letter-spacing</code></a>’)
-   the ‘<code class=property>font-size</code>’ of the innermost element
-   containing their boundary is used.
-
-  <p>Characters from the Unicode Symbols (S*) and Punctuation (P*) classes
-   are generally treated the same as a <a href="#letter0"><i>letter</i></a>;
-   in the case of ‘<code class=css>inter-word</code>’, as a Latin <a
+  <p>An <dfn id=expansion-opportunity>expansion opportunity</dfn> is a point
+   where the justification algorithm may alter spacing within the text. The
+   UA divides <a href="#expansion-opportunity"><i>expansion
+   opportunities</i></a> into different priority levels: within a level, all
+   <a href="#expansion-opportunity"><i>expansion opportunities</i></a> are
+   expanded or compressed at the same priority.
+
+  <p>When determining <a href="#expansion-opportunity"><i>expansion
+   opportunities</i></a>, characters from the Unicode Symbols (S*) and
+   Punctuation (P*) classes are generally treated the same as a <a
+   href="#letter0"><i>letter</i></a>: in the case of ‘<code
+   class=css>inter-word</code>’, as a Latin <a
    href="#letter0"><i>letter</i></a>, in the case of ‘<code
    class=css>distribute</code>’, as a Han <a
    href="#letter0"><i>letter</i></a>, and in the case of ‘<a
@@ -2308,21 +2298,24 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
    consecutive EM DASH U+2014, HORIZONTAL BAR U+2015, HORIZONTAL ELLIPSIS
    U+2026, or TWO DOT LEADER U+2025 characters <a href="#JLREQ"
    rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>; thus a UA might assign these
-   characters to a "never" prioritization level. As another example, certain
-   fullwidth punctuation characters are considered to contain an <a
+   characters to a “never” prioritization level. As another example,
+   certain fullwidth punctuation characters are considered to contain an <a
    href="#expansion-opportunity"><i>expansion opportunity</i></a> in
    Japanese. The UA might therefore assign these characters to a higher
    prioritization level than the opportunities between ideographic
    characters.
 
-  <p>The <a href="#word-spacing">word-spacing</a> property can specify limits
-   on <a href="#expansion-opportunity"><i>expansion opportunities</i></a>
+  <p>The ‘<a href="#word-spacing0"><code
+   class=property>word-spacing</code></a>’ property can specify limits on
+   <a href="#expansion-opportunity"><i>expansion opportunities</i></a>
    introduced by <a href="#word-separator"><i>word separators</i></a>. How
    any remaining space is distributed once all <a
    href="#expansion-opportunity"><i>expansion opportunities</i></a> reach
-   their limits is up to the UA. If the inline contents of a line cannot be
-   stretchedto the full width of the line box, then they must be aligned as
-   specified by the ‘<a href="#text-align-last0"><code
+   their limits is up to the UA.
+
+  <p>If the inline contents of a line cannot be stretched to the full width
+   of the line box, then they must be aligned as specified by the ‘<a
+   href="#text-align-last0"><code
    class=property>text-align-last</code></a>’ property. (If ‘<a
    href="#text-align-last0"><code
    class=property>text-align-last</code></a>’ is ‘<code
@@ -2472,10 +2465,6 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
       characters of these scripts.
 -->
 
-  <p>The UA may enable or break optional ligatures or use other font features
-   such as alternate glyphs or glyph compression to help justify the text
-   under any method. This behavior is not controlled by this level of CSS.
-
   <div class=example>
    <p>3.8 Line Adjustment in <a href="#JLREQ"
     rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> gives an example of a set of
@@ -2525,6 +2514,10 @@ <h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
         </ol>
       --></div>
 
+  <p>The UA may enable or break optional ligatures or use other font features
+   such as alternate glyphs or glyph compression to help justify the text
+   under any method. This behavior is not controlled by this level of CSS.
+
   <h2 id=spacing><span class=secno>8. </span> Spacing</h2>
 
   <p>CSS offers control over text spacing via the ‘<a

css-text/Overview.src.html

@@ -1582,20 +1582,20 @@ <h3 id="text-justify">
           Another possibility is to use a justification method that is a
           simple universal compromise for all writing systems,
           such as primarily expanding <i>word separators</i>
-          along with expanding between CJK and Southeast Asian <i>letters</i>.</p>
+          along with secondarily expanding between CJK and Southeast Asian <i>letters</i>.
 
         <div class="figure" id="fig-text-justify-cursive">
           <p>
             <img alt="Two lines of calligraphic Arabic end together due to a mix of compressed and swash forms."
                  title="Swash forms elongate the first line while a compressed contextual ligature shortens the second, allowing both to end precisely together."
-                 class="example" src="text-justify-cursive.png"></p>
+                 src="text-justify-cursive.png"></p>
           <p class="caption">An example of cursively-justified Arabic text rendered by <a href="http://www.decotype.com/">Tasmeem</a>.
         </div>
 
           <div class="figure" id="fig-text-justify-compromise">
             <p>
               <img alt="Extra space is partly to spaces and partly among CJK and Thai letters."
-                   class="example" src="text-justify-compromise.png"></p>
+                   src="text-justify-compromise.png"></p>
             <p class="caption">Mixed-script text with ''text-justify: auto'':
               this interpretation uses a universal-compromise justification method,
               expanding at spaces as well as between CJK and Southeast Asian letters.
@@ -1606,14 +1606,14 @@ <h3 id="text-justify">
           to improve readability or for accessibility purposes.
 
       <dt><dfn title="text-justify:inter-word">''inter-word''</dfn></dt>
-        <dd>Justification primarily varies the used 'word-spacing';
-          the first-level <i>expansion opportunities</i> are at <i>word separators</i>.
+        <dd>Justification varies the used 'word-spacing' on the line, i.e.
+          the primary <i>expansion opportunities</i> are at <i>word separators</i>.
           This behavior is typical for languages that separate words using spaces,
           like English or Korean.
           <div class="figure" id="fig-text-justify-interword">
             <p>
               <img alt="Extra space is equally distributed mainly to spaces."
-                   class="example" src="text-justify-interword.png"></p>
+                   src="text-justify-interword.png"></p>
             <p class="caption">Mixed-script text with ''text-justify: inter-word''
           </div>
 <!--
@@ -1629,14 +1629,15 @@ <h3 id="text-justify">
           This value is typically used for Southeast Asian scripts such as Thai.</dd>
 -->
       <dt><dfn title="text-justify:distribute">''distribute''</dfn></dt>
-        <dd>Justification primarily varies the used 'letter-spacing';
-          the first-level <i>expansion opportunities</i> are between adjacent <i>characters</i>
-          (except between <i>letters</i> in <i>cursive scripts</i> such as Arabic).
+        <dd>Justification varies the spacing between adjacent <i>characters</i>
+          (except between <i>letters</i> in <i>cursive scripts</i> such as Arabic),
+          i.e. the primary <i>expansion opportunities</i> are between adjacent <i>characters</i>
+          where both <i>characters</i> in the pair are non-<i>cursive</i>.
           This value is sometimes used in e.g. Japanese.
           <div class="figure" id="fig-text-justify-distribute">
             <p>
               <img alt="Extra space is equally distributed at points between spaces and letters of all writing systems."
-                   class="example" src="text-justify-distribute.png"></p>
+                   src="text-justify-distribute.png"></p>
             <p class="caption">Mixed-script text with ''text-justify: distribute''
           </div>
 <!--
@@ -1656,7 +1657,7 @@ <h3 id="text-justify">
       <div class="figure" id="fig-text-justify">
         <p>
           <img alt="Examples of text-justify values commonly used in East Asian scripts"
-               class="example" src="text-justify-east-asia.png" height="376" width="491"></p>
+               src="text-justify-east-asia.png" height="376" width="491"></p>
         <p class="caption">Values of 'text-justify': ''inter-word'', ''auto'', and ''distribute''</p>
       </div>
 -->
@@ -1693,19 +1694,15 @@ <h3 id="text-justify">
       to <i>word separators</i> than letter spacing. 
     </div>
 
-    <p>CSS defines <dfn id="expansion-opportunity" title="expansion opportunity">expansion opportunities</dfn>
-      as points where the justification algorithm may alter spacing within the text.
-      <i>Expansion opportunities</i> are divided into different priority levels:
+    <p>An <dfn>expansion opportunity</dfn> is
+      a point where the justification algorithm may alter spacing within the text.
+      The UA divides <i>expansion opportunities</i> into different priority levels:
       within a level, all <i>expansion opportunities</i> are
-      expanded or compressed at the same priority,
-      with space distributed in proportion to the <i>expansion opportunity</i>’s 'font-size'.
-      In the case of an <i>expansion opportunity</i> introduced by a single <i>character</i>,
-      (as with 'word-spacing') the 'font-size' of that <i>character</i> is used;
-      in the case of an <i>expansion opportunity</i> between <i>characters</i>,
-      (as with 'letter-spacing') the 'font-size' of the innermost element containing their boundary is used.
-
-    <p>Characters from the Unicode Symbols (S*) and Punctuation (P*) classes
-      are generally treated the same as a <i>letter</i>;
+      expanded or compressed at the same priority.
+
+    <p>When determining <i>expansion opportunities</i>,
+      characters from the Unicode Symbols (S*) and Punctuation (P*) classes
+      are generally treated the same as a <i>letter</i>:
       in the case of ''inter-word'', as a Latin <i>letter</i>,
       in the case of ''distribute'', as a Han <i>letter</i>,
       and in the case of ''auto'', as a <i>letter</i> of the dominant script.
@@ -1719,23 +1716,23 @@ <h3 id="text-justify">
       For example, there are traditionally no <i>expansion opportunities</i>
       between consecutive EM DASH U+2014, HORIZONTAL BAR U+2015, HORIZONTAL
       ELLIPSIS U+2026, or TWO DOT LEADER U+2025 characters [[JLREQ]]; thus
-      a UA might assign these characters to a "never" prioritization level.
+      a UA might assign these characters to a “never” prioritization level.
       As another example, certain fullwidth punctuation characters are
       considered to contain an <i>expansion opportunity</i> in Japanese.
       The UA might therefore assign these characters to a higher prioritization
       level than the opportunities between ideographic characters.
 
-    <p>The <a href="#word-spacing">word-spacing</a> property can specify limits on
+    <p>The 'word-spacing' property can specify limits on
       <i>expansion opportunities</i> introduced by <i>word separators</i>.
       How any remaining space is distributed once all <i>expansion opportunities</i>
       reach their limits is up to the UA.
-      If the inline contents of a line cannot be stretchedto the full width of the line box,
+    
+    <p>If the inline contents of a line cannot be stretched to the full width of the line box,
       then they must be aligned as specified by the 'text-align-last' property.
       (If 'text-align-last' is ''justify'', then
        they must be aligned as for ''center'' if 'text-justify' is ''distribute'',
        and as ''start'' otherwise.)
 
-
 <!--
     <p>The <i>expansion opportunity</i> priorities for values of 'text-justify'
       are given in the table below. Since justification behavior
@@ -1879,11 +1876,6 @@ <h3 id="text-justify">
       characters of these scripts.
 -->
 
-    <p>The UA may enable or break optional ligatures or use other font
-      features such as alternate glyphs or glyph compression to help
-      justify the text under any method. This behavior is not controlled by
-      this level of CSS.</p>
-
     <div class="example">
       <p>3.8 Line Adjustment in [[JLREQ]] gives an example of a set of rules for
         how a text formatter can justify Japanese text.
@@ -1931,6 +1923,11 @@ <h3 id="text-justify">
       -->
     </div>
 
+    <p>The UA may enable or break optional ligatures or use other font
+      features such as alternate glyphs or glyph compression to help
+      justify the text under any method. This behavior is not controlled by
+      this level of CSS.
+
 <h2 id="spacing">
   Spacing</h2>