Skip to content

Fix of wrong alignment with mixed RTL and LTR text#743

Open
sinasadeghi83 wants to merge 3 commits intoSableClient:devfrom
sinasadeghi83:rtl-ltr-mixed
Open

Fix of wrong alignment with mixed RTL and LTR text#743
sinasadeghi83 wants to merge 3 commits intoSableClient:devfrom
sinasadeghi83:rtl-ltr-mixed

Conversation

@sinasadeghi83
Copy link
Copy Markdown

@sinasadeghi83 sinasadeghi83 commented May 5, 2026

Description

This PR resolves formatting and alignment issues with mixed RTL (Right-to-Left) and LTR (Left-to-Right) text within messages. Previously, mixed text direction caused display inconsistencies in the main message body and the reply content area.

Changes made:

  • Added dir="auto" to the base message Text component, allowing the browser to automatically determine the base text direction according to the first strongly-typed character of the message.
  • Applied unicode-bidi: plaintext to the message content CSS and the Text component inside the reply content. This ensures the browser dynamically evaluates and handles the text direction based on the actual characters used rather than inheriting the container's direction.
  • Set align-self: start on the message content. This ensures that even for RTL messages, the content block anchors appropriately to the left side (start) of the view, while still preserving the correct internal text direction.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

AI disclosure:

  • Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
  • Fully AI generated (explain what all the generated code does in moderate detail).

Copilot AI review requested due to automatic review settings May 5, 2026 10:27
@sinasadeghi83 sinasadeghi83 requested review from 7w1 and hazre as code owners May 5, 2026 10:27
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses display issues when message content contains a mix of RTL and LTR text by ensuring text direction is resolved from the actual characters rather than inherited container direction, and by adjusting how the message text block aligns within its layout.

Changes:

  • Applied unicode-bidi: plaintext to message body styling so mixed-direction text is rendered with correct bidirectional behavior.
  • Applied unicode-bidi: plaintext to the reply preview Text component to keep reply content directionally correct.
  • Added align-self: start to the main message text body recipe to stabilize content alignment in mixed RTL/LTR scenarios.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
src/app/components/message/Reply.tsx Adds unicode-bidi: plaintext to reply preview text rendering to improve mixed RTL/LTR display.
src/app/components/message/layout/layout.css.ts Updates the message text body recipe to use unicode-bidi: plaintext and align-self: start for better mixed-direction formatting/alignment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@sinasadeghi83 sinasadeghi83 changed the title Rtl ltr mixed Fix of wrong alignment with mixed RTL and LTR text May 5, 2026
@7w1
Copy link
Copy Markdown
Member

7w1 commented May 7, 2026

Hey, thanks for contributing! Could you write a changeset as described here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants