Should bars in HTML progress and meter elements be read RTL?

[r12a]

Background

This question was prompted by the HTML issue at https://github.com/whatwg/html/issues/8413

Currently, for RTL script text Blink, WebKit and Gecko engines all reverse the direction of the progress bar when progress, meter or input=range elements are used in HTML.

This means that the direction of the controls is the same as the reading direction of the text. For example:

Test for meter

Test for progress

Test for range input control

Question

Is it preferable for the direction of the control to follow the direction of the surrounding text, or should it always progress from left to right?

[aphillips]

I note that other progression items do fill in reading order (RTL). For example, Amazon star ratings:

[matial]

This subject has been (more or less explicitly) addressed by SII (the Israel bureau of standards) in its Standard 5858. I copy below some relevant excerpts.

**User Interface Direction** The direction of the interface within an application will be RTL (Right-to-Left) or LTR (Left-to-Right) depending on the interface language of the application... For example: . . . e. Any directionally sensitive animation should be mirrored if the UI is RTL. . . . Interface elements managed by an application should change their position depending on the language of the application, except those which mimic system elements (e.g. a "Close" button of a dialog box) that should follow the guidelines for elements managed by the system. In an RTL interface, navigation elements and touch gestures shall stay RTL. However, if the application mainly displays a document, navigation elements shall be displayed according to the direction of the document (the direction natural to the language mainly used in the document). Whether the interface is LTR or RTL, elements which mimic real world items will be displayed in the same arrangement as those real world items. For instance, • Multimedia controls will be displayed with Rewind on the left, Play in the middle and Forward on the right. • Dial pads used for phone functionality should not be mirrored. According to my understanding, the above says that progress bars and meter elements should proceed from right to left in a RTL context.

[r12a]

That's really helpful. Thanks @matial !