Skip to content

Commit afa9f64

Browse files
authored
Fix of wrong alignment with mixed RTL and LTR text (#743)
<!-- Please read https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before submitting your pull request --> ### 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 - [x] 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: - [x] My code follows the style guidelines of this project - [x] 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 - [x] 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). <!-- No AI was used in the creation of this code. -->
2 parents 4172add + b495a2a commit afa9f64

4 files changed

Lines changed: 9 additions & 1 deletion

File tree

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
default: patch
3+
---
4+
5+
# Fix RTL/LTR mixed text formatting and alignment in messages

src/app/components/message/Reply.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ export const Reply = as<'div', ReplyProps>(
292292
onClick={replyEvent !== null && !isBlockedSender ? onClick : undefined}
293293
>
294294
{replyEvent !== undefined && !isPendingDecrypt ? (
295-
<Text size="T300" truncate>
295+
<Text size="T300" truncate style={{ unicodeBidi: 'plaintext' }}>
296296
{replyContent}
297297
</Text>
298298
) : (

src/app/components/message/layout/Base.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
4848
className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
4949
{...props}
5050
ref={ref}
51+
dir="auto"
5152
>
5253
{children}
5354
</Text>

src/app/components/message/layout/layout.css.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,8 @@ export const PronounPill = style({
229229

230230
export const MessageTextBody = recipe({
231231
base: {
232+
unicodeBidi: 'plaintext',
233+
alignSelf: 'start',
232234
wordBreak: 'break-word',
233235
fontSize: '1rem !important', // Override folds Text component to enable page zoom scaling
234236
},

0 commit comments

Comments
 (0)