Add first cut of text-orientation property

Author: fantasai

css3-writing-modes/Overview.html

@@ -15,7 +15,7 @@
 
    <h1>CSS Writing Modes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 September
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 September
     2010</h2>
 
    <dl>
@@ -149,36 +149,43 @@ <h2 class="no-num no-toc" id=Contents>Contents</h2>
       class=secno>4.2. </span>Boxes with Orthogonal Writing Mode </a>
     </ul>
 
-   <li><a href="#text-combine"><span class=secno>5. </span>Glyph Composition:
+   <li><a href="#orienting-text"><span class=secno>5. </span>Orienting
+    Text</a>
+
+   <li><a href="#text-orientation-the-text-orientation-pr"><span
+    class=secno>6. </span>Text Orientation: the &lsquo;<code
+    class=property>text-orientation</code>&rsquo; property</a>
+
+   <li><a href="#text-combine"><span class=secno>7. </span>Glyph Composition:
     the &lsquo;<code class=property>text-combine</code>&rsquo; property</a>
 
-   <li><a href="#writing-mode-switching"><span class=secno>6.
+   <li><a href="#writing-mode-switching"><span class=secno>8.
     </span>Proposals for Dealing with Writing Mode Switching</a>
     <ul class=toc>
-     <li><a href="#logical-directional"><span class=secno>6.1. </span>Logical
+     <li><a href="#logical-directional"><span class=secno>8.1. </span>Logical
       directional properties and values</a>
       <ul class=toc>
-       <li><a href="#logical-terminology"><span class=secno>6.1.1.
+       <li><a href="#logical-terminology"><span class=secno>8.1.1.
         </span>Terminology</a>
 
-       <li><a href="#logical-prop"><span class=secno>6.1.2. </span>Logical
+       <li><a href="#logical-prop"><span class=secno>8.1.2. </span>Logical
         properties: &lsquo;<code class=property>margin-before</code>&rsquo;,
         &lsquo;<code class=property>logical-width</code>&rsquo;, etc.</a>
 
-       <li><a href="#logical-value"><span class=secno>6.1.3. </span>Logical
+       <li><a href="#logical-value"><span class=secno>8.1.3. </span>Logical
         property values: before, after, start, end</a>
       </ul>
 
-     <li><a href="#directional-modes"><span class=secno>6.2.
+     <li><a href="#directional-modes"><span class=secno>8.2.
       </span>Directional Mode Switch</a>
       <ul class=toc>
-       <li><a href="#directional-mode"><span class=secno>6.2.1.
+       <li><a href="#directional-mode"><span class=secno>8.2.1.
         </span>Specifying Directional Mode: the &lsquo;<code
         class=property>directional-mode</code>&rsquo; property</a>
       </ul>
     </ul>
 
-   <li><a href="#appendix-b-bidi-rules-for-html"><span class=secno>7.
+   <li><a href="#appendix-b-bidi-rules-for-html"><span class=secno>9.
     </span>Appendix B: Bidi Rules for HTML</a>
   </ul>
   <!--end-toc-->
@@ -190,6 +197,9 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
    (e.g., Hebrew or Arabic), bidirectional (e.g., mixing Latin with Arabic)
    and vertical (e.g., Asian scripts).
 
+  <p>Inherently bottom-to-top scripts are not handled in this version. See
+   [[UTN22]] for an explanation of relevant issues.
+
   <h2 id=text-flow><span class=secno>2. </span>Writing Modes and Terminology</h2>
 
   <p>A <dfn id=writing-mode0>writing mode</dfn> is defined in terms of its
@@ -244,6 +254,10 @@ <h2 id=text-flow><span class=secno>2. </span>Writing Modes and Terminology</h2>
    flow</dfn> (which is leftward or rightward block flow). To avoid
    confusion, this specification avoids the latter set of terms.</span>
 
+  <p>See Unicode Technical Note #22 [[UTN22]] (<a
+   href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML
+   version</a>) for a more in-depth introduction to vertical text.
+
   <h2 id=text-direction><span class=secno>3. </span>Inline Direction and
    Bidirectionality</h2>
 
@@ -832,7 +846,8 @@ <h3 id=box-model-in-vertical-writing-modes><span class=secno>4.1.
     column ordering) depend instead on the effective physical directionality
     (top-to-bottom or bottom-to-top) to choose between top and bottom. Note
     that the effective physical directionality can be affected by the
-    &lsquo;<code class=property>text-orientation</code>&rsquo; property.
+    &lsquo;<a href="#text-orientation"><code
+    class=property>text-orientation</code></a>&rsquo; property.
   </ul>
 
   <h3 id=boxes-with-orthogonal-writing-mode-><span class=secno>4.2.
@@ -879,7 +894,121 @@ <h3 id=boxes-with-orthogonal-writing-mode-><span class=secno>4.2.
     src=vertical-lr.png width=300></p>
   </div>
 
-  <h2 id=text-combine><span class=secno>5. </span>Glyph Composition: the
+  <h2 id=orienting-text><span class=secno>5. </span>Orienting Text</h2>
+
+  <h2 id=text-orientation-the-text-orientation-pr><span class=secno>6.
+   </span>Text Orientation: the &lsquo;<a href="#text-orientation"><code
+   class=property>text-orientation</code></a>&rsquo; property</h2>
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=text-orientation>text-orientation</dfn>
+
+    <tr>
+     <th>Value:
+
+     <td>right | upright
+
+    <tr>
+     <th>Initial:
+
+     <td>right
+
+    <tr>
+     <th>Applies to:
+
+     <td>all elements except table row groups, rows, column groups, and
+      columns
+
+    <tr>
+     <th>Inherited:
+
+     <td>yes
+
+    <tr>
+     <th>Percentages:
+
+     <td>N/A
+
+    <tr>
+     <th>Media:
+
+     <td>visual
+
+    <tr>
+     <th>Computed&#160;value:
+
+     <td>specified value
+  </table>
+
+  <p>This property specifies the orientation of characters in a non-native
+   &lsquo;<a href="#writing-mode1"><code
+   class=property>writing-mode</code></a>&rsquo;. Values have the following
+   meanings:
+
+  <dl>
+   <dt>right
+
+   <dd>
+    <p>In vertical writing modes, grapheme clusters from scripts that do not
+     have an intrinsic vertical orientation are rotated 90&deg; clockwise
+     from their standard orientation in horizontal text. When available,
+     vertical glyph variants and vertical font metrics are used to set text
+     that is not rotated.
+
+    <p>This value has no effect in horizontal writing modes.</p>
+    <span class=issue>Better name? Need smarter selection of vertical glyph
+    variants, e.g. glyphs should be rotated within non-vertical-script
+    excerpts.</span>
+
+   <dt>upright
+
+   <dd>
+    <p>In vertical writing modes, grapheme clusters that do not have an
+     intrinsic vertical orientation are rendered upright, i.e. in their
+     standard horizontal orientation. Shaping characters are shaped in their
+     isolated forms. When available, vertical glyph variants and vertical
+     font metrics are used to set the text. The UA should synthesize vertical
+     font metrics for grapheme clusters that do not have any.
+
+    <p>For the purposes of bidi reordering, this value causes all strong RTL
+     characters to be treated as LTR and AN digits to be treated as EN. If
+     set on inline elements whose &lsquo;<a href="#unicode-bidi0"><code
+     class=property>unicode-bidi</code></a>&rsquo; property is not
+     &lsquo;<code class=property>normal</code>&rsquo; or &lsquo;<code
+     class=property>bidi-override</code>&rsquo;, or on elements that are not
+     inline this value causes the used value of &lsquo;<a
+     href="#direction0"><code class=property>direction</code></a>&rsquo; to
+     be &lsquo;<code class=css>ltr</code>&rsquo;.
+  </dl>
+
+  <p><a href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> defines
+   &lsquo;<code class=property>glyph-orientation-vertical</code>&rsquo; and
+   &lsquo;<code class=property>glyph-orientation-horizontal</code>&rsquo;
+   properties that were intended to control text orientation. These
+   properties are <em>deprecated</em> and do not apply to non-SVG elements.
+   Implementations that wish to support these properties in conjunction with
+   &lsquo;<a href="#text-orientation"><code
+   class=property>text-orientation</code></a>&rsquo; must introduce an
+   &lsquo;<code class=css>auto</code>&rsquo; value for &lsquo;<a
+   href="#text-orientation"><code
+   class=property>text-orientation</code></a>&rsquo;, which is set by the UA
+   default style sheet on all <a
+   href="http://www.w3.org/TR/SVG/intro.html#TermTextContentElement">SVG text
+   content elements</a> and which indicates that the SVG &lsquo;<code
+   class=property>glyph-orientation-vertical</code>&rsquo; and &lsquo;<code
+   class=property>glyph-orientation-horizontal</code>&rsquo; behavior
+   controls the layout of text. In all other contexts the &lsquo;<code
+   class=css>auto</code>&rsquo; behavior is the same as for &lsquo;<code
+   class=css>right</code>&rsquo;.
+
+  <p class=issue>Add appendex that describes interaction with OpenType
+   features?
+
+  <h2 id=text-combine><span class=secno>7. </span>Glyph Composition: the
    &lsquo;<a href="#text-combine0"><code
    class=property>text-combine</code></a>&rsquo; property</h2>
 
@@ -962,8 +1091,9 @@ <h2 id=text-combine><span class=secno>5. </span>Glyph Composition: the
     <p>If the length of the element's contents exceeds the element's used
      line-height, then its contents are instead rendered as if &lsquo;<a
      href="#text-combine0"><code class=css>text-combine</code></a>&rsquo;
-     were &lsquo;<code class=css>none</code>&rsquo; and &lsquo;<code
-     class=css>text-orientation</code>&rsquo; were &lsquo;<code
+     were &lsquo;<code class=css>none</code>&rsquo; and &lsquo;<a
+     href="#text-orientation"><code
+     class=css>text-orientation</code></a>&rsquo; were &lsquo;<code
      class=css>upright</code>&rsquo;. This fallback behavior is also
      triggered if the element contains anything other than text.
 
@@ -988,19 +1118,19 @@ <h2 id=text-combine><span class=secno>5. </span>Glyph Composition: the
    <p>In Japanese, this effect is known as <i lang=ja>tate-chu-yoko</i>.
   </div>
 
-  <h2 id=writing-mode-switching><span class=secno>6. </span>Proposals for
+  <h2 id=writing-mode-switching><span class=secno>8. </span>Proposals for
    Dealing with Writing Mode Switching</h2>
 
   <p class=issue>NOTE: These are only proposals for dealing with writing mode
    switching. The CSS Working Group has not endorsed any of them yet, and
    that they are very likely to be removed at any time.
 
-  <h3 id=logical-directional><span class=secno>6.1. </span>Logical
+  <h3 id=logical-directional><span class=secno>8.1. </span>Logical
    directional properties and values</h3>
 
   <p class=issue>NOTE: This is only a proposal under discussion.
 
-  <h4 id=logical-terminology><span class=secno>6.1.1. </span>Terminology</h4>
+  <h4 id=logical-terminology><span class=secno>8.1.1. </span>Terminology</h4>
 
   <p>In this section we use the following terminology about directional
    properties:
@@ -1103,7 +1233,7 @@ <h4 id=logical-terminology><span class=secno>6.1.1. </span>Terminology</h4>
     </pre>
   </div>
 
-  <h4 id=logical-prop><span class=secno>6.1.2. </span>Logical properties:
+  <h4 id=logical-prop><span class=secno>8.1.2. </span>Logical properties:
    &lsquo;<a href="#margin-before"><code
    class=property>margin-before</code></a>&rsquo;, &lsquo;<a
    href="#logical-width"><code
@@ -1678,7 +1808,7 @@ <h4 id=logical-prop><span class=secno>6.1.2. </span>Logical properties:
   <p>The writing-mode value of the element is used for the mapping of
    corresponding properties and therefore must be evaluated first.
 
-  <h4 id=logical-value><span class=secno>6.1.3. </span>Logical property
+  <h4 id=logical-value><span class=secno>8.1.3. </span>Logical property
    values: before, after, start, end</h4>
 
   <p>Properties that accept physical directional values (top, bottom, left,
@@ -1701,7 +1831,7 @@ <h4 id=logical-value><span class=secno>6.1.3. </span>Logical property
    <li>&lsquo;<code class=property>caption-side</code>&rsquo;
   </ul>
 
-  <h3 id=directional-modes><span class=secno>6.2. </span>Directional Mode
+  <h3 id=directional-modes><span class=secno>8.2. </span>Directional Mode
    Switch</h3>
 
   <p class=issue>NOTE: This is only a proposal under discussion.
@@ -1748,7 +1878,7 @@ <h3 id=directional-modes><span class=secno>6.2. </span>Directional Mode
    href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;
    and get fallback to horizontal writing mode, the common styles are kept.
 
-  <h4 id=directional-mode><span class=secno>6.2.1. </span>Specifying
+  <h4 id=directional-mode><span class=secno>8.2.1. </span>Specifying
    Directional Mode: the &lsquo;<a href="#directional-mode1"><code
    class=property>directional-mode</code></a>&rsquo; property</h4>
 
@@ -1991,7 +2121,7 @@ <h4 id=directional-mode><span class=secno>6.2.1. </span>Specifying
 </pre>
   </div>
 
-  <h2 id=appendix-b-bidi-rules-for-html><span class=secno>7. </span>Appendix
+  <h2 id=appendix-b-bidi-rules-for-html><span class=secno>9. </span>Appendix
    B: Bidi Rules for HTML</h2>
 
   <p>The style sheet rules that would achieve the bidi behaviors specified in