Superset does not support Arabic language -RTL- layout

[ca5p3r]

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.

[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.

[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.

[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.

[bmtcril]

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

[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.

[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!

[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.

[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!

[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!!

[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

[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.

[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

[OmarIthawi]

Status:

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

[CodeWithEmad]

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

[OmarIthawi]

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