Add RTL support #51376

guan404ming · 2025-06-03T17:17:43Z

Related Issue

Why

to support rtl lang we need to add "dir" attribute in <html>

How

add it dynamically using i18n-next api hook
determine the dir using i18n.dir()
add LocaleProvider align to official tutorial for chakra-ui

Screen.Recording.2025-06-04.at.1.07.49.AM.mov

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

jscheffl

Cool! That looks simple. I thought it is a bit more code needed.

Still I am a bit puzzled that the navbar does not go on the right side, would expect this for consistency. But would leave the vote to some native reader to feedback

pierrejeambrun

Nice.

I also think the navbar should swap right, a simple flex box reverse should do the trick in the base layout.

Also some input have minor issues:

airflow-core/src/airflow/ui/index.html

bbovenzi · 2025-06-04T20:35:32Z

I would like to defer to users like @Dev-iL if the would prefer the nav bar to be moved to the right side too.

eladkal · 2025-06-04T21:09:22Z

Thanks for raising this!
I will test this change combined with the Hebrew translation tommorow

guan404ming · 2025-06-05T15:48:44Z

Personally, I hate it when GUIs are mirrored and I stay away from HE software for that reason alone.

I've noticed the issue of the nav bar and I also saw some comments above. Thus, I think we should listen to native speakers' opinions to decide whether we should also mirror it.

guan404ming · 2025-06-05T15:57:52Z

Also some input have minor issues:

@pierrejeambrun I couldn't find or reproduce this issue on my local machine. Could you tell me more about the detail for this issue? I could diagnose and fix it. Thanks!

pierrejeambrun

In my picture above, some inputs do not have the arrow down icon that is mirrored properly.

Some of them do, but some don't and therefore the text is overlapping with the carret down.

Let me know if you also experience this.

guan404ming · 2025-06-05T16:55:53Z

In my picture above, some inputs do not have the arrow down icon that is mirrored properly.

Some of them do, but some don't and therefore the text is overlapping with the carret down.

Let me know if you also experience this.

I got it but it seems really strange. It would not overlap when I opened it with Chrome but it would be broken when I using Arc Browser to open it. The arrow down icon is not mirrored properly for both them. Diagnosing it currently.

Chrome

Arc

Dev-iL · 2025-06-05T19:38:09Z

Chrome

Did you notice how "MetaDatabase" has the checkmark on the opposite side of the other tags?

Also, in the 2nd chrome screenshot each deopdown seems to be mirrored differently.

eladkal · 2025-06-06T16:03:32Z

I reviewed several pages and it looks good.

Most of the things that don't work properly are due to translations issues so I will address them
There is one thing with strings that start with numbers they are not aligned properly. The number should be first.

jscheffl · 2025-06-09T08:55:49Z

I reviewed several pages and it looks good.

Hi @eladkal Thanks for the review. I was missing a (more) clear statement if switching to RTL means that navbar also need to switch or if it is rather "better"/okay to keep it left. For me it is a bit tstrange to switch all to RTL but keeping the navbar left. But I am not an expert in this topic.

...or @shahar1 do you have an opinion?

guan404ming · 2025-06-09T08:56:04Z

Hi @eladkal @Dev-iL, after my investigation, the select issue is fixed by manual add style for RTL on IndicatorGroup which seems like the chakra-ui issue and I could help open a fix pr to chakra-ui.

I also upgrade our chakra-ui package from 3.17.0 to 3.20.0 version since it has some rtl fixes which would reduce the manual fix above.

Please take another look and let me know if there is anything need modifications, thanks!

Current ui looks like

Screen.Recording.2025-06-09.at.4.39.53.PM.mov

shahar1 · 2025-06-09T09:01:45Z

I reviewed several pages and it looks good.

Hi @eladkal Thanks for the review. I was missing a (more) clear statement if switching to RTL means that navbar also need to switch or if it is rather "better"/okay to keep it left. For me it is a bit tstrange to switch all to RTL but keeping the navbar left. But I am not an expert in this topic.

...or @shahar1 do you have an opinion?

In general, I think that the menu should be on the right - that's how it works in Wikipedia, for example.
Is it complicated to implement?

eladkal · 2025-06-09T09:53:45Z

In general, I think that the menu should be on the right - that's how it works in Wikipedia, for example. Is it complicated to implement?

I agree

guan404ming · 2025-06-09T10:23:00Z

In general, I think that the menu should be on the right - that's how it works in Wikipedia, for example.
Is it complicated to implement?

Sure, that makes sense. it's not complex to implement. It would look like

Dev-iL · 2025-06-09T10:23:02Z

In general, I think that the menu should be on the right - that's how it works in Wikipedia, for example. Is it complicated to implement?

No objections here, it is the known convention after all.

Dev-iL · 2025-06-09T10:24:43Z

Sure, that makes sense. it's not complex to implement. It would look like

You know, I actually prefer this for the English version. Any chance we can make the navbar side user-configurable and not language-specific?

guan404ming · 2025-06-09T10:56:26Z

You know, I actually prefer this for the English version. Any chance we can make the navbar side user-configurable and not language-specific?

Maybe we could open another issue for it to make sure if there are many people love this feature as well. I think it is not complex to implement but this change needs community's support~

eladkal

LGTM

There are more stuff we need to fix but this is a good start. Lets handle them with improvment PRs.

guan404ming requested review from bbovenzi, pierrejeambrun, ryanahamilton, jscheffl and shubhamraj-git as code owners June 3, 2025 17:17

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Jun 3, 2025

guan404ming mentioned this pull request Jun 3, 2025

Add is_rtl flag to supportedLanguages for RTL support (#51187) #51239

Closed

guan404ming changed the title ~~Add rtl support~~ Add RTL support Jun 3, 2025

jscheffl approved these changes Jun 3, 2025

View reviewed changes

pierrejeambrun mentioned this pull request Jun 4, 2025

AIP-38 Add Arabic UI translation #51258

Merged

pierrejeambrun added this to the Airflow 3.1.0 milestone Jun 4, 2025

pierrejeambrun mentioned this pull request Jun 4, 2025

AIP-38 feat: add Hebrew language UI #51038

Merged

3 tasks

pierrejeambrun reviewed Jun 4, 2025

View reviewed changes

airflow-core/src/airflow/ui/index.html Show resolved Hide resolved

pierrejeambrun reviewed Jun 5, 2025

View reviewed changes

eladkal added the type:new-feature Changelog: New Features label Jun 7, 2025

guan404ming force-pushed the support-rtl branch from 0ec769d to dbc38bc Compare June 9, 2025 08:50

guan404ming added 3 commits June 9, 2025 18:16

Add rtl support

151d392

Upgrade Chakra ui and fix select indicator position

b96ad2a

Support mirrored navbar

ba2434f

guan404ming force-pushed the support-rtl branch from dbc38bc to ba2434f Compare June 9, 2025 10:16

Fix dynamic lang change

b284d25

eladkal approved these changes Jun 9, 2025

View reviewed changes

eladkal merged commit d52ce42 into apache:main Jun 9, 2025
43 checks passed

eladkal mentioned this pull request Jun 9, 2025

Support RTL for i18n #51187

Closed

1 task

guan404ming mentioned this pull request Jun 9, 2025

Update Time as always LTR #51543

Merged

Add RTL support #51376

Add RTL support #51376

Uh oh!

Conversation

guan404ming commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issue

Why

How

Uh oh!

jscheffl left a comment

Choose a reason for hiding this comment

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bbovenzi commented Jun 4, 2025

Uh oh!

eladkal commented Jun 4, 2025

Uh oh!

guan404ming commented Jun 5, 2025

Uh oh!

guan404ming commented Jun 5, 2025

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

guan404ming commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Dev-iL commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eladkal commented Jun 6, 2025

Uh oh!

jscheffl commented Jun 9, 2025

Uh oh!

guan404ming commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shahar1 commented Jun 9, 2025

Uh oh!

eladkal commented Jun 9, 2025

Uh oh!

guan404ming commented Jun 9, 2025

Uh oh!

Dev-iL commented Jun 9, 2025

Uh oh!

Dev-iL commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

guan404ming commented Jun 9, 2025

Uh oh!

eladkal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

guan404ming commented Jun 3, 2025 •

edited

Loading

guan404ming commented Jun 5, 2025 •

edited

Loading

Dev-iL commented Jun 5, 2025 •

edited

Loading

guan404ming commented Jun 9, 2025 •

edited

Loading

Dev-iL commented Jun 9, 2025 •

edited

Loading