freefeed-react-client icon indicating copy to clipboard operation
freefeed-react-client copied to clipboard

Improve Right-to-Left Rendering for Persian (Farsi) Text

Open Mazafard opened this issue 5 months ago • 15 comments

Persian (Farsi) is a right-to-left (RTL) language, and currently, text in Farsi does not render correctly in all parts of the interface. Specifically, lines of text start from the left, rather than the right, which breaks the natural flow and readability of the language.

We’ve previously discussed this and made some related commits, but to move forward effectively, we need to align on the best strategy for handling RTL rendering across the board.

Expected (Correct RTL rendering): Image Image

Current (Incorrect LTR rendering):

Image Image

I’m happy to provide more specific examples or assist with testing if needed

Mazafard avatar Jul 18 '25 09:07 Mazafard

Is it possible to implement this without knowledge of language? Because, currently, freefeed doesn't have such knowledge.

There are some plans for adding detection of language to the code, but we're not there yet

indeyets avatar Jul 18 '25 09:07 indeyets

@Mazafard so you suggest to right-align post texts, but keep the comment texts left-aligned?

davidmz avatar Jul 18 '25 09:07 davidmz

I tried this once (https://freefeed.net/davidmz/512bea, I can reproduce that version), but didn't get a positive reaction...

davidmz avatar Jul 18 '25 09:07 davidmz

Ah, here it is: https://github.com/FreeFeed/freefeed-react-client/pull/1671 You can try on the test instance: https://freefeed-freefeed-react-client-preview-pr-1671.surge.sh/

davidmz avatar Jul 18 '25 19:07 davidmz

@Mazafard, could you comment on that?

davidmz avatar Jul 23 '25 11:07 davidmz

@davidmz Yes, certainly. If there’s no urgency, I’ll review it over the weekend

Mazafard avatar Jul 23 '25 11:07 Mazafard

Is it possible to implement this without knowledge of language? Because, currently, freefeed doesn't have such knowledge.

Browsers handle direction well using dir="auto", no need for explicit language detection at this stage.

@Mazafard so you suggest to right-align post texts, but keep the comment texts left-aligned?

Yes, for now that’s the most practical solution, improves RTL readability without disrupting the overall flow.

Ah, here it is: #1671 You can try on the test instance: https://freefeed-freefeed-react-client-preview-pr-1671.surge.sh/

Yes, I’ve seen it. It works correctly and is a solid first step. We can iterate on the layout design later.

Mazafard avatar Jul 27 '25 00:07 Mazafard

@Mazafard I'd like to invite you to test the version at https://frf-rtl-2025.surge.sh/. It uses our main backend, so you will be able to test the display of actual posts.

In this version, the text of RTL posts is right-aligned, but also the entire post body layout, including attachments and avatar, is right-aligned too. I think it looks good and should be easy to read.

I haven't touched everything starting from the date line (likes, comments…), it's still aligned to the left.

davidmz avatar Jul 30 '25 11:07 davidmz

You did it perfect and bug-less. In my opinion, any change to the structure and layout of the timeline adds a new layer of complexity that makes it harder to maintain.

Take a look at these screenshots to see how the new structure might introduce new issues :(

Image Image

Compared to the previous structure you had designed, that design was safer, and we could gradually add features on top of it to control the entire feed.

Mazafard avatar Jul 30 '25 13:07 Mazafard

Is that too radical?:))

My past version didn't get much support, mainly because of the display of short texts: https://freefeed.net/davidmz/512bea.

Yes, if the feed has both LTR and RTL posts, my new template might look strange, but I think it's a matter of habit. And then we can think step by step about the date line, likes and comments.

davidmz avatar Jul 30 '25 14:07 davidmz

I don’t think it was about acceptance. Personally, I saw your original change as solid and didn’t notice any issues, even with short Persian posts, it looked fine within the layout.

If it’s about habit, that’s understandable. Sometimes people push back on changes just to engage, not necessarily because something’s wrong.

From my side, the initial version worked well. Other platforms also display short RTL texts this way without shifting action elements, and it feels natural.

Mazafard avatar Jul 30 '25 20:07 Mazafard

Ok, one more question then. What you think about the arashi's remark (https://freefeed.net/davidmz/512bea#c06f)?

نمیشه متن فید همون چپ بمونه ولی راستچین بشه ؟

As far as I understand, the idea is to have text itself right-aligned, but move the whole text block to the left if it short. On your example it will be like this: Image

davidmz avatar Jul 31 '25 10:07 davidmz

In Persian, Arabic, and also Hebrew, text is written from right to left, and it naturally starts from the right side of the page. So that kind of suggestion feels more like a joke to me, to be honest.

Image

Mazafard avatar Jul 31 '25 11:07 Mazafard

Good! Ok, I deployed right-aligned version to the Beta frontend (https://freefeed.net/settings/appearance#beta). Could you check it out?

davidmz avatar Jul 31 '25 12:07 davidmz

Yes, I checked it. Visually, I think it's displaying correctly, apart from users who might not be used to this feature yet 👍

Mazafard avatar Jul 31 '25 15:07 Mazafard