First cut intrinsic text orientation

Author: fantasai

css3-writing-modes/Overview.html

@@ -16,7 +16,7 @@
     .figurepair { display: table; margin: 1em auto; }
     .figurepair .figure { display: table-cell; }
      h2, .example { clear: both; }
-    img, object { max-width: 100%; }
+    img, object { max-width: 100%; display: block; margin: 1em auto; }
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
@@ -28,15 +28,15 @@
 
    <h1>CSS Writing Modes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 March 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 March 2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
      <!--
-    <dd><a href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110302">http://www.w3.org/TR/2011/ED-css3-writing-modes-20110302</a>
+    <dd><a href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110307">http://www.w3.org/TR/2011/ED-css3-writing-modes-20110307</a>
 -->
 
 
@@ -192,7 +192,7 @@ <h2 class="no-num no-toc" id=Contents>Table of Contents</h2>
    <li><a href="#intro-text-layout"><span class=secno>5. </span> Introduction
     to Intrinsic Text Layout</a>
     <ul class=toc>
-     <li><a href="#text-orientation"><span class=secno>5.1. </span>Orienting
+     <li><a href="#text-orientation"><span class=secno>5.1. </span> Orienting
       Text: the &lsquo;<code class=property>text-orientation</code>&rsquo;
       property</a>
     </ul>
@@ -259,7 +259,11 @@ <h2 class="no-num no-toc" id=Contents>Table of Contents</h2>
 
    <li class=no-num><a href="#bidi-html">Appendix B: Bidi Rules for HTML</a>
 
-   <li class=no-num><a href="#references">References</a>
+   <li class=no-num><a href="#appendix-a-script-orientations">Appendix A:
+    Script Orientations</a>
+
+   <li class=no-num><a href="#appendix-b-references">Appendix B:
+    References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
@@ -359,7 +363,7 @@ <h2 id=text-flow><span class=secno>1. </span>Introduction to Writing Modes</h2>
    version</a>) for a more in-depth introduction to writing modes and
    vertical text.
 
-  <p class=issue>Point at Intro to Text Orientaiton section once it's
+  <p class=issue>Point at Intro to Text Orientation section once it's
    written.
 
   <h2 id=text-direction><span class=secno>2. </span>Inline Direction and
@@ -807,7 +811,7 @@ <h2 id=vertical-intro><span class=secno>3. </span> Introduction to Vertical
    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
+   horizontally, Asian languages such as Chinese and Japanese can be laid out
    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
@@ -1274,9 +1278,86 @@ <h3 id=baseline-alignment><span class=secno>4.4. </span> Baseline Alignment</h3>
   <h2 id=intro-text-layout><span class=secno>5. </span> Introduction to
    Intrinsic Text Layout</h2>
 
-  <p>[Describe here any necessary concepts from UTN22]
+  <p>Each writing system has one or more native orientations. Modern scripts
+   can therefore be classified into three orientational categories:
+
+  <dl>
+   <dt>horizontal-only
+
+   <dd>Scripts that have horizontal, but not vertical, native orientation.
+    Includes: Latin, Arabic, Hebrew, Devanagari
+
+   <dt>vertical-only
+
+   <dd>Scripts that have vertical, but not horizontal, native orientation.
+    Includes: Mongolian, Manchu
+
+   <dt>bi-orientational
+
+   <dd>Scripts that have both vertical and horizontal native orientation.
+    Includes: Han, Hangul, Japanese Kana
+  </dl>
+
+  <p>In modern typographic systems, all glyphs are assigned a horizontal
+   orientation, which is used when laying out text horizontally. To lay out
+   vertical text, the UA needs to transform the text from its horizontal
+   orientation. This transformation is the <dfn
+   id=bi-orientational-transform>bi-orientational transform</dfn>, and there
+   are two types:
+
+  <dl>
+   <dt>rotate
+
+   <dd>Rotate the glyph from horizontal to vertical <object class=figure
+    data="diagrams/glyph-right.svg" height=80 type="image/svg+xml"
+    width=110></object>
+
+   <dt>translate
+
+   <dd>Translate the glyph from horizontal to vertical <object class=figure
+    data="diagrams/glyph-upright.svg" height=110 type="image/svg+xml"
+    width=80></object>
+  </dl>
+
+  <p>Scripts with a native vertical orientation have an intrinsic
+   bi-orientational transform, which orients them correctly in vertical text:
+   CJK (Chinese/Japanese/Korean) characters translate, that is, they are
+   always upright. Other scripts, such as Mongolian, rotate. (See <a
+   href=script-orientations>Appendix A</a> for a list of intrinsic
+   bi-orientational transforms.)
+
+  <p>Scripts without a native vertical orientation can be either rotated or
+   translated: the transform used is a stylistic preference depending on the
+   text's usage, rather than a matter of correctness. The &lsquo;<a
+   href="#text-orientation0"><code
+   class=property>text-orientation</code></a>&rsquo; property's &lsquo;<a
+   href="#vertical-right"><code class=css>vertical-right</code></a>&rsquo;
+   and &lsquo;<a href="#upright"><code class=css>upright</code></a>&rsquo;
+   values are provided to specify rotation vs. translation of horizontal-only
+   text.
 
-  <h3 id=text-orientation><span class=secno>5.1. </span>Orienting Text: the
+  <p class=note>The &lsquo;<a href="#rotate-left"><code
+   class=css>rotate-left</code></a>&rsquo;, &lsquo;<a
+   href="#rotate-right"><code class=css>rotate-right</code></a>&rsquo;, and
+   &lsquo;<a href="#rotate-normal"><code
+   class=css>rotate-normal</code></a>&rsquo; values of &lsquo;<a
+   href="#text-orientation0"><code
+   class=property>text-orientation</code></a>&rsquo; are provided for
+   decorative layout effects and to work around limitations in CSS support
+   for bottom-to-top scripts.
+
+  <p class=issue>Ideally, punctuation should be either rotated or set
+   vertically depending on whether the primary script is horizontal-only or
+   vertical. However, this information (which, like the base directionality,
+   is a property of the content) is not available to us. (UTN 22 used the
+   concept of a vertical directionality, given via &lsquo;<a
+   href="#direction0"><code class=property>direction</code></a>&rsquo; or the
+   HTML <code>dir</code> attribute to handle this issue.) The current spec
+   works around this by using the East Asian Width property; but this
+   approach only works if vertical scripts do not share punctuation with
+   horizontal-only scripts.
+
+  <h3 id=text-orientation><span class=secno>5.1. </span> Orienting Text: the
    &lsquo;<a href="#text-orientation0"><code
    class=property>text-orientation</code></a>&rsquo; property</h3>
 
@@ -1333,27 +1414,26 @@ <h3 id=text-orientation><span class=secno>5.1. </span>Orienting Text: the
    <dt><dfn id=vertical-right>vertical-right</dfn>
 
    <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. Characters from
-     scripts that do have an intrinsic vertical orientation are set in that
-     orientation. When available, vertical glyph variants and vertical font
-     metrics are used to set all punctuation and characters from any script
-     that is not rotated. In vertical writing modes, this value puts the
-     element in a <i>vertical typographic mode</i> and is typical for layout
-     of primarily vertical-script text.
+    <p>In vertical writing modes, grapheme clusters from horizontal-only
+     scripts are rotated 90&deg; clockwise from their standard orientation in
+     horizontal text. Characters from vertical scripts are set with their
+     intrinsic orientation.
+
+    <p>In vertical writing modes, this value puts the element in a
+     <i>vertical typographic mode</i> and is typical for layout of primarily
+     vertical-script text.
 
    <dt><dfn id=upright>upright</dfn>
 
    <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 from such scripts
-     are shaped in their isolated forms. Characters from scripts that do have
-     an intrinsic vertical orientation are set in that orientation. 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>In vertical writing modes, grapheme clusters from horizonal-only
+     scripts are rendered upright, i.e. in their standard horizontal
+     orientation. Shaping characters from such scripts are shaped in their
+     isolated forms. Characters from vertical scripts are set with their
+     intrinsic orientation and shaped normally. When available, vertical
+     glyph variants and vertical font metrics are used to set the text. The
+     UA must synthesize vertical font metrics for grapheme clusters that do
+     not have any.
 
     <p>For the purposes of bidi reordering, this value causes all characters
      to be treated as strong LTR. This value causes the used value of
@@ -1443,11 +1523,35 @@ <h3 id=text-orientation><span class=secno>5.1. </span>Orienting Text: the
     and rotate-right</p>
   </div>
 
-  <p class=issue>Baseline alignment is not yet defined.
-
-  <p class=issue>Add section explaining native script orientations. Note that
-   all wide characters are treated the same as ideographic. Link to
-   definition of grapheme clusters in <a href="#UAX29"
+  <p>In vertical typographic modes, any grapheme clusters belonging to a
+   vertical script <em>must</em> be set using its intrinsic orientation. (See
+   <a href="#script-orientations">Appendix B</a>.) An exception is made for
+   halfwidth forms belonging to the hiragana, katakana, and hangul scripts,
+   which may be set rotated. <span class=issue>What is the appropriate
+   behavior here? Or is there none?</span> Grapheme clusters belonging to
+   other scripts must be rotated (for &lsquo;<a href="#vertical-right"><code
+   class=css>vertical-right</code></a>&rsquo;) or set upright (for &lsquo;<a
+   href="#upright"><code class=css>upright</code></a>&rsquo;). An exception
+   is made for characters with a fullwidth (F) or wide (W) East Asian Width
+   property, which should be set upright (using vertical font settings). <a
+   href="#UAX11" rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>
+
+  <p>The orientation of characters belonging to the Common and Inherited
+   script categories is UA-dependent for vertical typographic modes. If the
+   font and font system support mixed-orientation typesetting (e.g. the
+   <code>vrt2</code> feature in OpenType), the UA should rely on that feature
+   to set &lsquo;<a href="#vertical-right"><code
+   class=css>vertical-right</code></a>&rsquo; text. Similarly if the font and
+   font system support upright typesetting (e.g. the <code>vert</code>
+   feature in OpenType) then the UA should rely on that feature to set
+   &lsquo;<a href="#upright"><code class=css>upright</code></a>&rsquo; text.
+   If the UA needs to synthesize such features (e.g. if an OpenType font has
+   only the <code>vert</code> but not the <code>vrt2</code> feature), then it
+   should set all Common and Inherited characters with an East Asian Width of
+   F or W vertically (i.e. upright, using vertical font settings if
+   available), and rotate the rest (using horizontal font settings).
+
+  <p class=issue> Link to definition of grapheme clusters in <a href="#UAX29"
    rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>.
 
   <p class=issue>Add appendix that describes interaction with OpenType
@@ -2480,7 +2584,79 @@ <h2 class=no-num id=bidi-html>Appendix B: Bidi Rules for HTML</h2>
 { unicode-bidi: isolate; }
   </pre>
 
-  <h2 class=no-num id=references>References</h2>
+  <h2 class=no-num id=appendix-a-script-orientations>Appendix A: Script
+   Orientations</h2>
+
+  <p>This appendix gives the orientational properties of vertical scripts in
+   <a href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>. Any
+   script not listed explicitly is assumed to be <i>horizontal-only</i>. See
+   <a href="#UAX24" rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a> for the list
+   of script names.
+
+  <table>
+   <thead>
+    <tr>
+     <th>Script Name
+
+     <th>Transform
+
+   <tbody>
+    <tr>
+     <td>Bopomofo
+
+     <td>translate
+
+    <tr>
+     <td>Hiragana
+
+     <td>translate
+
+    <tr>
+     <td>Katakana_Or_Hiragana
+
+     <td>translate
+
+    <tr>
+     <td>Katakana
+
+     <td>translate
+
+    <tr>
+     <td>Han
+
+     <td>translate
+
+    <tr>
+     <td>Hangul
+
+     <td>translate
+
+    <tr>
+     <td>Mongolian
+
+     <td>rotate
+
+    <tr>
+     <td>Phags_Pa
+
+     <td>rotate <span class=issue>?</span>
+
+    <tr>
+     <td>Yi
+
+     <td>translate
+  </table>
+
+  <p class=note>Ogham is also a rotating bi-orientational script, but because
+   it is a bottom-to-top script for the purposes of this specification it is
+   treated as left-to-right horizontal. A future version of CSS may define
+   proper handling of bottom-to-top scripts. Authors can work around this
+   lack of support with the &lsquo;<a href="#rotate-left"><code
+   class=css>rotate-left</code></a>&rsquo; value of &lsquo;<a
+   href="#text-orientation0"><code
+   class=property>text-orientation</code></a>&rsquo;.
+
+  <h2 class=no-num id=appendix-b-references>Appendix B: References</h2>
 
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->
@@ -2520,6 +2696,25 @@ <h3 class=no-num id=normative-references>Normative references</h3>
     </dd>
    <!---->
 
+   <dt id=UAX11>[UAX11]
+
+   <dd>Asmus Freytag. <a
+    href="http://www.unicode.org/unicode/reports/tr11/tr11-8.html"><cite>East
+    Asian Width.</cite></a> 23 March 2001. Unicode Standard Annex #11. URL:
+    <a
+    href="http://www.unicode.org/unicode/reports/tr11/tr11-8.html">http://www.unicode.org/unicode/reports/tr11/tr11-8.html</a>
+    </dd>
+   <!---->
+
+   <dt id=UAX24>[UAX24]
+
+   <dd>Mark Davis. <a
+    href="http://www.unicode.org/unicode/reports/tr24/tr24-7.html"><cite>Script
+    Names.</cite></a> 28 March 2005. Unicode Standard Annex #24. URL: <a
+    href="http://www.unicode.org/unicode/reports/tr24/tr24-7.html">http://www.unicode.org/unicode/reports/tr24/tr24-7.html</a>
+    </dd>
+   <!---->
+
    <dt id=UAX29>[UAX29]
 
    <dd>Mark Davis. <a
@@ -2529,6 +2724,17 @@ <h3 class=no-num id=normative-references>Normative references</h3>
     href="http://www.unicode.org/reports/tr29/tr29-17.html">http://www.unicode.org/reports/tr29/tr29-17.html</a>
     </dd>
    <!---->
+
+   <dt id=UNICODE>[UNICODE]
+
+   <dd>The Unicode Consortium. <a
+    href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html"><cite>The
+    Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard,
+    Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
+    from time to time by the publication of new versions URL: <a
+    href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html">http://www.unicode.org/unicode/standard/versions/enumeratedversions.html</a>
+    </dd>
+   <!---->
   </dl>
   <!--end-normative-->