The InteractionTimeline should fully function on RTL languages.
Make use of https://github.com/cssjanus/cssjanus to handle CSS styles
See also: T181172
Things to do:
- Add CSS Janus
- Examine what's still broken
- Create new tasks for broken items
Description
Description
Related Objects
Related Objects
- Mentioned In
- T181172: Internationalize the Timeline
- Mentioned Here
- T181172: Internationalize the Timeline
Event Timeline
Comment Actions
@Mooeypoo I think you mentioned you could do an audit of the application to see what improvements we might need. Can I assign this to you until that happens?
Comment Actions
First problem: I switched my Chrome language to Hebrew, and I see the site in English, after refreshing and hard-refreshing a few times.
Comment Actions
It will use the languages in order, you can specify more than one language in Chrome. If English comes before Hebrew, that is the one that will be used. :)
Comment Actions
Hmmm but I set up Hebrew as the interface language. Interesting. I'll give it another shot.
Comment Actions
Notes so far:
- Selecting "Hebrew" as top language does translate to Hebrew, but it's missing dir="rtl" on either the html or body tag.
- Adding dir="rtl" to the body tag flips most of the interface:
- There appear to be rigid directionality rules in the CSS. We might want to consider running it through CSSJanus, or fixing individually. Some examples:
- body has a text-align: left; rule that should be corrected to text-align: right
- row uses flex but it might be weirdly set up on the labels, because the "Users" label in Hebrew is squished and appears behind the user selection dropdown almost always until the display is narrow.
- #input-start-date and #input-end-date should be specifically set to dir='ltr' since they're dates, and the format is the same in the majority of RTL languages. The calendar popup appears in Hebrew properly.
- The user "bubbles" don't have enough padding on the right side of .Select-control
- 2 days between edits is not translated. I think it might be inside momentjs, but it should have its own translations, if a locale is passed through.
- .revision.right .wrapper (the grey bar that follows the dots) is misaligned; it's on the left of the revision user boxes, instead of being along the dots.
