Enhances the handling of right-to-left (RTL) text in chat messages and sidebar titles by implementing automatic text direction detection.
Key Changes:
Added dir="auto" attribute to:
Chat message text elements
Sidebar chat titles
Fixed RTL-specific styling:
Changed blockquote borders from border-left to border-inline-start
Updated table header alignment from text-align: right to text-align: start
Technical Details:
There are two approaches to handle bi-directional text:
Using unicode-bidi: plain-text on the text container element (doen't work on parent element)
Adding dir="auto" attribute to the parent element (chosen approach)
Testing:
To verify these changes, use the following prompt:
write please a sample headers (level 1,2,3), text (bold/italic), list, numbered list, quotes, table, code
write each example in Hebrew
dont output markdown in code block
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/10206
**Author:** [@ttv20](https://github.com/ttv20)
**Created:** 2/17/2025
**Status:** ✅ Merged
**Merged:** 2/17/2025
**Merged by:** [@tjbck](https://github.com/tjbck)
**Base:** `dev` ← **Head:** `patch-1`
---
### 📝 Commits (7)
- [`ab94017`](https://github.com/open-webui/open-webui/commit/ab94017e3a5c2c2f7582cf1f716387824861e09c) Auto text direction (fix for RTL) in most cases
- [`b73b834`](https://github.com/open-webui/open-webui/commit/b73b8343d58e9a29c4b6c4f991cb4015e4c8d966) fix table header align on rtl
- [`834617a`](https://github.com/open-webui/open-webui/commit/834617ab9139f628d761011d3e0a3a72f60fc1e2) fix blockquote border line direction in RTL
- [`0888ddd`](https://github.com/open-webui/open-webui/commit/0888ddde7ccb201dae493c13378b7987ccbfa3fc) Fix card title direction and alignment (for RTL)
- [`93590d2`](https://github.com/open-webui/open-webui/commit/93590d224be7279c4fb7ef37443d456165023d55) Merge branch 'dev' into patch-1
- [`d26569f`](https://github.com/open-webui/open-webui/commit/d26569f63660629d9a596b058cdcb73fce90e079) Update ChatItem.svelte: Revert text-align for download button in rtl
- [`8d14934`](https://github.com/open-webui/open-webui/commit/8d149348a02d79a5f4f9aaea6fc44623d665f115) Update MarkdownTokens.svelte: Revert text-align for download button in rtl
### 📊 Changes
**3 files changed** (+8 additions, -8 deletions)
<details>
<summary>View changed files</summary>
📝 `src/app.css` (+2 -2)
📝 `src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte` (+5 -5)
📝 `src/lib/components/layout/Sidebar/ChatItem.svelte` (+1 -1)
</details>
### 📄 Description
Enhances the handling of right-to-left (RTL) text in chat messages and sidebar titles by implementing automatic text direction detection.
Key Changes:
1. Added `dir="auto"` attribute to:
- Chat message text elements
- Sidebar chat titles
2. Fixed RTL-specific styling:
- Changed blockquote borders from `border-left` to `border-inline-start`
- Updated table header alignment from `text-align: right` to `text-align: start`
Technical Details:
There are two approaches to handle bi-directional text:
- Using `unicode-bidi: plain-text` on the text container element (doen't work on parent element)
- Adding `dir="auto"` attribute to the parent element (chosen approach)
Testing:
To verify these changes, use the following prompt:
```
write please a sample headers (level 1,2,3), text (bold/italic), list, numbered list, quotes, table, code
write each example in Hebrew
dont output markdown in code block
```
For a live example of the behavior, see: [https://codepen.io/ssfrzglx-the-lessful/pen/KwKdRXP](https://codepen.io/ssfrzglx-the-lessful/pen/KwKdRXP)
Before:
After:
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/10206
Author: @ttv20
Created: 2/17/2025
Status: ✅ Merged
Merged: 2/17/2025
Merged by: @tjbck
Base:
dev← Head:patch-1📝 Commits (7)
ab94017Auto text direction (fix for RTL) in most casesb73b834fix table header align on rtl834617afix blockquote border line direction in RTL0888dddFix card title direction and alignment (for RTL)93590d2Merge branch 'dev' into patch-1d26569fUpdate ChatItem.svelte: Revert text-align for download button in rtl8d14934Update MarkdownTokens.svelte: Revert text-align for download button in rtl📊 Changes
3 files changed (+8 additions, -8 deletions)
View changed files
📝
src/app.css(+2 -2)📝
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte(+5 -5)📝
src/lib/components/layout/Sidebar/ChatItem.svelte(+1 -1)📄 Description
Enhances the handling of right-to-left (RTL) text in chat messages and sidebar titles by implementing automatic text direction detection.
Key Changes:
Added
dir="auto"attribute to:Fixed RTL-specific styling:
border-lefttoborder-inline-starttext-align: righttotext-align: startTechnical Details:
There are two approaches to handle bi-directional text:
unicode-bidi: plain-texton the text container element (doen't work on parent element)dir="auto"attribute to the parent element (chosen approach)Testing:
To verify these changes, use the following prompt:
For a live example of the behavior, see: https://codepen.io/ssfrzglx-the-lessful/pen/KwKdRXP
Before:
After:
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.