Detect RTL text in events and adjust the text rendering (#6994)

* Add `TextDirection.detect` to check the overall LTR or RTL direction of texts

* Calculate if the contents of events have a different direction than the layout to reverse the layout direction if needed.

LTR content, RTL text -> mismatched direction, reverse.
RTL content, LTR text -> also mismatched, reversed too.

* Measure text in `measureLastTextLine` based on its direction, not the layout's,
to avoid some issues with incorrectly calculated free space.

* Tweak the paddings in `TimelineEventTimestampView` a bit if the layout and text directions don't match

* Update screenshots

---------

Co-authored-by: ElementBot <android@element.io>

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineEventTimestampView.kt

@@ -43,6 +43,7 @@ fun TimelineEventTimestampView(
     event: TimelineItem.Event,
     eventSink: (TimelineEvent.TimelineItemEvent) -> Unit,
     modifier: Modifier = Modifier,
+    isLayoutDirectionMismatched: Boolean = false,
 ) {
     val formattedTime = event.sentTime
     val hasError = event.failedToSend
@@ -77,9 +78,16 @@ fun TimelineEventTimestampView(
             else -> Modifier
         }
     }
+
+    val padding = if (!isLayoutDirectionMismatched) {
+        PaddingValues(start = TimelineEventTimestampViewDefaults.spacing)
+    } else {
+        PaddingValues(end = TimelineEventTimestampViewDefaults.spacing)
+    }
+
     Row(
         modifier = Modifier
-            .padding(PaddingValues(start = TimelineEventTimestampViewDefaults.spacing))
+            .padding(padding)
             // For a better click target, make the corners rounded
             .clip(RoundedCornerShape(8.dp))
             .then(clickableModifier)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -39,7 +39,9 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.LocalViewConfiguration
 import androidx.compose.ui.platform.ViewConfiguration
 import androidx.compose.ui.res.pluralStringResource
@@ -49,9 +51,12 @@ import androidx.compose.ui.semantics.hideFromAccessibility
 import androidx.compose.ui.semantics.isTraversalGroup
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.traversalIndex
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDirection
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import androidx.constraintlayout.compose.ConstrainScope
@@ -68,12 +73,14 @@ import io.element.android.features.messages.impl.timeline.components.receipt.Rea
 import io.element.android.features.messages.impl.timeline.components.receipt.TimelineItemReadReceiptView
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
+import io.element.android.features.messages.impl.timeline.model.TimelineItemReactions
 import io.element.android.features.messages.impl.timeline.model.TimelineItemThreadInfo
 import io.element.android.features.messages.impl.timeline.model.bubble.BubbleState
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLocationContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStickerContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVoiceContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
@@ -91,6 +98,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.modifiers.niceClickable
 import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewWithExtraLargeHeight
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.preview.USER_NAME_ALICE
 import io.element.android.libraries.designsystem.swipe.SwipeableActionsState
@@ -106,6 +114,7 @@ import io.element.android.libraries.matrix.api.timeline.item.EmbeddedEventInfo
 import io.element.android.libraries.matrix.api.timeline.item.ThreadSummary
 import io.element.android.libraries.matrix.api.timeline.item.event.EventOrTransactionId
 import io.element.android.libraries.matrix.api.timeline.item.event.MessageContent
+import io.element.android.libraries.matrix.api.timeline.item.event.MessageShield
 import io.element.android.libraries.matrix.api.timeline.item.event.ProfileDetails
 import io.element.android.libraries.matrix.api.timeline.item.event.TextMessageType
 import io.element.android.libraries.matrix.api.timeline.item.event.getAvatarUrl
@@ -122,7 +131,9 @@ import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.ui.strings.CommonPlurals
 import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.libraries.ui.utils.a11y.isTalkbackActive
+import io.element.android.libraries.ui.utils.text.detect
 import io.element.android.wysiwyg.link.Link
+import kotlinx.collections.immutable.persistentListOf
 import kotlinx.coroutines.launch
 import kotlin.math.abs
 import kotlin.math.roundToInt
@@ -649,7 +660,22 @@ private fun MessageEventBubbleContent(
                             .padding(horizontal = 4.dp, vertical = 2.dp)
                     )
                 }
-            TimestampPosition.Aligned ->
+            TimestampPosition.Aligned -> @Composable {
+                val originalLayoutDirection = LocalLayoutDirection.current
+                // Detect if the direction of the text content (if any) does not match the layout direction, to place the content and timestamp correctly
+                val contentDirection = if (event.content is TimelineItemTextContent) {
+                    remember(event.content.body) {
+                        when (TextDirection.detect(event.content.body)) {
+                            TextDirection.Ltr, TextDirection.ContentOrLtr -> LayoutDirection.Ltr
+                            TextDirection.Rtl, TextDirection.ContentOrRtl -> LayoutDirection.Rtl
+                            else -> originalLayoutDirection
+                        }
+                    }
+                } else {
+                    originalLayoutDirection
+                }
+
+                CompositionLocalProvider(LocalLayoutDirection provides contentDirection) {
                     ContentAvoidingLayout(
                         modifier = modifier,
                         // The spacing is negative to make the content overlap the empty space at the start of the timestamp
@@ -658,14 +684,20 @@ private fun MessageEventBubbleContent(
                         shrinkContent = canShrinkContent,
                         content = { content(this::onContentLayoutChange) },
                         overlay = {
+                            // Use the original layout direction for the timestamp
+                            CompositionLocalProvider(LocalLayoutDirection provides originalLayoutDirection) {
                                 TimelineEventTimestampView(
                                     event = event,
                                     eventSink = eventSink,
+                                    isLayoutDirectionMismatched = originalLayoutDirection != contentDirection,
                                     modifier = Modifier
                                         .padding(horizontal = 8.dp, vertical = 4.dp)
                                 )
                             }
+                        }
                     )
+                }
+            }
             TimestampPosition.Below ->
                 Column(modifier) {
                     content {}
@@ -879,6 +911,149 @@ internal fun TimelineItemEventRowWithThreadSummaryPreview() = ElementPreview {
     }
 }
 
+@PreviewWithExtraLargeHeight
+@Composable
+internal fun TimelineItemEventRowRtlContentPreview() = ElementPreview {
+    Column {
+        Text(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.LightGray)
+                .padding(8.dp),
+            text = "LTR layout direction",
+            textAlign = TextAlign.Center,
+            style = ElementTheme.typography.fontHeadingMdBold,
+        )
+        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
+            sequenceOf(false, true).forEach { isMine ->
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "ظَة وَدَاع يَسْتَغْرِب فِيهَ"
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.First,
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "ظَة وَدَاع يَسْتَغْرِب فِيهَ",
+                            isEdited = true,
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Middle,
+                        messageShield = MessageShield.UnknownDevice(isCritical = true),
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "ظَة وَدَاع \nيَسْتَغْرِب فِيهَ"
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Middle,
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "ظَة وَدَاع يَسْتَغْرِب فِيهَا اَلشَّاعِر أَنْ لَا يَبْكِي مِنْ أَلَم اَلْفِرَاق،" +
+                                " وَيَصِف حَالَة اَلْمُودِعِينَ"
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Last,
+                    )
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Text(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.LightGray)
+                .padding(8.dp),
+            text = "RTL layout direction",
+            textAlign = TextAlign.Center,
+            style = ElementTheme.typography.fontHeadingMdBold,
+        )
+
+        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
+            sequenceOf(false, true).forEach { isMine ->
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "ظَة وَدَاع يَسْتَغْرِب فِيهَا اَلشَّاعِر أَنْ لَا يَبْكِي مِنْ أَلَم اَلْفِرَاق،" +
+                                " وَيَصِف حَالَة اَلْمُودِعِينَ",
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.First,
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "Testing\nLTR Line\nBreaks.",
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Middle,
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "Testing a very long LTR text in an RTL layout."
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Middle,
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "Testing LTR in RTL layout.",
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Last,
+                        messageShield = MessageShield.UnknownDevice(isCritical = true),
+                    )
+                )
+                ATimelineItemEventRow(
+                    event = aTimelineItemEvent(
+                        senderDisplayName = "Sender with a super long name that should ellipsize",
+                        isMine = isMine,
+                        content = aTimelineItemTextContent(
+                            body = "Testing LTR in RTL layout.",
+                            isEdited = true,
+                        ),
+                        timelineItemReactions = TimelineItemReactions(persistentListOf()),
+                        groupPosition = TimelineItemGroupPosition.Last,
+                        messageShield = MessageShield.UnknownDevice(isCritical = true),
+                    )
+                )
+            }
+        }
+    }
+}
+
 @PreviewsDayNight
 @Composable
 internal fun ThreadSummaryViewPreview() {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/layout/ContentAvoidingLayout.kt

@@ -15,13 +15,13 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.Layout
-import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.TextLayoutResult
+import androidx.compose.ui.text.style.ResolvedTextDirection
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpOffset
-import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.core.data.tryOrNull
 import io.element.android.libraries.designsystem.text.roundToPx
 import io.element.android.wysiwyg.compose.EditorStyledText
 import kotlin.math.max
@@ -149,13 +149,13 @@ object ContentAvoidingLayout {
         onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit,
         extraWidth: Dp = 0.dp,
     ): ((TextLayoutResult) -> Unit) {
-        val layoutDirection = LocalLayoutDirection.current
         val extraWidthPx = extraWidth.roundToPx()
         return { textLayout: TextLayoutResult ->
             // We need to add the external extra width so it's not taken into account as 'free space'
-            val lastLineWidth = when (layoutDirection) {
-                LayoutDirection.Ltr -> textLayout.getLineRight(textLayout.lineCount - 1).roundToInt()
-                LayoutDirection.Rtl -> textLayout.getLineLeft(textLayout.lineCount - 1).roundToInt()
+            val textDirection = tryOrNull { textLayout.getParagraphDirection(0) }
+            val lastLineWidth = when (textDirection) {
+                ResolvedTextDirection.Rtl -> textLayout.getLineLeft(textLayout.lineCount - 1).roundToInt()
+                else -> textLayout.getLineRight(textLayout.lineCount - 1).roundToInt()
             }
             val lastLineHeight = textLayout.getLineBottom(textLayout.lineCount - 1).roundToInt()
             onContentLayoutChange(

gradle/libs.versions.toml

@@ -130,6 +130,7 @@ androidx_compose_material3 = { module = "androidx.compose.material3:material3",
 androidx_compose_material3_windowsizeclass = { module = "androidx.compose.material3:material3-window-size-class" }
 androidx_compose_material3_adaptive = "androidx.compose.material3:material3-adaptive-android:1.0.0-alpha06"
 androidx_compose_ui = { module = "androidx.compose.ui:ui" }
+androidx_compose_ui_text = { module = "androidx.compose.ui:ui-text" }
 androidx_compose_ui_tooling = { module = "androidx.compose.ui:ui-tooling" }
 androidx_compose_ui_tooling_preview = { module = "androidx.compose.ui:ui-tooling-preview" }
 androidx_compose_ui_test_manifest = { module = "androidx.compose.ui:ui-test-manifest" }

libraries/ui-utils/build.gradle.kts

@@ -19,6 +19,7 @@ android {
 dependencies {
     implementation(projects.libraries.androidutils)
     implementation(projects.services.toolbox.impl)
+    implementation(libs.androidx.compose.ui.text)
 
     testCommonDependencies(libs)
 }

libraries/ui-utils/src/main/kotlin/io/element/android/libraries/ui/utils/text/TextDirection.kt

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.ui.utils.text
+
+import androidx.compose.ui.text.style.TextDirection
+
+/**
+ * Detect if a text is RTL or not, based on its content.
+ */
+fun TextDirection.Companion.detect(text: String): TextDirection {
+    return if (text.any(::isRtlChar)) TextDirection.Rtl else TextDirection.Ltr
+}
+
+/**
+ * Detect if a character is an RTL character or not, based on its Unicode directionality.
+ */
+fun isRtlChar(char: Char): Boolean = when (Character.getDirectionality(char)) {
+    Character.DIRECTIONALITY_RIGHT_TO_LEFT,
+    Character.DIRECTIONALITY_RIGHT_TO_LEFT_ARABIC,
+    Character.DIRECTIONALITY_RIGHT_TO_LEFT_EMBEDDING,
+    Character.DIRECTIONALITY_RIGHT_TO_LEFT_OVERRIDE -> true
+    else -> false
+}