Add jdaggett's vertical text intro and clarification to direction mapping in 4.1

Author: fantasai

css3-writing-modes/Overview.html

@@ -16,6 +16,7 @@
     .figurepair { display: table; margin: 1em auto; }
     .figurepair .figure { display: table-cell; }
      h2, .example { clear: both; }
+    img, object { max-width: 100%; }
   </style>
   <link href="http://www.w3.org/StyleSheets/tr/W3C-ED.css" rel=stylesheet
   type="text/css">
@@ -27,7 +28,7 @@
 
    <h1>CSS Writing Modes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 November
     2010</h2>
 
    <dl>
@@ -132,6 +133,10 @@ <h2 class="no-num no-toc" id=Contents>Contents</h2>
 
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
+    <ul class=toc>
+     <li><a href="#vertical-intro"><span class=secno>1.1. </span>Introduction
+      to Vertical Text</a>
+    </ul>
 
    <li><a href="#text-flow"><span class=secno>2. </span>Writing Modes and
     Terminology</a>
@@ -228,6 +233,77 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
    href="#UTN22" rel=biblioentry>[UTN22]<!--{{UTN22}}--></a> for an
    explanation of relevant issues.
 
+  <h3 id=vertical-intro><span class=secno>1.1. </span>Introduction to
+   Vertical Text</h3>
+
+  <p>In addition to extensions to CSS2.1's support for bidirectional text,
+   this module introduces the rules and properties needed to support vertical
+   text layout in CSS.
+
+  <p>Unlike languages that use the Latin script which are primarily laid out
+   horizontally, Asian languages such as Chinese and Japanese can be laid
+   vertically. The Japanese example below shows the same text laid out
+   horizontally and vertically. In the horizontal case, text is read from
+   left to right, top to bottom. For the vertical case, the text is read top
+   to bottom, with the lines ordered either right to left (for Chinese and
+   Japanese) or left to right (for Mongolian and Manchu). Indentation from
+   the left edge in the left-to-right horizontal case translates to
+   indentation from the top edge in the top-to-bottom vertical case.
+
+  <p>The change from horizontal to vertical writing can affect not just the
+   layout, but also the typesetting. For example, the position of punctuation
+   mark within its spacing box box also changes from the horizontal to the
+   vertical case:
+
+  <div class=figure>
+   <p><img alt="A comparison of horizontal and vertical Japanese shows that
+    although the lines rotate, the characters remain upright. The period mark
+    shifts from the bottom left of its glyph box to the top right. The
+    running headers, however, remain laid out horizontally across the top of
+    the page." src=vert-horiz-comparison.png></p>
+
+   <p class=caption>iBunko application (iOS)</p>
+  </div>
+
+  <p>Vertical text that includes Latin script text or text from other scripts
+   normally displayed horizontally can display that text in a number of ways.
+   In the example below, the word "Virus" is shown rotated inline while the
+   acronyms "DNA" and "RNA" are stacked upright:
+
+  <div class=figure>
+   <p><img alt="This screenshot of an electronic dictionary illustrates the
+    DNA/RNA/virus example." src=vert-latin-layouts.png></p>
+
+   <p class=caption>Daijirin Viewer 1.4 (iOS)</p>
+  </div>
+
+  <p>In some special cases such as two-digit numbers in dates, text is fit
+   compactly into a single vertical character box:
+
+  <div class=figure>
+   <p><img alt="An exerpt from MacFan shows several possible vertical layouts
+    for numbers: the two-digit month and day are written as
+    horizontal-in-vertical blocks; the years are written with each character
+    upright; except in the English phrase &ldquo;for Mac 2011&rdquo;, where
+    the date is rotated to match the rotated Latin."
+    src=vert-number-layouts.png></p>
+
+   <p class=caption>MacFan, December 2010, p.49</p>
+  </div>
+
+  <p>Layouts often involve a mixture of vertical and horizontal elements:
+
+  <div class=figure>
+   <p><img alt="Magazines often mix horizontal and vertical layout; for
+    example, using one orientation for the main article text and a different
+    one for sidebar or illustrative content." src=vert-horiz-combination.png></p>
+
+   <p class=caption>AERA, 7 June 2010, p.26</p>
+  </div>
+
+  <p>Vertical text layouts also need to handle bidirectional text layout;
+   clockwise-rotated Arabic, for example, is laid out bottom-to-top.
+
   <h2 id=text-flow><span class=secno>2. </span>Writing Modes and Terminology</h2>
 
   <p>A <dfn id=writing-mode0>writing mode</dfn> in CSS is determined by the
@@ -974,21 +1050,32 @@ <h3 id=vertical-layout><span class=secno>4.1. </span>Box Layout in Vertical
    to the horizontal dimension in vertical writing modes. Thus:
 
   <ul>
-   <li>Layout rules that refer to the width use the height instead, and vice
-    versa.
-
-   <li>Layout rules that refer to the &lsquo;<code
-    class=css>*-left</code>&rsquo; and &lsquo;<code
-    class=css>*-right</code>&rsquo; box properties (border, margin, padding)
-    use &lsquo;<code class=css>*-top</code>&rsquo; and &lsquo;<code
-    class=css>*-bottom</code>&rsquo; instead, and vice versa.
-
-   <li>Layout rules that depend on the &lsquo;<a href="#direction0"><code
-    class=property>direction</code></a>&rsquo; property to choose between
-    left and right (e.g. overflow, overconstraint resolution, the initial
-    value for &lsquo;<code class=property>text-align</code>&rsquo;, table
-    column ordering) are abstracted to the <a href="#start">start</a> and <a
-    href="#end">end</a> sides and applied appropriately.
+   <li>
+    <p>Layout rules that refer to the width use the height instead, and vice
+     versa.
+
+   <li>
+    <p>Layout rules that refer to the &lsquo;<code
+     class=css>*-left</code>&rsquo; and &lsquo;<code
+     class=css>*-right</code>&rsquo; box properties (border, margin, padding)
+     use &lsquo;<code class=css>*-top</code>&rsquo; and &lsquo;<code
+     class=css>*-bottom</code>&rsquo; instead, and vice versa.
+
+    <p class=note>Which side of the box the property applies to doesn't
+     change: only which values are inputs to which layout calculations
+     changes. The &lsquo;<code class=property>margin-left</code>&rsquo;
+     property still affects the lefthand margin, for example; however in a
+     &lsquo;<code class=css>vertical-rl</code>&rsquo; writing mode it takes
+     part in margin collapsing in place of &lsquo;<code
+     class=property>margin-bottom</code>&rsquo;.</p>
+
+   <li>
+    <p>Layout rules that depend on the &lsquo;<a href="#direction0"><code
+     class=property>direction</code></a>&rsquo; property to choose between
+     left and right (e.g. overflow, overconstraint resolution, the initial
+     value for &lsquo;<code class=property>text-align</code>&rsquo;, table
+     column ordering) are abstracted to the <a href="#start">start</a> and <a
+     href="#end">end</a> sides and applied appropriately.
   </ul>
 
   <p>For features such as text alignment, floating, and list marker
@@ -1968,7 +2055,7 @@ <h2 id=text-combine><span class=secno>7. </span>Glyph Composition: the
 
   <h2 class=no-num id=acknowledgements>Acknowledgements</h2>
 
-  <p>Martin Heijdra, Paul Nelson, Michel Suignard, Steve Zilles
+  <p>John Daggett, Martin Heijdra, Paul Nelson, Michel Suignard, Steve Zilles
 
   <h2 class=no-num id=bidi-html>Appendix B: Bidi Rules for HTML</h2>
 

css3-writing-modes/Overview.src.html

@@ -14,6 +14,7 @@
     .figurepair { display: table; margin: 1em auto; }
     .figurepair .figure { display: table-cell; }
      h2, .example { clear: both; }
+    img, object { max-width: 100%; }
   </style>
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/tr/W3C-ED.css">
 </head>
@@ -75,6 +76,77 @@ <h2 id="intro">Introduction</h2>
   <p>Inherently bottom-to-top scripts are not handled in this version. See
     [[UTN22]] for an explanation of relevant issues.</p>
 
+<h3 id="vertical-intro">Introduction to Vertical Text</h3>
+
+  <p>In addition to extensions to CSS2.1's support for bidirectional text,
+    this module introduces the rules and properties needed to support vertical
+    text layout in CSS.
+
+  <p>Unlike languages that use the Latin script which are primarily laid out
+    horizontally, Asian languages such as Chinese and Japanese can be laid
+    vertically.  The Japanese example below shows the same text laid out
+    horizontally and vertically. In the horizontal case, text is read
+    from left to right, top to bottom. For the vertical case, the text is
+    read top to bottom, with the lines ordered either right to left (for
+    Chinese and Japanese) or left to right (for Mongolian and Manchu).
+    Indentation from the left edge in the left-to-right horizontal case
+    translates to indentation from the top edge in the top-to-bottom vertical
+    case.
+
+  <p>The change from horizontal to vertical writing can affect not just the
+    layout, but also the typesetting. For example, the position of punctuation
+    mark within its spacing box box also changes from the horizontal to the
+    vertical case:
+
+  <div class="figure">
+    <p><img src="vert-horiz-comparison.png"
+            alt="A comparison of horizontal and vertical Japanese shows that
+                 although the lines rotate, the characters remain upright.
+                 The period mark shifts from the bottom left of its glyph
+                 box to the top right. The running headers, however, remain
+                 laid out horizontally across the top of the page."/></p>
+    <p class="caption">iBunko application (iOS)</p>
+  </div>
+
+  <p>Vertical text that includes Latin script text or text from other scripts
+    normally displayed horizontally can display that text in a number of
+    ways. In the example below, the word "Virus" is shown rotated inline
+    while the acronyms "DNA" and "RNA" are stacked upright:
+
+  <div class="figure">
+    <p><img src="vert-latin-layouts.png"
+            alt="This screenshot of an electronic dictionary illustrates
+                 the DNA/RNA/virus example."/></p>
+    <p class="caption">Daijirin Viewer 1.4 (iOS)</p>
+  </div>
+
+  <p>In some special cases such as two-digit numbers in dates, text is fit
+    compactly into a single vertical character box:
+
+  <div class="figure">
+    <p><img src="vert-number-layouts.png"
+            alt="An exerpt from MacFan shows several possible vertical layouts
+                 for numbers: the two-digit month and day are written as
+                 horizontal-in-vertical blocks; the years are written with
+                 each character upright; except in the English phrase
+                 &ldquo;for Mac 2011&rdquo;, where the date is rotated to
+                 match the rotated Latin."/></p>
+    <p class="caption">MacFan, December 2010, p.49</p>
+  </div>
+
+  <p>Layouts often involve a mixture of vertical and horizontal elements:
+
+  <div class="figure">
+    <p><img src="vert-horiz-combination.png"
+            alt="Magazines often mix horizontal and vertical layout; for
+                 example, using one orientation for the main article text
+                 and a different one for sidebar or illustrative content."/></p>
+    <p class="caption">AERA, 7 June 2010, p.26</p>
+  </div>
+
+  <p>Vertical text layouts also need to handle bidirectional text layout;
+    clockwise-rotated Arabic, for example, is laid out bottom-to-top.
+
 <h2 id="text-flow">Writing Modes and Terminology</h2>
 
   <p>A <dfn>writing mode</dfn> in CSS is determined by the 'writing-mode',
@@ -680,12 +752,18 @@ <h3 id="vertical-layout">Box Layout in Vertical Writing Modes</h3>
      instead apply to the horizontal dimension in vertical writing modes.
      Thus:
   <ul>
-    <li>Layout rules that refer to the width use the height instead,
+    <li><p>Layout rules that refer to the width use the height instead,
         and vice versa.
-    <li>Layout rules that refer to the '*-left' and '*-right' box
+    <li><p>Layout rules that refer to the '*-left' and '*-right' box
         properties (border, margin, padding) use '*-top' and '*-bottom'
         instead, and vice versa.
-    <li>Layout rules that depend on the 'direction' property to choose between
+        <p class="note">Which side of the
+        box the property applies to doesn't change: only which values
+        are inputs to which layout calculations changes. The 'margin-left'
+        property still affects the lefthand margin, for example; however
+        in a ''vertical-rl'' writing mode it takes part in margin collapsing
+        in place of 'margin-bottom'.</p>
+    <li><p>Layout rules that depend on the 'direction' property to choose between
         left and right (e.g. overflow, overconstraint resolution, the initial
         value for 'text-align', table column ordering)
         are abstracted to the <a href="#start">start</a> and
@@ -1450,7 +1528,7 @@ <h2 id="text-combine">Glyph Composition: the 'text-combine' property</h2>
 
 <h2 class="no-num" id="acknowledgements">Acknowledgements</h2>
 
-<p>Martin Heijdra, Paul Nelson, Michel Suignard, Steve Zilles</p>
+<p>John Daggett, Martin Heijdra, Paul Nelson, Michel Suignard, Steve Zilles</p>
 
 <h2 id="bidi-html" class=no-num>Appendix B: Bidi Rules for HTML</h2>