diff --git a/CHANGELOG.md b/CHANGELOG.md index a5dbdc50e..301033b0b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/post/post.jsx b/src/components/post/post.jsx index 065b53ab4..53e8c539d 100644 --- a/src/components/post/post.jsx +++ b/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 ( @@ -425,7 +426,7 @@ class Post extends Component { comments={props.comments} usersLikedPost={props.usersLikedPost} /> -
+
@@ -288,7 +291,7 @@ export const UserProfileHead = withRouter( />
-
+
{isAuthenticated && !isCurrentUser && ( diff --git a/src/components/user-profile-head.module.scss b/src/components/user-profile-head.module.scss index 7239bab57..cbf303f6b 100644 --- a/src/components/user-profile-head.module.scss +++ b/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 { diff --git a/src/utils/parse-text.js b/src/utils/parse-text.js index b5cc89a6a..ad26fbb9a 100644 --- a/src/utils/parse-text.js +++ b/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); +} diff --git a/styles/shared/post.scss b/styles/shared/post.scss index 3618fd80b..ed34e1b31 100644 --- a/styles/shared/post.scss +++ b/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; + } } } }