More diagrams for line orientation

Author: fantasai

css3-writing-modes/Overview.html

@@ -13,6 +13,8 @@
     .portrait { width: 10em; }
     .sidebar .figure { margin: 1em; }
     .sidebar object { margin: 0 auto; display: block; }
+    .figurepair { display: table; margin: 1em auto; }
+    .figurepair .figure { display: table-cell; }
      h2 { clear: both; }
   </style>
   <link href="http://www.w3.org/StyleSheets/tr/W3C-ED.css" rel=stylesheet
@@ -25,7 +27,7 @@
 
    <h1>CSS Writing Modes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 October
     2010</h2>
 
    <dl>
@@ -982,7 +984,9 @@ <h3 id=boxes-with-orthogonal-writing-mode><span class=secno>4.2.
     </div>
 
     <h2 id=line-orientation><span class=secno>5. </span>Line Orientation</h2>
-
+    <!-- <p>The block flow direction given by &lsquo;<code class=property>writing-mode</code>&rsquo; determines only the
+    ordering and placement of the line boxes -->
+    
     <h3 id=line-directions><span class=secno>5.1. </span>Line-based
      Directions</h3>
 
@@ -993,7 +997,7 @@ <h3 id=line-directions><span class=secno>5.1. </span>Line-based
      which side is its "top", or <a href="#over0"><em>over</em></a> edge, is
      determined by the &lsquo;<a href="#text-orientation0"><code
      class=property>text-orientation</code></a>&rsquo; property on its
-     containing block.
+     containing block, and is independent of the block flow direction.
 
     <p>In addition to its <dfn id=over0>over</dfn> (ascender side) and <dfn
      id=under0>under</dfn> (descender side) edges, a line box, even a
@@ -1004,7 +1008,7 @@ <h3 id=line-directions><span class=secno>5.1. </span>Line-based
 
     <div class=figure> <object class=landscape
      data="diagrams/line-orient-up.svg" type="image/svg+xml"></object>
-     <p class=caption>Line orientation compass.</p>
+     <p class=caption>Line orientation compass</p>
     </div>
 
     <p>The <dfn id=start>start</dfn> edge of a box is nominally the edge from
@@ -1035,6 +1039,19 @@ <h3 id=line-directions><span class=secno>5.1. </span>Line-based
      properties, but also its &lsquo;<a href="#text-orientation0"><code
      class=property>text-orientation</code></a>&rsquo; property.</p>
 
+    <div class=figurepair>
+     <div class=figure> <object class=portrait
+      data="diagrams/line-orient-right.svg" type="image/svg+xml"></object>
+      <p class=caption>Typical orientation in vertical</p>
+     </div>
+
+     <div class=figure> <object class=portrait
+      data="diagrams/line-orient-left.svg" type="image/svg+xml"></object>
+      <p class=caption>Line orientation with &lsquo;<code
+       class=css>text-orientation: rotate-left</code>&rsquo;</p>
+     </div>
+    </div>
+
     <p class=note>Note also that while the <a href="#over0"><i>over</i></a>
      and <a href="#under0"><i>under</i></a> directions often map to the same
      directions as <a href="#before">before</a> and <a

css3-writing-modes/Overview.src.html

@@ -11,6 +11,8 @@
     .portrait { width: 10em; }
     .sidebar .figure { margin: 1em; }
     .sidebar object { margin: 0 auto; display: block; }
+    .figurepair { display: table; margin: 1em auto; }
+    .figurepair .figure { display: table-cell; }
      h2 { clear: both; }
   </style>
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/tr/W3C-ED.css">
@@ -696,12 +698,16 @@ <h3>Boxes with Orthogonal Writing Mode</h3>
 
 <h2 id="line-orientation">Line Orientation</h2>
 
+  <!-- <p>The block flow direction given by 'writing-mode' determines only the
+    ordering and placement of the line boxes -->
+
   <h3 id="line-directions">Line-based Directions</h3>
 
   <p>Every line box has an orientation. Whether its orientation is horizontal
     or vertical is determined by the 'writing-mode' property. Given that,
     which side is its "top", or <em>over</em> edge, is determined by the
-    'text-orientation' property on its containing block.
+    'text-orientation' property on its containing block, and is independent
+    of the block flow direction.
 
   <p>In addition to its <dfn>over</dfn> (ascender side) and <dfn>under</dfn>
     (descender side) edges, a line box, even a vertically-oriented one, also
@@ -712,7 +718,7 @@ <h3 id="line-directions">Line-based Directions</h3>
     <div class="figure">
       <object data="diagrams/line-orient-up.svg" type="image/svg+xml"
         class="landscape"></object>
-      <p class="caption">Line orientation compass.</p>
+      <p class="caption">Line orientation compass</p>
     </div>
 
   <p>The <dfn>start</dfn> edge of a box is nominally the edge from which
@@ -730,6 +736,20 @@ <h3 id="line-directions">Line-based Directions</h3>
     edges of a box depends not only on its 'writing-mode' and 'direction'
     properties, but also its 'text-orientation' property.</p>
 
+  <div class="figurepair">
+    <div class="figure">
+      <object data="diagrams/line-orient-right.svg" type="image/svg+xml"
+        class="portrait"></object>
+      <p class="caption">Typical orientation in vertical</p>
+    </div>
+
+    <div class="figure">
+      <object data="diagrams/line-orient-left.svg" type="image/svg+xml"
+        class="portrait"></object>
+      <p class="caption">Line orientation with ''text-orientation: rotate-left''</p>
+    </div>
+  </div>
+
   <p class="note">Note also that while the <i>over</i> and <i>under</i>
     directions often map to the same directions as <a href="#before">before</a>
     and <a href="#after">after</a> respectively, this mapping is reversed