feat: RTL Text Support

[ceenayekta]

User description

SUMMARY

A new property direction has been added to the Theme, and ThemeController is modified to handle an automatic direction update by changing language through the header (LanguagePicker). If the language be in the rtlLanguages constant array, it will now automatically cause the emotion styles become right to left.

export const rtlLanguages = [
  'ar',
  'fa',
  'he',
  'iw',
  'sd',
  'dv',
  'ps',
  'ug',
  'ur',
  'yi',
];

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

https://github.com/user-attachments/assets/05e8a40f-29a3-4478-bf85-daa64e9b1d65

p.s. I'm not sure what's wrong with the preview here. Please download the video. Here's the image anyway:

TESTING INSTRUCTIONS

Add a RTL Language in LANGUAGES object located in /superset/config.py (or your custom config), then after language picker appears on the header, select Example:

LANGUAGES = {
    "en": {"flag": "us", "name": "English"},
    "fa": {"flag": "ir", "name": "Persian"},
}

ADDITIONAL INFORMATION

• [ ] Has associated issue:
• [ ] Required feature flags:
• [x] Changes UI
• [ ] Includes DB Migration (follow approval process in SIP-59)
  • [ ] Migration is atomic, supports rollback & is backwards-compatible
  • [ ] Confirm DB migration upgrade and downgrade tested
  • [ ] Runtime estimates and downtime expectations provided
• [ ] Introduces new feature or API
• [ ] Removes existing feature or API

---

CodeAnt-AI Description

Add right-to-left (RTL) layout support and automatic switching when selecting RTL languages

What Changed

• The app now supports RTL layouts: document direction is set to 'rtl' when enabled, Ant Design receives the direction, and Emotion uses a separate RTL style cache that flips styles for RTL languages.
• Language selection automatically toggles direction: the LanguagePicker detects common RTL language codes (e.g., Arabic, Persian, Hebrew, Urdu) and applies RTL or LTR immediately when the user changes language.
• Theme API and provider expose programmatic direction control so code can change UI direction at runtime, and the default theme includes a direction token set to 'ltr'.
• Visible UI adjustments for RTL: input title cursor/scroll behavior respects RTL, header/title spacing and menu alignment use logical properties so elements stay positioned correctly in RTL, and several components (lists, dropdowns, menus) render without left/right layout glitches.

Impact

✅ Automatic RTL when selecting Arabic/Persian/Hebrew/Urdu ✅ Correct header and title alignment in RTL ✅ Flipped component styles for RTL languages (forms, menus, spacing)

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[korbit-ai[bot]]

Korbit doesn't automatically review large (3000+ lines changed) pull requests such as this one. If you want me to review anyway, use /korbit-review.

[saraburns1]

@ceenayekta @justinpark is this still active? would love to see RTL support soon!

[rusackas]

Looks like this hasn't been updated in quite a while and needs a rebase. Still planning to follow up here @ceenayekta ? It'd be much appreciated.

[hadikhamoud]

hey, I'd be happy to try and follow up here if possible. what's required?

[ceenayekta]

@saraburns1 @hadikhamoud I'll manage to update, rebase and resolve conflicts this week.

[ceenayekta]

@rusackas sure, I'll check this week. Would you share your thoughts on my latest comments for @justinpark 's review comments?

[codeant-ai-for-open-source[bot]]

CodeAnt AI is reviewing your PR.

[codeant-ai-for-open-source[bot]]

Nitpicks 🔍

🔒 No security issues identified

⚡ Recommended areas for review [ ] Possible runtime crash The code determines a base languageCode from locale (splitting on '-') but elsewhere the component still accesses languages[locale]. If locale contains a region (e.g. "en-US") and languages only includes base codes ("en", "fa"), languages[locale] is undefined and will cause a runtime error when rendering the flag icon. Add safe lookup / fallback for language entries. [ ] Missing update after direction change The new setDirection wrapper calls themeController.setDirection(direction) but ThemeController likely does not notify listeners (no call to notify listeners in the controller). That means the ThemeProvider's local state and other listeners may not observe the direction change and the UI may not re-render to reflect RTL/LTR updates. Verify ThemeController.setDirection persists or notifies listeners, or ensure the provider forces a local update after calling the controller. [ ] Missing persistence / notification The new setDirection method mutates globalTheme but does not persist the direction to storage nor notify listeners. As a result direction changes may be lost across reloads and subscribers (UI components) may not be informed of the change. Consider persisting direction and calling notifyListeners() (and/or re-applying theme) so UI updates. [ ] API breaking change The LanguagePicker hook signature now requires a setDirection callback prop. Consumers that call this hook must be updated; otherwise this will cause TypeScript/ runtime errors. Either make the prop optional and guard its use, or update all callers. Validate all usages across the codebase. [ ] Context API mismatch setDirection was added to ThemeContextType. If the Theme provider implementation was not updated to provide this function, consumers will fail to compile or will get undefined at runtime. Verify that the provider implementation, default context value, and all consumers are updated accordingly. [ ] Breaking change The direction property was added as a required field to SupersetSpecificTokens. Making this field mandatory can break existing themes/consumers that don't include it. Consider making it optional or supplying a default value during Theme construction to avoid runtime/type breakage. [ ] Dir attribute not reset When the theme direction flips back from 'rtl' to 'ltr' the code only sets the 'dir' and 'data-direction' attributes for the 'rtl' case and doesn't reset or update them for 'ltr'. This can leave the document in an incorrect state after toggling languages. [ ] RTL scroll/cursor logic possibly targeting wrong element New logic sets sizerRef.current.scrollLeft depending on theme.direction. However, sizerRef is attached to the hidden sizing , not the actual Input element. The span likely doesn't have scroll/caret properties (and the code already guards with setSelectionRange), so RTL scrolling/caret placement may not occur. This can break the intended RTL behavior (cursor movement and scroll) when editing. Consider using a dedicated ref for the real input element.

[codeant-ai-for-open-source[bot]]

CodeAnt AI finished reviewing your PR.

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 67.99%. Comparing base (1127374) to head (64178a1). :warning: Report is 152 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #34629       +/-   ##
===========================================
+ Coverage        0   67.99%   +67.99%     
===========================================
  Files           0      635      +635     
  Lines           0    46827    +46827     
  Branches        0     5082     +5082     
===========================================
+ Hits            0    31840    +31840     
- Misses          0    13717    +13717     
- Partials        0     1270     +1270     

Flag	Coverage Δ
hive	43.71% <ø> (?)
mysql	67.05% <ø> (?)
postgres	67.10% <ø> (?)
presto	47.36% <ø> (?)
python	67.96% <ø> (?)
sqlite	66.81% <ø> (?)
unit	100.00% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.