Apache Superset Superset does not support Arabic language -RTL- layout

Screenshots

Description

Superset is a powerful data visualization tool, but it does not currently support the Arabic language or the RTL layout. This makes it difficult for users in Arabic-speaking countries to create Superset dashboards in Arabic.

The following are some of the problems that users in Arabic-speaking countries experience when using Superset:

There's no support for Arabic Language in superset UI
The UI elements as well as most charts' layout are not aligned correctly in the RTL layout
The keyboard shortcuts are not mapped to the Arabic keyboard layout
Function names should be displayed in Arabic

I would like to request that Superset be updated to support the Arabic language and the RTL layout. This would make Superset a more accessible tool for users in Arabic countries.

Comment From: omar-nelc

Hello maintainers,

I'm Omar Al-Ithawi and I'm a Core Contributor in the @openedx project which is also built in Python and React.

In 2014, the Open edX project -- a Learning management system -- had no Arabic or Right-to-Left support and often times lacked uft-8 support on some modules.

Many contributors and myself have worked on this issue until Unicode, Arabic and Right-to-Left has been supported.

I'm planning to do the same for superset. I'm assuming Unicode is supported by Python 3.9, so we need to support Arabic and RTL styles.

For Arabic, we're planning to add translations because it seems to be fairly doable. However, we're reviewing the status of RTL support at the moment to see how can we add it.

Comment From: alimahwer

Hi Omar, I have experience translating some open-source projects into Arabic. So, I will be glad to contribute to the Arabization of Superset. However, We are still waiting for who will take the initiative of adding RTL orientation to Superset. Hope we together can cooperate on this task.

Comment From: omar-nelc

@alimahwer Please feel free to start translating the project even though it lacks RTL support.

I think the two problems can be fixed in parallel, so if you have the capacity to translate it, please do so and tag me for a review if needed.

Comment From: bmtcril

Hi all, has there been any movement on this issue? I haven't been able to find anything related.

Comment From: rusackas

Nope, I think this is in need of volunteers. I'm tempted to close this out as an Issue, since it's not a bug, but rather a feature request. Normally I would, but I'm hopeful someone on this thread might pick it up. If not, we should move it to a Discussion or close it.

Comment From: bmtcril

@omar-nelc is one of our contributors so I'll round up with him and see if we can help push this forward, we'd love to have it!

Comment From: OmarIthawi

@rusackas and @bmtcril thanks for keeping this issue active.

The lowest hanging fruit is to find static CSS files and process them with rtlcss on the CSS files and it would generate two files:

Left to Right CSS file (original)
Right to Left CSS file (generated)

This framework is flexible and works with many other frameworks and systems.

The other part is to ensure the UI loads the correct file depending on the chosen user language.

Other super-set work seems to be needed such as extending styled to support RTL without needing to edit individual components similar to how rtlcss would work.

There will be some UI issues after we and it's manual frontend work to fix those. From system to system it varies, but it's a doable work in general.

Would the Superset team be open to add such build steps? Whether we contribute it or the core team does that.

Comment From: rusackas

Whether we contribute it or the core team does that.

We're open to contributions! You're right that <styled> (or any other Emotion-based theming methods) would need to support this. We're moving toward that library and away from LESS/CSS files, so anything based on only those files will have less and less impact as we move away from them.

I don't know of anyone on the PMC/Committer roster who has this on their roadmap, so we'd have to lean on other contributors from this thread to take action here :) Thanks in advance!

Comment From: OmarIthawi

Thanks @rusackas that makes it clear.

I'll see if my team is up to take a stab on this.

The initial suggested approach is to provide a custom styled with the following logic:

// Pseudo-code here
const bidiStyled = (args...) => {
    args.styles = args.styles.replace('margin-left', 'margin-right');
    return styled(args...);
}

const Section = bidiStyled.section`
  margin-left: 20px;
  padding-top: 10px;
`

In an RTL document, it would cause margin-right to be used.

An alternative is switch hard-coded direction properties like padding-left to context-dependent padding-block-start and similar properties. What's your opinion on that?

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start

Applying those properties would allow (ideally) a single switch <html dir="rtl"> to flip the page direction and the rest is the browsers-work:

I've checked browser support and it seems to have good support 96%+:

https://caniuse.com/mdn-css_properties_margin-block-start

Luckily, flex UI and many other CSS properties automatically adjust when <html dir=rtl> is used as shown in the screenshot below -- it's not too broken, which is a pleasant surprise!!

Apache Superset Superset does not support Arabic language -RTL- layout

Comment From: rusackas

I love the idea of switching to {padding/margin}-block-{start/end} if that unblocks this. My two questions:

• Is there a listing rule that can protect against people using the more common/obvious padding/margin attributes? • Would/could a listing rule actually fix this? • How many people use IE11, and is it OK to officially drop support for this? I would think everyone is using Edge by now... I don't see any IE users in the Superset website's stats, but we don't really know this stat for Superset itself.

Pinging a few others here who might have opinions on the matter: @kgabryje @mistercrunch @michael-s-molina

Comment From: OmarIthawi

I love the idea of switching to {padding/margin}-block-{start/end} if that unblocks this. My two questions:

Great!

• Is there a listing rule that can protect against people using the more common/obvious padding/margin attributes?

I'd think not. This use case is very specific React JSX and Styled, but I presume we could fallback to basic grepping and develop a rather naive string-checking approach and it would work. I hope there's a better code aware tool, but once we start developing it'll be clearer.

• Would/could a listing rule actually fix this?

Usually yes. But it'll be annoying to both first-time and occasional contributors.

• How many people use IE11, and is it OK to officially drop support for this? I would think everyone is using Edge by now... I don't see any IE users in the Superset website's stats, but we don't really know this stat for Superset itself.

I can't say much about that.

Comment From: michael-s-molina

My two cents: - RTL is a property of the theme object - It's not only spacing but also icon mirroring and representing the passage of time correctly

Comment From: OmarIthawi

Status:

Translations is on the way, with no specific deadline yet.
RTL work is still not started.

Comment From: CodeWithEmad

Hey @OmarIthawi, just checking in to see if there have been any updates on this over the past few months.

Comment From: OmarIthawi

@CodeWithEmad the translations is ready, and we're pushing it to Superset soon. RTL work is still needed.

Comment From: OmarIthawi

Arabic translations have been merged and I suppose it's scheduled for release in 4.1 or 4.2.

@CodeWithEmad @ca5p3r @alimahwer we appreciate some help in the RTL efforts.

@rusackas if you happen to know, would you mind letting us know in which release https://github.com/apache/superset/pull/29586 is expected to be included?

Comment From: alimahwer

Arabic translations have been merged and I suppose it's scheduled for release in 4.1 or 4.2.

@CodeWithEmad @ca5p3r @alimahwer we appreciate some help in the RTL efforts.

@rusackas if you happen to know, would you mind letting us know in which release #29586 is expected to be included?

Dear Omar, I'm more than happy to contribute to the Arabic translation of Superset. I have a great experience in the Arabization of many FLOSS projects. However, I would like to learn more about the progress of RTL support.

Comment From: OmarIthawi

@alimahwer The arabic translations has been mostly completed by my colleauge @abdilra7eem in

https://github.com/apache/superset/pull/29586

If you want to take another pass and to see if more translation is needed please go ahead.

However, the critical need at the moment is RTL. No one is working on RTL at the moment as far as I know.

Comment From: CodeWithEmad

Hi @OmarIthawi. I haven't done anything in the RTL area in the superset project, but I'll be glad to help.

Comment From: OmarIthawi

Same here @CodeWithEmad, but glad you're willing to help.

Please review the comments in this https://github.com/apache/superset/issues/25258 issue, that's all what we have at the moment.

Comment From: mayankeagle

Hi @OmarIthawi how do I get access to the Superset version which incorporates the RTL feature?

Has it been made part of the Superset latest GA release yet?
Is it under Apache 2.0 license?
Does it also support right to left alignment of what appears inside the charts, e.g. the reference point and Y axis should be on the right side
Does it work through a resource-file?

Comment From: OmarIthawi

@mayankeagle no work has been done on RTL support as far as I know. Only Arabic translations on the LTR User Interface.

Comment From: mayankeagle

@mayankeagle no work has been done on RTL support as far as I know. Only Arabic translations on the LTR User Interface.

Hi @OmarIthawi Ok, thanks. And are the Arabic translations supported on the latest GA release version of Superset, under Apache 2.0 license?

Comment From: OmarIthawi

@mayankeagle, no. The Arabic isn't released yet: https://github.com/apache/superset/releases

It's only available in the main branch.

Comment From: mayankeagle

Hi @OmarIthawi thanks for the confirmation.

Could you please point me to the pull-request for this?

I would like to take a look at all the files that were modified/ added as a part of this and to understand if it includes code-changes or only resource files.

Comment From: OmarIthawi

here you go @mayankeagle https://github.com/apache/superset/pull/29586

Comment From: CodeWithEmad

Hey @OmarIthawi. Just a reminder that Superset uses Flask-AppBuilder and to have full support for the Arabic language, you need to add translations to that project too. I didn't see Arabic translations there.

Comment From: OmarIthawi

Good note, thanks @CodeWithEmad! I think this one has to wait a bit. Superset at Open edX is not very well implemented at the moment and we're not actively using it as we should so translation have stalled.

Comment From: rusackas

Anyone still interested in tackling this? It's been untouched for nearly half a year so I can either close it as stale or move it to an Ideas Discussion.

Comment From: supapo

Anyone still interested in tackling this? It's been untouched for nearly half a year so I can either close it as stale or move it to an Ideas Discussion.