remove unicode ltr chars and replace with css (#8826)

2 files changed, 21 insertions, 5 deletions

diff --git a/src/lib/strings/handles.ts b/src/lib/strings/handles.ts
index 02b9943d3..bdac50a56 100644
--- a/src/lib/strings/handles.ts
+++ b/src/lib/strings/handles.ts
@@ -25,10 +25,17 @@ export function isInvalidHandle(handle: string): boolean {
   return handle === 'handle.invalid'
 }
 
-export function sanitizeHandle(handle: string, prefix = ''): string {
+export function sanitizeHandle(
+  handle: string,
+  prefix = '',
+  forceLeftToRight = true,
+): string {
+  const lowercasedWithPrefix = `${prefix}${handle.toLocaleLowerCase()}`
   return isInvalidHandle(handle)
     ? '⚠Invalid Handle'
-    : forceLTR(`${prefix}${handle.toLocaleLowerCase()}`)
+    : forceLeftToRight
+      ? forceLTR(lowercasedWithPrefix)
+      : lowercasedWithPrefix
 }
 
 export interface IsValidHandle {
diff --git a/src/screens/Profile/Header/Handle.tsx b/src/screens/Profile/Header/Handle.tsx
index f52b6d68e..ad82072c2 100644
--- a/src/screens/Profile/Header/Handle.tsx
+++ b/src/screens/Profile/Header/Handle.tsx
@@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isInvalidHandle, sanitizeHandle} from '#/lib/strings/handles'
-import {isIOS} from '#/platform/detection'
+import {isIOS, isNative} from '#/platform/detection'
 import {type Shadow} from '#/state/cache/types'
 import {atoms as a, useTheme, web} from '#/alf'
 import {NewskieDialog} from '#/components/NewskieDialog'
@@ -47,11 +47,20 @@ export function ProfileHeaderHandle({
                 {borderColor: t.palette.contrast_200},
               ]
             : [a.text_md, a.leading_snug, t.atoms.text_contrast_medium],
-          web({wordBreak: 'break-all'}),
+          web({
+            wordBreak: 'break-all',
+            direction: 'ltr',
+            unicodeBidi: 'isolate',
+          }),
         ]}>
         {invalidHandle
           ? _(msg`⚠Invalid Handle`)
-          : sanitizeHandle(profile.handle, '@')}
+          : sanitizeHandle(
+              profile.handle,
+              '@',
+              // forceLTR handled by CSS above on web
+              isNative,
+            )}
       </Text>
     </View>
   )