Comments (6)
Thanks, Shervin. I wanted to keep the scope of this question to the progress and meter elements because i'm aware that things are not so clear wrt playback controls. So, in summary, you're saying that the current browser behaviour for those specific elements is probably correct.
I'm also inclined to agree with that, because the UI is basically mirrored. For example, these controls are often accompanied by a bit of text that (through javascript) gives the actual numbers involved, which would also appear on the opposite side from the English UI for Arabic text (unless the content author/translator went to some additional trouble to override the direction). Even though the Persian Guidelines doc mentions progress bars, i suspect that when they are embedded in a line of text, they should follow the reading direction.
Anyone else has an opinion?
from alreq.
This has been coming up often in bidi UX conversations and I don't have a good enough answer to it. On the one hand, it seems intuitive that the RTL progression of the text would be expanded to cover the directional behavior of progress bar and similar elements, but on the other hand, my experience shows that this could easily become problematic for some UI elements with significant roles on any specific UI canvas; e.g. considering video player time progress bar, is it also expected that its direction is RTL in an RTL UI context? How about the playback control icons (
Since I'm unaware of any UX cognitive studies showing otherwise, I usually stick with the recommendation of Persian Graphical User Interface Specifications and Guidelines, chapter 2, section 3:
The position of user interface elements should be compatible with the experiences and expectations of the users (Principle 1). Such experiences and expectations may not be related to writing direction. As a rule of thumb, the interface elements that users read like normal text should follow writing direction. For other cases, you have to find out how they are traditionally placed in the locale you are targeting. Many expected placements actually follow left-to-right conventions even in right-to-left locales. The reason is that they either follow mathematical direction (like a progress bar) which is universally left-to-right, or they follow some real world equipment which have left-to-right orientation (such as audio/visual equipment mentioned earlier).
My best attempt recommendation would be based on the whether a UI element is text related or not; the examples above (tickets sold progress bar) makes sense to follow the direction of the paragraph, but for a progress bar in a non-textual context (say, a <div dir="rtl">
with an embedded video player), it might be too counter-intuitive and confusing for the users.
from alreq.
Extended the query to cover the input
element with type set to range
, which behaves the same way in browsers.
from alreq.
There are plans for a new 'switch' control in HTML, which would, for example, allow you to show something as on or off by sliding a highlight from one side to another. Again, we have the question about whether 'on' should be on different sides in LTR and RTL contexts.
from alreq.
I put out a question at https://w3c.social/@webi18n/111585791552312739:
Should HTML range and switch controls travel in a different direction from those in English text?
I received 2 responses:
Yes for range, ambivalent for toggle switch.
The number line in Arabic math textbooks always goes left to right, so the range line should stay consistent with that.
The switch toggle has visible indicator for when it is selected and when it is not. Physical analogy of light switches for example are not always consistent, so I don't think it matters for this either.
and
I think the most comprehensive guideline for this is provided by google material design. According to this document, the answer to your question is positive.
Everything except a few should be flipped.
from alreq.
Related Issues (20)
- Lack of font support for Kashmiri characters makes text deviate from true semantics HOT 3
- Uighur hyphenation should be supported HOT 1
- Characters & encoding ok HOT 1
- Fonts ok
- Transforming characters ok
- Grapheme/word segmentation & selection ok
- Inline notes & annotations
- :dir lacks wide support HOT 3
- text/plain for RTL HOT 4
- Possible typo
- Urdu Layourt Requirements HOT 9
- Is a talur yeh inside a lexical item followed by a space? HOT 2
- Does a final KASHMIRI YEH have a circle below it in Naskh style fonts? HOT 2
- The kano font style HOT 5
- Typo HOT 1
- Character and code point?
- Font fallback should allow selection of a Nastaliq font HOT 3
- Characters that are not used for Arabic/Persian HOT 2
- Move the list of secondary references from to main document
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alreq.