[css-line-grid] adding alignment snapping examples

Author: astearns

css-line-grid/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Line Grid Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2014-05-06 name=dcterms.date>
+  <meta content=2014-07-18 name=dcterms.date>
   <meta content="Elika Etemad" name=dcterms.creator>
   <meta content="Koji Ishii" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -51,13 +51,13 @@
 
    <h1>CSS Line Grid Module Level 1</h1>
 
-   <h2 class="no-num no-toc">Editor's Draft 6 May 2014</h2>
+   <h2 class="no-num no-toc">Editor's Draft 18 July 2014</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a href="http://dev.w3.org/csswg/css-line-grid-1/">
-     http://www.w3.org/TR/2014/ED-css-line-grid-1-20140506/</a>
+     http://www.w3.org/TR/2014/ED-css-line-grid-1-20140718/</a>
 
     <dt>Latest version:
 
@@ -502,12 +502,12 @@ <h3 id=line-snap><span class=secno>3.1. </span> Snapping Line Boxes: the
 
   <p>This property applies to all the line boxes directly contained by the
    element, and, when not ‘<a href="#none0"><code
-   class=css>none</code></a>’, causes each line box to shift downward
-   (possibly by zero) until it snaps to the line grid specified by ‘<a
-   href="#line-grid0"><code class=property>line-grid</code></a>’. (The
-   unshifted position is the position that would be determined by normal line
-   stacking rules, with consideration of any new controls defined by other
-   modules such as <a href="#ref-CSS3LINE"
+   class=css>none</code></a>’, causes each line box to shift (usually
+   downward, possibly by zero) until it snaps to the line grid specified by
+   ‘<a href="#line-grid0"><code class=property>line-grid</code></a>’.
+   (The unshifted position is the position that would be determined by normal
+   line stacking rules, with consideration of any new controls defined by
+   other modules such as <a href="#ref-CSS3LINE"
    rel=biblioentry>[CSS3LINE]<!--{{CSS3LINE}}--></a>.) Values have the
    following meanings:
 
@@ -541,6 +541,56 @@ <h3 id=line-snap><span class=secno>3.1. </span> Snapping Line Boxes: the
    line box so as to allow the line to snap without jumping downward to the
    next grid line.
 
+  <div class=example>
+   <p>When a block is start-aligned, its line boxes will always shift
+    downward when snapping to a line grid. Here and in the next two examples
+    there are two lines (A and B) with line-snap:none and two or three lines
+    (1, 2 and 3) with line-snap:baseline. Here lines 1, 2 and 3 shift down to
+    snap their baselines to the line grid.
+   <figure style="float:left;"> <img alt="line positions before snapping"
+   src="images/top-no-snap.png"> <figcaption> Before snapping </figcaption>
+   </figure> <figure style="float:left;"> <img
+   alt="line positions after snapping" src="images/top-snapped.png">
+   <figcaption> After line snapping </figcaption> </figure></div>
+
+  <div class=example>
+   <p>A center-aligned block's line boxes shift nearly the same as a
+    start-aligned block's. All the lines except for the very first snapped
+    line (line 1 in this example) shift exactly the same as a start-aligned
+    block. Then the block is centered, and the shortest distance from the
+    first snapped line's baseline to a grid line is measured.
+
+   <p> If the closest grid line is in the block-start direction, then the
+    entire block is shifted up from the block-end edge to snap the first line
+    to the grid when the block is centered again.
+   <figure style="float:left;"> <img alt="line positions at step 1"
+   src="images/first-center-part-snapped.png"> <figcaption> Partial snapping
+   </figcaption> </figure> <figure style="float:left;"> <img
+   alt="line positions after full snapping"
+   src="images/first-center-snapped.png"> <figcaption> Full line snapping
+   </figcaption> </figure>
+   <p style="clear:left;">If the closest grid line is in the block-end
+    direction, then the first snapped line is shifted downward to snap the
+    first line to the grid when the block is centered again.
+   <figure style="float:left;"> <img alt="line positions at step 1"
+   src="images/second-center-part-snapped.png"> <figcaption> Partial snapping
+   </figcaption> </figure> <figure style="float:left;"> <img
+   alt="line positions after full snapping"
+   src="images/second-center-snapped.png"> <figcaption> Full line snapping
+   </figcaption> </figure></div>
+
+  <div class=example>
+   <p>An end-aligned block shifts snapped lines upward from the block-end
+    direction. The shifting distance between any two adjacent snapped lines
+    will be the same as in the other alignment cases. The main difference is
+    that the shifting between snapped and not-snapped lines (or the block
+    edge) occurs below the snapped lines.
+   <figure style="float:left;"> <img alt="line positions before snapping"
+   src="images/bottom-no-snap.png"> <figcaption> Before snapping
+   </figcaption> </figure> <figure style="float:left;"> <img
+   alt="line positions after snapping" src="images/bottom-snapped.png">
+   <figcaption> After line snapping </figcaption> </figure></div>
+
   <h3 id=box-snap><span class=secno>3.2. </span> Snapping Block Boxes: the
    ‘<a href="#box-snap0"><code class=property>box-snap</code></a>’
    property</h3>

css-line-grid/Overview.src.html

@@ -336,7 +336,7 @@ <h3 id=line-snap>
 
   <p>This property applies to all the line boxes directly contained by
   the element, and, when not ''none'', causes each line box to shift
-  downward (possibly by zero) until it snaps to the line grid specified
+  (usually downward, possibly by zero) until it snaps to the line grid specified
   by 'line-grid'. (The unshifted position is the position that would be
   determined by normal line stacking rules, with consideration of any
   new controls defined by other modules such as [[CSS3LINE]].) Values
@@ -365,6 +365,92 @@ <h3 id=line-snap>
   shifted up within the line box so as to allow the line to snap without
   jumping downward to the next grid line.
 
+  <div class="example">
+    <p>When a block is start-aligned, 
+      its line boxes will always shift downward 
+      when snapping to a line grid. 
+      Here and in the next two examples  
+      there are two lines (A and B) with line-snap:none 
+      and two or three lines (1, 2 and 3) with line-snap:baseline. 
+      Here lines 1, 2 and 3 shift down 
+      to snap their baselines to the line grid.
+    </p>
+    <figure style="float:left;">
+      <img src="images/top-no-snap.png" 
+           alt="line positions before snapping"/>
+      <figcaption>
+        Before snapping
+      </figcaption>
+    </figure>
+    <figure style="float:left;">
+      <img src="images/top-snapped.png" 
+           alt="line positions after snapping"/>
+      <figcaption>
+        After line snapping
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="example">
+
+    <p>A center-aligned block's line boxes shift nearly the same as a start-aligned block's. All the lines except for the very first snapped line (line 1 in this example) shift exactly the same as a start-aligned block. Then the block is centered, and the shortest distance from the first snapped line's baseline to a grid line is measured. 
+    </p>
+    <p>
+        If the closest grid line is in the block-start direction, then the entire block is shifted up from the block-end edge to snap the first line to the grid when the block is centered again.
+    </p>
+    <figure style="float:left;">
+      <img src="images/first-center-part-snapped.png" 
+           alt="line positions at step 1"/>
+      <figcaption>
+        Partial snapping
+      </figcaption>
+    </figure>
+    <figure style="float:left;">
+      <img src="images/first-center-snapped.png" 
+           alt="line positions after full snapping"/>
+      <figcaption>
+        Full line snapping
+      </figcaption>
+    </figure>
+
+    <p style="clear:left;">If the closest grid line is in the block-end direction, then the first snapped line is shifted downward to snap the first line to the grid when the block is centered again.
+    </p>
+    <figure style="float:left;">
+      <img src="images/second-center-part-snapped.png" 
+           alt="line positions at step 1"/>
+      <figcaption>
+        Partial snapping
+      </figcaption>
+    </figure>
+    <figure style="float:left;">
+      <img src="images/second-center-snapped.png" 
+           alt="line positions after full snapping"/>
+      <figcaption>
+        Full line snapping
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="example">
+
+    <p>An end-aligned block shifts snapped lines upward from the block-end direction. The shifting distance between any two adjacent snapped lines will be the same as in the other alignment cases. The main difference is that the shifting between snapped and not-snapped lines (or the block edge) occurs below the snapped lines. 
+    </p>
+    <figure style="float:left;">
+      <img src="images/bottom-no-snap.png" 
+           alt="line positions before snapping"/>
+      <figcaption>
+        Before snapping
+      </figcaption>
+    </figure>
+    <figure style="float:left;">
+      <img src="images/bottom-snapped.png" 
+           alt="line positions after snapping"/>
+      <figcaption>
+        After line snapping
+      </figcaption>
+    </figure>
+  </div>
+
 <h3 id=box-snap>
 Snapping Block Boxes: the 'box-snap' property</h3>