Should bars in HTML progress, meter & input=range elements be read upwards or downwards in vertical text?

[r12a]

Background

This question was prompted by the HTML issue at whatwg/html#8413

Currently, Blink and WebKit don't make these inline controls vertical (see #247).

Gecko, however, does display the control vertically, but the reading direction of the progress bar when progress or meter elements are used in HTML is bottom to top. The following example and test contains Japanese text, but should work the same for Chinese.

Test for all

Question

Is it preferable for the direction of the control to follow the direction of the surrounding text (ie. start at the top of the control), or should it always progress from bottom to top?

[xfq]

Related issue in jlreq: w3c/jlreq#342

Another thread in Japanese: https://lists.w3.org/Archives/Public/public-i18n-japanese/2022OctDec/0112.html

[huijing]

After discussion among the members of the CLreq TF, we felt that having the controls in the same direction as the flow of the text is more intuitive. If we consider the concept of reading from thermometers and bar graphs, the direction that indicates a value is consistent with the direction which the numbers are flowing (e.g. 0, 1, 2, 3, 4) in a default direction that increases in value.
Our logic is that the direction of the control and the direction of the inline text should be the same.

Ideally something like this:

The label for the control translates to "Number of tickets (from 1 to 10)". It does read more intuitively if the controls were positioned as in the image.

[r12a]

Thanks @huijing ! So the Japanese folks prefer bottom to top, and the Chinese folks prefer top to bottom for vertical lines. That's interesting. Let's see what the CSS and browser folks make of that.

[kidayasuo]

Hello @xfq , probably we should jointly discuss this, with real usage examples on the table.

[xfq]

Discussions in the editors' call: https://www.w3.org/2022/11/29-clreq-minutes.html#t11

[xfq]

@kidayasuo Excellent! Would it be OK for you and the interested JL-TF members to attend the CLReq Editors' Call on December 20 (Tuesday), 20:00-21:00 (UTC+9)? Feel free to propose another time slot if it doesn't work for you.

[kidayasuo]

Thank you @xfq ! I am asking if some other jlreq folks can attend and will get back to you.

I believe concrete examples, either horizontal or vertical, would be a big help for a fruitful discussion. I would appreciate it if you can help collecting them. thanks!

[realfish]

There may be some other related issues worth being discussed here.

Should progress, meter, and input[type="range"] be discussed separately? Or, are there any different requirements between these controls/indicators as per UX or i18n/l10n.

• There is the non-standard CSS appearance: slider-vertical/slider-horizontal to handle the direction of input[type="range"], as you may know already, while there seems to be no counterpart for progress or meter.
• On the other hand, the input[type="range"] in Safari/WebKit contains no accent color, which seems to imply that there is no preferred/presupposed “sliding direction” for users. (Here is a related example where sliders are used for inputting specific numeric values, hence there is no accent color needed to indicate the ranges.)

Besides, the vertical progress is actually a universal design pattern regardless of writing mode. In other words, a vertical progress bar/indicator can appear in either the horizontal layout context or the vertical, e.g. (vertical progress indicators under horizontal-tb writing mode),

• https://carbondesignsystem.com/components/progress-indicator/usage/#live-demo,
• & https://www.lightningdesignsystem.com/components/progress-indicator/#Vertical.

---

In addition, taking the writing mode into consideration, there is another related question below (which may be out of scope).

If a horizontal progress / meter / input[type="range"] appears in some vertical-rl context, should the default direction be left-to-right or right-to-left?

[yisibl]

One thing I'd like to mention is: please don't make a mandatory correlation between the direction of the progress bar and the direction in which the text is written. For example, I'm a Chinese user, and in vertical-rl, although the text is written from top to bottom, it doesn't necessarily mean that my progress bar has to be from top to bottom. Besides, sometimes a vertical progress bar is needed when writing horizontally.

Imagine there's a thermometer on the page 🌡 I would prefer bottom to top.

So, I would suggest adding a directional control primitive, a new HTML attribute or a CSS property, which needs to be discussed further, see whatwg/html#4177

[xfq]

Discussions in the editors' call (on 29 May): https://www.w3.org/2024/05/29-clreq-minutes.html#t02