mirror of
https://github.com/open-webui/open-webui.git
synced 2026-11-12 14:45:38 -06:00
feat: RTL support #871
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/open-webui#871
Reference in New Issue
Block a user
Originally created by @liorkesos on GitHub (May 9, 2024).
Is your feature request related to a problem? Please describe.
To enable multi-lingual support for Arabic , hebrew , Farsi etc most apps have RTL capabilities.
This is needed for optimal experience for these languages
Describe the solution you'd like
The CSS implementation needs to know that certain languages should have a RTL layout
@justinh-rahb commented on GitHub (May 9, 2024):
Great idea, a PR would be welcomed!
@liorkesos commented on GitHub (May 12, 2024):
I'll issue a PR for the hebrew translation and see how I can bring them both to a stage where they give a good hebrew user experience.
@liorkesos commented on GitHub (May 13, 2024):
Basic RTL can be easily added if we map certain languages to RTL and than push dir="RTL" to the HTML tag.
That does a decent job (I checked it in my browser)
tailwind implicit RTL support lets us yuse the rtl and ltr modifiers.
The only thing I don't know is how to inject the class or attribute based on a certain trigger (choice of lang)
If anybody can give me the basic direction I can attempt to implement.
@LebToki commented on GitHub (May 14, 2024):
Here's a possible solution:
First, you need to detect the chosen language and store it in a variable.
You can use the navigator.language property or a library like i18n-js to detect the language.
Once you have the chosen language, you can use JavaScript to add the dir attribute to the HTML tag.
You can use the setAttribute method to add the attribute.
To use the Tailwind classes, you need to add the rtl or ltr class to the HTML tag based on the chosen language. You can use the classList.add method to add the class.
Here's some code to get you started:
// Detect the chosen language
const language = navigator.language || navigator.userLanguage;
// Add the dir attribute to the HTML tag
document.documentElement.setAttribute('dir', language === 'ar' || language === 'he' ? 'rtl' : 'ltr');
// Add the Tailwind classes
document.documentElement.classList.add(language === 'ar' || language === 'he' ? 'rtl' : 'ltr');
This is also try that then we can pass font-family and css property to get things shape up
@idomamia commented on GitHub (May 15, 2024):
Hey, I've recently started developing something similar.
In the settings, under the "Interface" section, I implemented a toggle button that allows users to switch between LTR and RTL layouts.
Additionally, I thought it would be useful to restrict the RTL layout to only apply to the Chat section (Code blocks will always remain LTR). What are your thoughts on this?
Here's a gif of my implementation:
@endlessblink commented on GitHub (Dec 8, 2024):
Is this something that has been implemented yet?
@merrime-n commented on GitHub (May 1, 2025):
I found the toggle button in user settings and it works. Is there an environment variable so that we can have a default chat direction for the whole Open WebUI instance?