[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

@@ -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;

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: ' ';

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;

src/components/rich_content/rich_content.scss

@@ -18,6 +18,7 @@
 
   p {
     margin: 0 0 1em 0;
+    unicode-bidi: inherit;
   }
 
   p:last-child {

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;

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 {

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 {

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 {