From 23a3053fd0633f32d4b42f15631511cb6987184a Mon Sep 17 00:00:00 2001
From: Oneric <oneric@oneric.stub>
Date: Sat, 2 Mar 2024 08:12:28 +0100
Subject: [PATCH] [WIP] BiDi, explicit version

up for debate: hashtags

MFM: at least IceShrimp (has public MFM cheatsheet under
/mfm-cheat-sheet) appears to not use Unicode BiDi and
whether by werd browser defaults or expliitly use LTR.

https://tooot.im/@hananc/111987311778765163

https://www.unicode.org/reports/tr9/#Explicit_Directional_Embeddings

https://developer.mozilla.org/en-US/docs/Web/CSS/direction
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi

https://www.w3.org/International/docs/html-bidi-requirements/#br-as-separator

https://drafts.csswg.org/css-writing-modes/#bidi-algo
https://drafts.csswg.org/css-writing-modes/#text-direction
https://html.spec.whatwg.org/multipage/dom.html#requirements-relating-to-the-bidirectional-algorithm
https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering
---
 src/components/mention_link/mention_link.scss        | 10 ++++++++++
 src/components/mentions_line/mentions_line.scss      |  2 ++
 src/components/post_status_form/post_status_form.vue |  1 +
 src/components/rich_content/rich_content.scss        |  1 +
 src/components/status/status.scss                    |  1 +
 src/components/status_body/status_body.scss          |  2 ++
 src/components/user_card/user_card.scss              |  2 ++
 src/components/user_profile/user_profile.vue         |  1 +
 8 files changed, 20 insertions(+)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index cbc68d17..79543a61 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -13,6 +13,16 @@
     border-radius: 2px;
   }
 
+  .userName {
+    unicode-bidi: isolate;
+    direction: unset;
+  }
+
+  .serverName {
+    unicode-bidi: isolate;
+    direction: ltr;
+  }
+
   .mention-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     width: 1.5em;
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 9a622e75..8683c180 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,5 +1,7 @@
 .MentionsLine {
   word-break: break-all;
+  unicode-bidi: isolate;
+  direction: ltr;
 
   .mention-link:not(:first-child)::before {
     content: ' ';
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 74663fd7..d91fd95f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -581,6 +581,7 @@
     height: calc(var(--post-line-height) * 1em);
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
+    unicode-bidi: plaintext;
 
     &.scrollable-form {
       overflow-y: auto;
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 63df7d74..35bcc155 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -18,6 +18,7 @@
 
   p {
     margin: 0 0 1em 0;
+    unicode-bidi: inherit;
   }
 
   p:last-child {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index cd65b890..3a83f09b 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -92,6 +92,7 @@
     flex-shrink: 1;
     margin-right: 0.4em;
     text-overflow: ellipsis;
+    unicode-bidi: isolate;
 
     --_still_image-label-scale: 0.25;
     --emoji-size: 14px;
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 434cb482..6f8a29b6 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -13,6 +13,7 @@
   .emoji {
     --_still_image-label-scale: 0.5;
     --emoji-size: 38px;
+    unicode-bidi: isolate;
   }
 
   .emoji:hover {
@@ -52,6 +53,7 @@
     word-wrap: break-word;
     word-break: break-word;
     line-height: var(--post-line-height);
+    unicode-bidi: plaintext;
   }
 
   .summary {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 0a5e744e..1b3392e8 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -58,6 +58,7 @@
     line-height: 1.3;
     padding: 1em;
     margin: 0;
+    unicode-bidi: plaintext;
 
     a {
       color: $fallback--link;
@@ -190,6 +191,7 @@
     flex: 1 1 auto;
     margin-right: 1em;
     font-size: 1.1em;
+    unicode-bidi: isolate;
   }
 
   .bottom-line {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 5465778a..9692d404 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -259,6 +259,7 @@
         overflow: hidden;
         padding: 0.5em 1.5em;
         box-sizing: border-box;
+        unicode-bidi: plaintext;
       }
 
       .user-profile-field-validated {