[css-writing-modes] writing-mode: sideways-lr | sideways-rl

Author: kojiishi

css-writing-modes/Overview.bs

@@ -16,7 +16,7 @@ Former Editor: Shinyu Murakami, Antenna House, murakami@antenna.co.jp
 Former Editor: Paul Nelson, Microsoft, paulnel@microsoft.com
 Former Editor: Michel Suignard, Microsoft, michelsu@microsoft.com
 Abstract: CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).
-At Risk: The ''sideways-left'' of 'text-orientation'
+At Risk: The ''sideways-lr'' and ''sideways-rl'' of 'writing-mode'
 At Risk: The ''use-glyph-orientation'' of 'text-orientation'
 At Risk: The ''digits'' value of 'text-combine-upright'.
 At Risk: The look-ahead/look-behind sequencing rules for 'text-combine-upright'.
@@ -783,7 +783,7 @@ Block Flow Direction: the 'writing-mode' property</h3>
 
   <pre class='propdef'>
   Name: writing-mode
-  Value: horizontal-tb | vertical-rl | vertical-lr
+  Value: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
   Initial: horizontal-tb
   Applies to: All elements except table row groups, table column groups, table rows, and table columns
   Inherited: yes
@@ -801,13 +801,21 @@ Block Flow Direction: the 'writing-mode' property</h3>
   <dl dfn-for=writing-mode dfn-type=value>
     <dt><dfn>horizontal-tb</dfn></dt>
     <dd>Top-to-bottom <i>block flow direction</i>.
-        Both the <i>writing mode</i> and <i>typographic mode</i> are horizontal.</dd>
+        Both the <i>writing mode</i> and the <i>typographic mode</i> are horizontal.</dd>
     <dt><dfn>vertical-rl</dfn></dt>
     <dd>Right-to-left <i>block flow direction</i>.
-        Both the <i>writing mode</i> and <i>typographic mode</i> are vertical.</dd>
+        Both the <i>writing mode</i> and the <i>typographic mode</i> are vertical.</dd>
     <dt><dfn>vertical-lr</dfn></dt>
     <dd>Left-to-right <i>block flow direction</i>.
-        Both the <i>writing mode</i> and <i>typographic mode</i> are vertical.</dd>
+        Both the <i>writing mode</i> and the <i>typographic mode</i> are vertical.</dd>
+    <dt><dfn>sideways-rl</dfn></dt>
+    <dd>Right-to-left <i>block flow direction</i>.
+        The <i>writing mode</i> is vertical, while the <a>typographic mode</a> is horizontal.
+        <p class="note">This value is at-risk and may be dropped during CR.
+    <dt><dfn>sideways-lr</dfn></dt>
+    <dd>Left-to-right <i>block flow direction</i>.
+        The <i>writing mode</i> is vertical, while the <a>typographic mode</a> is horizontal.
+        <p class="note">This value is at-risk and may be dropped during CR.
   </dl>
 
   <p>The 'writing-mode' property specifies the <i>block flow direction</i>,
@@ -1224,35 +1232,8 @@ Orienting Text: the 'text-orientation' property</h3>
     <dt><dfn>sideways-right</dfn></dt>
     <dd><p>In vertical writing modes, this causes text to be set as if
       in a horizontal layout, but rotated 90&deg; clockwise.
-    <dt><dfn>sideways-left</dfn></dt>
-    <dd><p>In vertical writing modes, this causes text to be set as if
-      in a horizontal layout, but rotated 90&deg; counter-clockwise.
-      <p>If set on a non-replaced inline whose parent is not ''sideways-left'',
-      this forces bidi isolation: the ''normal'' and ''embed'' values of
-      'unicode-bidi' compute to ''isolate'', and ''bidi-override'' computes
-      to ''isolate-override''.
-      Layout of text is exactly as for ''sideways-right'' except that the
-      baseline table of each of the inline box's fragments
-      is mirrored around a vertical axis along the center of its content box
-      and text layout is rotated 180&deg; to match.
-      The positions of text decorations propagated from an ancestor inline
-      (including the block container's root inline) are not mirrored, but any
-      text decorations introduced by the box are positioned using the
-      mirrored baseline table.
-      <p>Similarly, if an inline child of the box has a 'text-orientation'
-      value other than ''sideways-left'', an analogous transformation (and
-      bidi isolation) is applied.
-      <p class="note">This value is at-risk and may be dropped during CR.
-      <p class="issue"><a href="https://lists.w3.org/Archives/Public/www-style/2015Apr/0026.html">float interaction when line-left and line-right swap</a>
-      <p class="note">If this value is not supported, implementation should drop support for
-        either ''vertical-lr'' or ''sideways'' as well,
-        since the combination of the two requires ''sideways-left'' layout.
-      <p class="issue">Need to mark ''vertical-lr'' at risk
     <dt><dfn>sideways</dfn></dt>
-    <dd><p>This value is equivalent to ''sideways-right'' in ''vertical-rl''
-      writing mode and equivalent to ''sideways-left'' in ''vertical-lr''
-      writing mode. It can be useful when setting horizontal script text
-      vertically in a primarily horizontal-only document.
+    <dd><p>This value is equivalent to ''sideways-right''.
     <dt><dfn>use-glyph-orientation</dfn></dt>
     <dd><p>[[!SVG11]] defines 'glyph-orientation-vertical' and
       'glyph-orientation-horizontal' properties that were intended to control
@@ -1681,16 +1662,9 @@ Abstract-to-Physical Mappings</h3>
       <tr>
         <th scope="row">'writing-mode'</th>
         <th colspan="2">''horizontal-tb''</th>
-        <th colspan="4">''vertical-rl''</th>
-        <th colspan="4">''vertical-lr''</th>
-      </tr>
-      <tr>
-        <th scope="row">'text-orientation'</th>
-        <th colspan="2">&mdash;</th>
-        <th colspan="2">''sideways-left''</th>
-        <th colspan="2"><abbr title="mixed, upright, sideways-right">*right</abbr></th>
-        <th colspan="2">''sideways-left''</th>
-        <th colspan="2"><abbr title="mixed, upright, sideways-right">*right</abbr></th>
+        <th colspan="2">''vertical-rl'', ''sideways-rl''</th>
+        <th colspan="2">''vertical-lr''</th>
+        <th colspan="2">''sideways-lr''</th>
       </tr>
       <tr>
         <th scope="row">'direction'</th>
@@ -1702,92 +1676,78 @@ Abstract-to-Physical Mappings</h3>
         <th>''rtl''</th>
         <th>''ltr''</th>
         <th>''rtl''</th>
-        <th>''ltr''</th>
-        <th>''rtl''</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">block-size</th>
         <td colspan="2">height</td>
-        <td colspan="8">width</td>
+        <td colspan="6">width</td>
       </tr>
       <tr>
         <th scope="row">inline-size</th>
         <td colspan="2">width</td>
-        <td colspan="8">height</td>
+        <td colspan="6">height</td>
       </tr>
       <tr>
         <th scope="row">block-start</th>
         <td colspan="2">top</td>
-        <td colspan="4">right</td>
+        <td colspan="2">right</td>
         <td colspan="4">left</td>
       </tr>
       <tr>
         <th scope="row">block-end</th>
         <td colspan="2">bottom</td>
-        <td colspan="4">left</td>
+        <td colspan="2">left</td>
         <td colspan="4">right</td>
       </tr>
       <tr>
         <th scope="row">inline-start</th>
         <td>left</td>
         <td>right</td>
-        <td>bottom</td>
         <td>top</td>
+        <td>bottom</td>
         <td>top</td>
         <td>bottom</td>
         <td>bottom</td>
         <td>top</td>
-        <td>top</td>
-        <td>bottom</td>
       </tr>
       <tr>
         <th scope="row">inline-end</th>
         <td>right</td>
         <td>left</td>
-        <td>top</td>
         <td>bottom</td>
+        <td>top</td>
         <td>bottom</td>
         <td>top</td>
         <td>top</td>
         <td>bottom</td>
-        <td>bottom</td>
-        <td>top</td>
       </tr>
     </tbody>
     <tbody>
       <tr>
         <th scope="row">over</th>
         <td colspan="2">top</td>
+        <td colspan="4">right</td>
         <td colspan="2">left</td>
-        <td colspan="2">right</td>
-        <td colspan="2">left</td>
-        <td colspan="2">right</td>
       </tr>
       <tr>
         <th scope="row">under</th>
         <td colspan="2">bottom</td>
+        <td colspan="4">left</td>
         <td colspan="2">right</td>
-        <td colspan="2">left</td>
-        <td colspan="2">right</td>
-        <td colspan="2">left</td>
       </tr>
       <tr>
         <th scope="row">line-left</th>
         <td colspan="2">left</td>
+        <td colspan="4">top</td>
         <td colspan="2">bottom</td>
-        <td colspan="2">top</td>
-        <td colspan="2">bottom</td>
-        <td colspan="2">top</td>
       </tr>
       <tr>
         <th scope="row">line-right</th>
         <td colspan="2">right</td>
+        <td colspan="4">bottom</td>
         <td colspan="2">top</td>
-        <td colspan="2">bottom</td>
-        <td colspan="2">top</td>
-        <td colspan="2">bottom</td>
       </tr>
     </tbody>
   </table>