Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
r12a opened this issue Oct 25, 2022 · 3 comments
Open

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

r12a opened this issue Oct 25, 2022 · 3 comments
Labels
i:bidi_text Bidirectional text question s:hebr Hebrew script

Comments

@r12a
Copy link
Contributor

r12a commented Oct 25, 2022

Background

This question was prompted by the HTML issue at whatwg/html#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:

Screenshot 2022-10-25 at 16 51 45

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?

@r12a r12a added question i:bidi_text Bidirectional text labels Oct 25, 2022
@aphillips
Copy link

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

image

image

@matial
Copy link

matial commented Oct 27, 2022

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
Copy link
Contributor Author

r12a commented Oct 27, 2022

That's really helpful. Thanks @matial !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
i:bidi_text Bidirectional text question s:hebr Hebrew script
Projects
None yet
Development

No branches or pull requests

3 participants