RTL support

[dave08]

Is there any rtl support in Patternfly?

[mcoker]

Hi @dave08, there is no RTL support in PatternFly currently. Do you have a need for RTL support, and if so could you share more info about your product, languages supported, etc?

cc @dgutride

[dave08]

Hi @mcoker, we do have a need for RTL, we need to provide Admin UIs for a company that provides services to a Hebrew speaking public. I think even Keycloak (which they use too) is based on Patternfly, we needed to help them translate part of it, but the UI still can't be full RTL...

[stale[bot]]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.

[garrett]

This is very much a chicken-and-egg problem. Apps want to add RTL support, but the toolkit doesn't fully support it so they can't, but the toolkit doesn't support it until the apps need it.

Additionally, for anyone who only knows LTR languages, there's no way to know if it's being fully implemented correctly. (We can make guesses about the simpler parts.)

It's quite similar to accessibility, where some people need it and most of the developers don't, and it's one of those things you have to constantly think about and fix (it's not something you sprinkle on top). These same properties are similar to dark mode too (which is also an accessibility feature) — and mobile too!

We still have a longstanding issue open over on Cockpit about RTL @ cockpit-project/cockpit#14058

And I made a pull request a few years ago @ cockpit-project/cockpit#14107

I finally convinced the rest of the Cockpit team that we should really try to do this. (We're a small team and have to juggle a lot of things, so we can't do everything at the same time... hence this being on the back-burner for quite some time. But I think we're finally getting to this and trying to improve it the best we can. And we do have someone who volunteered to check everything. There's a lot of stuff to do, and a lot of it is obvious, where I could fix it within Cockpit's codebase.)

Thankfully, already having a pretty decent starting point for Hebrew translation and setting values in browser gets us 50% of the way there. The other 50% is split between things Cockpit's done and how PatternFly has implemented things. (Probably 30% Cockpit / 20% PatternFly. All these numbers are made up on a "gut feeling" after playing around with the hacky proof of concept I made a while back.)

This all said, when we are attempting it, we will run into problems with PatternFly. I know this for a fact.

There are parts of PatternFly which are still using margin hacks for multiple items when they should be using either grid or flex with a gap. This also impacts mobile, when elements wrap.

With how it is in PatternFly right now, the horizontal margins wrap so there's too much space on the left or right (depending on how it is implemented) and no space above or below the items. Fixing this would fix mobile too.

In RTL, the margin hack means the left/right margins would be applied to the wrong side. Using gap would fix it here too (not just in mobile).

So we're planning on doing a best-effort to fix things in Cockpit and will file bugs against PF for fixing the problems. Again: Most of the RTL problems are probably also problems for mobile (and even desktop) when things wrap.

Additionally, there's even more to RTL than just flipping things. Apple has some good guidelines about this (https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left), which even mentions tailoring icons to adapt to the different writing direction. But a good first pass would fix a lot of the bigger problems, and follow-ups can handle details.

I'm certain that Cockpit's not the only app using PatternFly that wants to implement RTL. (This bug report is an indication that someone else wants to do this too. And others such as OpenShift probably should approach it as well.) So I'm reopening. Hopefully it won't get closed with a wontfix this next time.

And, besides, as stated above, a lot of the RTL bugs are actually fundamental issues also affecting mobile. The layouts should be improved for several widgets.

[jonkoops]

Just FYI we have had folks express that they would like to have support for this in our application (see keycloak/keycloak#17904).

[stale[bot]]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.

[garrett]

It's still ongoing.

Despite PF's lack of official RTL support, we've added a first pass in Cockpit.

Additionally, as PatternFly moves more an more to gap and flex instead of using margins to space widgets at the same level, the more RTL friendly it will become. As far as I'm aware, there's work ongoing to port widgets to layouts instead of using child + child { margin-left }.

(So it's not stale.)

[nicolethoen]

As of 5.1.1 in PF, RTL Language support is now available!
https://www.patternfly.org/get-started/release-highlights#right-to-left-language-support

Here is the handbook on the website: https://www.patternfly.org/developer-resources/right-to-left-handbook
Here is a demo in the documentation: https://www.patternfly.org/patterns/right-to-left