search

cockpit-project / cockpit

Cockpit is a web-based graphical interface for servers.
http://www.cockpit-project.org/
GNU Lesser General Public License v2.1
11.36k stars 1.13k forks source link

UI should be adapted to RTL #14058

Open yarons opened 4 years ago

yarons commented 4 years ago

Page: All of them

Now that Cockpit is completely translated to Hebrew we need to make sure the UI will adjust properly to the change.

Hebrew is written from Right to Left (hence RTL) which means that our books are starting from the other side and we need all sorts of adjustments and crutches to make it visually compelling.

One example I can show is this UI overview by the Spotify team (Done for Arabic and Persian but applies to Hebrew as well): https://labs.spotify.com/2019/04/15/right-to-left-the-mirror-world/

Another way of explaining these peculiarities: https://blogs.sap.com/2015/11/27/understanding-rtl-language-support-in-sapui5/

Thanks and I'd love to help if necessary.

garrett commented 4 years ago

This would be excellent.

I'm certain we make some wrong assumptions. We're probably using "left" and "right" when we should be using start and end and things like that. Although, I guess some of that flips directions.

There are still some floats (that we still need to get rid of for multiple other reasons too) in the UI, and those could cause issues as well.

Since we now have Hebrew translations (thanks!), the overall steps I'd imagine we would want to do are:

  1. pull the Hebrew language support into Cockpit
  2. have a direction flag that's associated with languages (could default to LTR unless otherwise set)
  3. do a very naïve RTL flip and see what breaks
  4. fix the string breakages
  5. fix icon issues (left and right arrows and such)
  6. fix the layout breakages

Step 4 - 6 can be done in parallel. Unless there are a lot of string issues, such as the mentioned “Hello (World)” -> “(Hello (World” problems, I think the hardest part would be to fix item # 6.

I guess we'd probably need at least @yarons, @martinpitt, and @garrett working on this, to some extent. And probably others pitching in effort too.

yarons commented 4 years ago

Sounds like a plan @garrett, is there any staging/dev environment for that?

marusak commented 4 years ago

In https://github.com/cockpit-project/cockpit/pull/14078 the new language is introduced.

yarons commented 4 years ago

@marusak Great news but we still have to take care of RTL (Not only for Hebrew), otherwise it might be pretty confusing for Hebrew speakers to use it.

garrett commented 4 years ago

I'm currently on the nav branch, which will probably be landing in the next few days, so it's most likely representative of what's to come soon.

I don't have the Hebrew language commit merged in yet, but I did set direction: rtl in the root element on both the shell and the page inside the iframe too.

Just from this super-quick in-browser test, I see that some of the popups are truncated off the side of the screen and margin/padding of various elements are not really optimal.

We'd want to set <body dir="rtl"> instead of using CSS for the direction. It's a bit more robust and considered a "more proper" way to change direction.

(And then we might want to make things generic based on direction whenever possible in the CSS and then key it off of [dir=rtl] for the "one-off" places where we cannot specify beginning/end instead of left/right. And then still align things to the left or right in some cases anyway...)

Here's a starter document about some of these issues: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/

Here are some of the first-pass screenshots of flipping the UI in action (where you can see some of the issues). This is independent of having it in Hebrew for now (as this branch is out of sync with master): Screenshot_2020-05-18 Overview - garrett Rain Screenshot_2020-05-18 Overview - garrett Rain(1) Screenshot_2020-05-18 Overview - garrett Rain(2) Screen Shot 2020-05-18 at 18 01 48

yarons commented 1 year ago

Does it solve the CSS issues as well or only the backend mechanism to support the layout?

marusak commented 1 year ago

No it does not solve CSS yet. It only switches the direction based on selected language. It will take longer time to fix all the UI and it will be iterative process. Help is very much welcomed!

garrett commented 1 year ago

Re-opening this to help track RTL issues now that initial support has landed, as the UI is only partially adapted to RTL.