articles/vertical-text: Clarify Gecko support for vertical select. Ad…

…d section on progress bars, meters, and buttons.

articles/vertical-text/index.en.html

@@ -641,11 +641,18 @@ <h3>Choosing a font for horizontal inline text</h3>
 
 
 
+
+
+
 <section id="forms_etc">
 <h2>Forms, lists and tables</h2>
 
+
+
+
 <section id="forms">
 <h3>Forms</h3>
+
 <p>Text entry forms and select menus should flow down the page in vertical text, as illustrated in the following diagram. You will need to ensure that you specify sufficient vertical height to hold the form field.</p>
 
 <div class="figWrap">
@@ -655,6 +662,8 @@ <h3>Forms</h3>
 </figure>
 </div>
 
+<p>Note that vertical lines and controls flow right to left for Japanese and Chinese controls, but left to right for vertical Mongolian.</p>
+
 
 <div class="sidenoteGroup">
 <div id="out_form_controls" class="browser_output">
@@ -675,18 +684,72 @@ <h3>Forms</h3>
 </div>
 
 <aside class="implnote">
-  <p class="impl"><img src="../../icons/firefox_16x16.png" width="16" height="16" alt="Gecko" title="Gecko"/> <img src="../../icons/ok.png" alt="OK" style="margin-left: 0.5em;"/></p>
-  <p>Only Gecko rotates the direction of the form fields for <code class="kw" translate="no">select</code>, <code class="kw" translate="no">textarea</code> or <code class="kw" translate="no">input</code> elements with a type of <code class="kw" translate="no">text</code>.</p>
+  <p class="impl"><img src="../../icons/firefox_16x16.png" width="16" height="16" alt="Gecko" title="Gecko"/> <img src="../../icons/ok.png" alt="OK" style="margin-left: 0.5em;"/><img src="../../icons/fail.png" alt="fail"></p>
+  <p>Only Gecko rotates the direction of the form fields for <code class="kw" translate="no">select</code>, <code class="kw" translate="no">textarea</code> or <code class="kw" translate="no">input</code> elements with a type of <code class="kw" translate="no">text</code>. However, Gecko doesn't list the options vertically when the select control is opened.</p>
   <p><img src="../../icons/chrome_16x16.png" width="16" height="16" alt="Blink" title="Blink"/> <span class="issue"><img src="../../icons/safari_16x16.png" width="16" height="16" alt="WebKit" title="WebKit"/></span> <img src="../../icons/fail.png" alt="fail" style="margin-left: 0.5em;"/></p>
   <p> Blink and Webkit browsers place the form field horizontally and display the contained text horizontally also.</p>
 <p>See test results for major browsers: <a target="_blank" href="https://www.w3.org/International/tests/repo/results/writing-mode-vertical#rl_forms">vertical-rl</a>, <a target="_blank" href="https://www.w3.org/International/tests/repo/results/writing-mode-vertical#lr_forms">vertical-lr</a>.</p>
 </aside>
 </div>
+</section>
+
+
+
+
+
+
+
+<section id="meters_etc">
+<h3>Progress bars, meters, and buttons</h3>
+
+<p>Controls representing progress bars and meters should also be vertical by default when the text direction is vertical. There is currently (at time of writing) an open question about whether progress indicators should run bottom-to-top, or vice versa. (The illustration shows bottom-to-top because that's what the Gecko engine does.)</p>
+
+<div class="figWrap">
+<figure>
+<img src="index-data/fig_controls_progress.png" alt="Progress bar, meter, & button controls" style="width:10rem;">
+ <figcaption>Progress bar, meter, &amp; button controls in vertically set text.</figcaption>
+</figure>
+</div>
+
 
+<div class="sidenoteGroup">
+<div id="out_progress_controls" class="browser_output">
+<p class="browser_output_title">Output in your browser:</p>
+<div class="browser_output_example" lang="ja">
+<div style="writing-mode:vertical-rl;">
+<!-- meter -->
+<p style="margin-block:3rem;"><label for="fuel">燃料レベル</label>
+<meter id="fuel"
+       min="0" max="100"
+       low="33" high="66" optimum="80"
+       value="50">
+</meter></p>
 
+<!-- progress bar -->
+<p style="margin-block:3rem;"><label for="file">ファイル</label>
+<progress id="file" max="100" value="70" style="height: 6rem;"> 70% </progress></p>
 
+<!-- button -->
+<p style="margin-block:3rem;"><button style="padding-inline:3rem;">コピー</button></p>
+</div>
+</div>
+</div>
+
+<aside class="implnote">
+  <p class="impl"><img src="../../icons/firefox_16x16.png" width="16" height="16" alt="Gecko" title="Gecko"/> <img src="../../icons/ok.png" alt="OK" style="margin-left: 0.5em;"/></p>
+  <p>Only Gecko rotates the direction of the controls. However,  the progress bar and meter controls are left-aligned in the vertical line (whether the content is Chinese, Japanese, or Mongolian).</p>
+  <p><img src="../../icons/chrome_16x16.png" width="16" height="16" alt="Blink" title="Blink"/> <span class="issue"><img src="../../icons/safari_16x16.png" width="16" height="16" alt="WebKit" title="WebKit"/></span> <img src="../../icons/fail.png" alt="fail" style="margin-left: 0.5em;"/></p>
+  <p>Blink and Webkit browsers place the controls horizontally and display the contained text horizontally also, except that WebKit displays the text inside the (horizontal) button vertically.</p>
+</aside>
+</div>
 </section>
 
+
+
+
+
+
+
 <section id="lists">
 <h3>Lists</h3>
 <p>List content should also flow down the page in vertical text, with the counter at the top of the line, as illustrated in the following diagram.</p>