[css-logical-1] Copy over some mapping info from css-writing-modes (details on which properties control the mapping, a few diagrams) to reduce confusion of ppl reading this spec without reading the referenced css-writing-modes sections first. w3c#691

Author: fantasai

css-logical-1/Overview.bs

@@ -2,7 +2,7 @@
 Title: CSS Logical Properties and Values Level 1
 Shortname: css-logical
 Level: 1
-Status: FPWD
+Status: ED
 Work Status: Revising
 Group: csswg
 ED: https://drafts.csswg.org/css-logical/
@@ -20,6 +20,18 @@ spec:css-writing-modes-3; type:dfn; text:start
 spec:css-writing-modes-3; type:dfn; text:end
 </pre>
 
+<style>
+  @media (min-width: 40em) {
+    #mapping-diagram figure {
+      width: 49%;
+      float: right;
+    }
+    #mapping-diagram figure:first-of-type {
+      margin-right: 2%;
+    }
+  }
+</style>
+
 
 <h2 id="intro">
 Introduction</h2>
@@ -63,7 +75,28 @@ Introduction</h2>
 
   <a href="http://www.w3.org/TR/css-writing-modes/">CSS Writing Modes</a>’ <a href="https://www.w3.org/TR/css-writing-modes-3/#abstract-box">Abstract Box Terminology</a> section
   defines how to map between flow-relative and physical terms.
-  This mapping controls the interpretation of flow-relative keywords and properties.
+  This mapping,
+  which depends on the <a>used values</a> of 'writing-mode' and 'direction',
+  controls the interpretation of flow-relative keywords and properties.
+
+  <div id="mapping-diagram">
+    <figure>
+      <img src="diagrams/sizing-ltr-tb.svg">
+      <figcaption>
+        Correspondence of physical and flow-relative terms in typical English text layout
+      </figcaption>
+    </figure>
+    <figure>
+      <img src="diagrams/sizing-ttb-rl.svg">
+      <figcaption>
+        Correspondence of physical and flow-relative terms in typical Chinese text layout
+      </figcaption>
+    </figure>
+  </div>
+
+  Note: Due to its interaction with ''text-orientation: upright'',
+  the <a lt="used value">used</a> 'direction'
+  depends on the <a>computed values</a> of 'writing-mode' and 'text-orientation'.
 
 <div class="issue">
   <strong>Things That Are Unstable</strong>