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 w3c/clreq#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.

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?

[kidayasuo]

JLReq TF discussed this and agreed that more natural, therefore the default, direction would be bottom to top. We considered scenarios like thermometer and general bar graphs used in horizontal direction. At the same time it would be ideal if the direction can be controlled with css.

[himorin]

from 2024-02-06
@kidayasuo to comment at original issue

[r12a]

Chrome appears to be implementing this so that the flow is top to bottom. However, if you want the indicator to grow from bottom to top, you would be able to apply the CSS direction:rtl to the control.