Correct the direction of the Persian language text

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.128.0] - Not released
 ### Fixed
 - Fix lightbox for some old attachments that have no sizes in API responses.
+- Fix the text direction for Persian language content.
 ### Added
 - Drafts. When a user creates/edits a post or comment, the entered text is
   automatically saved to localStorage. This prevents accidental loss of content
@@ -24,6 +25,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   User can disable drafts saving on the Settings / Privacy page. In this case,
   drafts will still work, but will not be saved to persistent storage and will
   be lost on tab close/reload.
+### Changed
+- RTL texts are now right-aligned in the post bodies and in the user
+  descriptions.
 
 ## [1.127.3] - 2024-02-14
 ### Fixed

src/components/post/post.jsx

@@ -14,7 +14,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 
 import { pluralForm } from '../../utils';
-import { getFirstLinkToEmbed } from '../../utils/parse-text';
+import { getFirstLinkToEmbed, getTextAlign } from '../../utils/parse-text';
 import { canonicalURI } from '../../utils/canonical-uri';
 import { READMORE_STYLE_COMPACT } from '../../utils/frontend-preferences-options';
 import { postReadmoreConfig } from '../../utils/readmore-config';
@@ -384,6 +384,7 @@ class Post extends Component {
     const linkToEmbed = getFirstLinkToEmbed(props.body);
 
     const { role, postLabel } = this.getAriaLabels();
+    const postText = getTextAlign(props.body) ? 'post-text rtl' : 'post-text';
 
     return (
       <PostProvider id={this.props.id}>
@@ -425,7 +426,7 @@ class Post extends Component {
                       comments={props.comments}
                       usersLikedPost={props.usersLikedPost}
                     />
-                    <div className="post-text">
+                    <div className={postText}>
                       <PieceOfText
                         text={props.body}
                         readMoreStyle={props.readMoreStyle}

src/components/user-profile-head.jsx

@@ -31,6 +31,7 @@ import {
   enableBansInGroup,
 } from '../redux/action-creators';
 import { USERNAME } from '../utils/hide-criteria';
+import { getTextAlign } from '../utils/parse-text';
 import { withKey } from './with-key';
 import { UserPicture } from './user-picture';
 import { Throbber } from './throbber';
@@ -263,6 +264,8 @@ export const UserProfileHead = withRouter(
 
     const isAuthenticated = !!currentUser;
 
+    const postText = `${styles.description}${getTextAlign(user.description) ? ` ${styles.rtl}` : ''}`;
+
     return (
       <div className={styles.profile} role="region">
         <div className={styles.avatar}>
@@ -288,7 +291,7 @@ export const UserProfileHead = withRouter(
             />
           </div>
         </div>
-        <div className={styles.description}>
+        <div className={postText}>
           <PieceOfText text={user.description} isExpanded={true} />
         </div>
         {isAuthenticated && !isCurrentUser && (

src/components/user-profile-head.module.scss

@@ -99,9 +99,17 @@ $actions-padding: 0.75em;
   grid-area: description;
   margin-top: 0.66em;
 
+  &.rtl {
+    text-align: right;
+  }
+
   &:empty {
     display: none;
   }
+
+  & :global(.Linkify) {
+    display: block;
+  }
 }
 
 .stats {

src/utils/parse-text.js

@@ -1,14 +1,14 @@
 /* global CONFIG */
 import {
-  withTexts,
+  arrows,
   combine,
-  hashtags,
   emails,
-  mentions,
   foreignMentions,
-  links,
-  arrows,
+  hashtags,
   LINK,
+  links,
+  mentions,
+  withTexts,
 } from 'social-text-tokenizer';
 
 import { linkHref } from 'social-text-tokenizer/prettifiers';
@@ -175,3 +175,8 @@ for (const srv of foreignMentionServices) {
     shortCodeToService[code] = srv;
   }
 }
+
+export function getTextAlign(char) {
+  const persianRegex = /[\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF]/g;
+  return persianRegex.test(char);
+}

styles/shared/post.scss

@@ -83,6 +83,10 @@ $post-line-height: rem(20px);
       font-size: rem(16px);
       line-height: $post-line-height;
 
+      &.rtl {
+        text-align: right;
+      }
+
       &.modern {
         max-height: 5 * $post-line-height;
         overflow-y: hidden;
@@ -98,6 +102,10 @@ $post-line-height: rem(20px);
         }
       }
 
+      .Linkify {
+        display: block;
+      }
+
       a {
         color: #000088;
       }
@@ -427,6 +435,10 @@ $post-line-height: rem(20px);
 
       font-size: rem(21px);
       line-height: rem(26px);
+
+      &.rtl {
+        text-align: right;
+      }
     }
   }
 }