opencast-studio
opencast-studio copied to clipboard
elan-ev
Improve RTL language support (change layout based on writing direction)
To use postcss-rtl we can:
eject from create-react-app
This would give us the whole responsibility for tooling etc. If we do not have to do this, I wouldn't recommend this.
Rewire CRA
By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.
Stuff can break. (see: https://github.com/csstools/react-app-rewire-postcss)
What exactly is the problem here? I just tried switching to Farsi and it doesn't break anything obvious.
Persian is a right-to-left style language. The whole user interface is wrong at the moment. Disregarding the CSS glitches (for example the missing margins between icons and label of the buttons) the Upload Dialog should look more like:
But instead it looks completely wrong instead:
I talked to @ferishili yesterday about this. In the new design, the two main things he noticed were:
- The form fields alignment (see last comment)
- In the shortcut overview, everything should be right aligned: headings and the content inside the boxes. Further, the close button should be on the left.
I looked briefly into it because I thought this was easy to fix. I stopped now as I should really be doing something else. Wanted to leave some notes here for the next person who works on this (which might be me!).
- When a RTL language is active, the
<html dir="rtl">attribute should be set. That was already prepared in https://github.com/elan-ev/opencast-studio/pull/1140 - But doing that changes a ton! That's because of CSS logical properties.
- In some places, we need to switch from non-logical values (e.g.
left,right) to logical ones (e.g.inset-inline-end). - But maybe in some places, we want to position stuff independent from writing direction. But this is an open design question. Should the progress bar be on the right, for example? Should the next/previous button be bottom left? There are many open questions like this. It's probably best to talk to a native speaker (probably @ferishili again :D) to find out what's expected and how everything should ideally look. Also, compare Wikipedia.