[css-line-grid] add normative text for line snap examples

Author: astearns

css-line-grid/Overview.html

@@ -76,7 +76,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Line Grid Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20141015>15 October 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20141016>16 October 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-line-grid-1/>http://www.w3.org/TR/css-line-grid-1/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/ rel=previous>http://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/</a><dt>Feedback:<dd><span><a href="mailto:www-style@w3.org?subject=[css-line-grid] feedback">www-style@w3.org</a> with subject line “<kbd>[css-line-grid] <var>… message topic …</var></kbd>” (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)</span><dt>Editors:<dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika Etemad</a> (<span class="p-org org">Invited Expert</span>)</div><dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:kojiishi@gluesoft.co.jp>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)</div><dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:stearns@adobe.com>Alan Stearns</a> (<span class="p-org org">Adobe Systems, Inc.</span>)</div></dl></div>
   <div data-fill-with=warning></div>
   <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
@@ -299,7 +299,7 @@ <h3 class="heading settled" data-level=1.3 id=values><span class=secno>1.3. </sp
 <h2 class="heading settled" data-level=2 id=line-grid><span class=secno>2. </span><span class=content>
 Defining a Line Grid: the <a class=property data-link-type=propdesc href=#propdef-line-grid title=line-grid>line-grid</a> property</span><a class=self-link href=#line-grid></a></h2>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-grid>line-grid<a class=self-link href=#propdef-line-grid></a></dfn><tr><th>Value:<td class=prod>match-parent <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> create<tr><th>Initial:<td>match-parent<tr><th>Applies to:<td>block, flex and grid containers<tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-grid>line-grid<a class=self-link href=#propdef-line-grid></a></dfn><tr><th>Value:<td class=prod>match-parent <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> create<tr><th>Initial:<td>match-parent<tr><th>Applies to:<td>block, flex and grid containers<tr><th>Inherited:<td>no<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
 
 <p>Specifies whether this box creates
 	a new baseline grid for its descendants 
@@ -365,7 +365,7 @@ <h2 class="heading settled" data-level=3 id=grid-snapping><span class=secno>3. <
 <h3 class="heading settled" data-level=3.1 id=line-snap><span class=secno>3.1. </span><span class=content>
 Snapping Line Boxes: the <a class=property data-link-type=propdesc href=#propdef-line-snap title=line-snap>line-snap</a> property</span><a class=self-link href=#line-snap></a></h3>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-snap>line-snap<a class=self-link href=#propdef-line-snap></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> contain<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-snap>line-snap<a class=self-link href=#propdef-line-snap></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> contain<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
 
 <p>This property applies to all the line boxes
 	directly contained by the element, 
@@ -404,6 +404,28 @@ <h3 class="heading settled" data-level=3.1 id=line-snap><span class=secno>3.1. <
 			<a href=http://dev.w3.org/csswg/css-inline/#text-under-edge>text-under-edge</a> baseline.
 	</dl>
 
+<p>An element can have additional block layout constraints
+	(such as centering or <a class=property data-link-type=propdesc href=#propdef-box-snap title=box-snap>box-snap</a>) 
+	that can complicate line snapping. 
+	In these cases, follow these steps:</p>
+
+	<ul>
+		<li>
+			Line snap as if the layout constraint does not apply
+		</li>
+		<li>
+			Apply the layout constraint to the block
+		</li>
+		<li>
+			Adjust exactly one line box shift 
+			or space at the beginning or end of the block 
+			such that all of the snapping lines meet the line grid 
+			while maintaining the block layout constraint. 
+			The single adjustment chosen must be 
+			the smallest shift needed to achieve the result.
+		</li>
+	</ul>
+
 <p>In some cases lines of equal line height
 	will not align perfectly to a baseline grid: 
 	this happens, for example, 
@@ -590,7 +612,7 @@ <h3 class="heading settled" data-level=3.2 id=box-snap><span class=secno>3.2. </
 	but snaps to before if it’s the first block in a fragment container, 
 	and snaps to after if it’s the last block in a fragment container.</p>
 
-<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-box-snap>box-snap<a class=self-link href=#propdef-box-snap></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-start <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-end <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> first-baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> last-baseline<tr><th>Initial:<td>none<tr><th>Applies to:<td>block-level boxes and internal table elements except table cells<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>no</table>
+<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-box-snap>box-snap<a class=self-link href=#propdef-box-snap></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-start <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-end <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> first-baseline <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> last-baseline<tr><th>Initial:<td>none<tr><th>Applies to:<td>block-level boxes and internal table elements except table cells<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
 
 <p>Specifies how the block is snapped to the baseline grid.</p>
 

css-line-grid/Overview.src.html

@@ -325,6 +325,28 @@ <h3 id='line-snap'>
 			<a href="http://dev.w3.org/csswg/css-inline/#text-under-edge">text-under-edge</a> baseline.
 	</dl>
 
+	An element can have additional block layout constraints 
+	(such as centering or 'box-snap') 
+	that can complicate line snapping. 
+	In these cases, follow these steps:
+
+	<ul>
+		<li>
+			Line snap as if the layout constraint does not apply
+		</li>
+		<li>
+			Apply the layout constraint to the block
+		</li>
+		<li>
+			Adjust exactly one line box shift 
+			or space at the beginning or end of the block 
+			such that all of the snapping lines meet the line grid 
+			while maintaining the block layout constraint. 
+			The single adjustment chosen must be 
+			the smallest shift needed to achieve the result.
+		</li>
+	</ul>
+
 	In some cases lines of equal line height 
 	will not align perfectly to a baseline grid: 
 	this happens, for example,