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

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>
   )