Add example of horizontal list markers on vertical text. (Need to ping Tab to make sure this actually works wrt CSS3 Lists.)

Author: fantasai

css3-writing-modes/Overview.html

@@ -1185,6 +1185,24 @@ <h3 id=writing-mode><span class=secno>3.1. </span> Block Flow Direction:
     src=vertical-form.png></p>
   </div>
 
+  <div class=example>
+   <p>In this example, &lsquo;<a href="#writing-mode1"><code
+    class=property>writing-mode</code></a>&rsquo; sets the list markers
+    upright using the &lsquo;<code class=css>::marker</code>&rsquo;
+    pseudo-element. <a href="#CSS3LIST"
+    rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>
+
+   <pre>::marker { writing-mode: horizontal-tb; color: blue; }</pre>
+
+   <div class=figure>
+    <p><img alt="Diagram showing list markers of '1.', '2.', '3.' sitting
+     upright atop sideways vertical Latin list item text." class=example
+     src=vertical-horizontal-list-markers.png>
+
+    <p class=caption>Example of horizontal list markers in a vertical list</p>
+   </div>
+  </div>
+
   <h4 id=svg-writing-mode><span class=secno>3.1.1. </span> SVG1.1 &lsquo;<a
    href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;
    Values</h4>
@@ -3647,6 +3665,16 @@ <h3 class=no-num id=other-references> Other references</h3>
     </dd>
    <!---->
 
+   <dt id=CSS3LIST>[CSS3LIST]
+
+   <dd>Ian Hickson; Tantek &#199;el&#305;?k. <a
+    href="http://www.w3.org/TR/2002/WD-css3-lists-20021107"><cite>CSS3
+    module: Lists.</cite></a> 7 November 2002. W3C Working Draft. (Work in
+    progress.) URL: <a
+    href="http://www.w3.org/TR/2002/WD-css3-lists-20021107">http://www.w3.org/TR/2002/WD-css3-lists-20021107</a>
+    </dd>
+   <!---->
+
    <dt id=CSS3PAGE>[CSS3PAGE]
 
    <dd>H&#229;kon Wium Lie; Melinda Grant. <a

css3-writing-modes/Overview.src.html

@@ -827,6 +827,21 @@ <h3 id="writing-mode">
             src="vertical-form.png"></p>
   </div>
 
+  <div class="example">
+    <p>In this example, 'writing-mode' sets the list markers upright
+      using the ''::marker'' pseudo-element. Vertical alignment ensures
+      that longer numbers will still align with the top of the first
+      line of text. [[CSS3LIST]]
+    <pre>::marker { writing-mode: horizontal-tb; vertical-align: text-top;
+                    color: blue; }</pre>
+    <div class="figure">
+      <p><img alt="Diagram showing list markers of '1.', '2.', '3.' sitting
+                   upright atop sideways vertical Latin list item text."
+              class="example" src="vertical-horizontal-list-markers.png">
+      <p class="caption">Example of horizontal list markers in a vertical list</p>
+    </div>
+  </div>
+
 <h4 id="svg-writing-mode">
 SVG1.1 'writing-mode' Values</h4>