Display RTL (right-to-left) text properly #1021

If a markdown text is in a Right-to-Left language (Farsi, Arabic, etc), Codeberge doesn't show it in proper way. Instead, it shows it Left-to-Right.

Also the same thing is true for textboxes (Like the one that I'm righting in)!

I attach the screenshots to see how it's now and how it should be.

❌ Wrong (Codeberg)
image

✅ Correct (Github)
image

Any link to such a sample file?

Any link to such a sample file?

Yes. @silverwind

This is the file on Codeberg:

https://codeberg.org/mokazemi/Linux-notes-and-cheatsheet/src/branch/main/Set-Persian-Font-Globally.md

And this is the same file on Github:

https://github.com/mokazemi/Linux-notes-and-cheatsheet/blob/main/Set-Persian-Font-Globally.md

To display bidirectional texts properly, the best way is to add dir="auto" to every element. and in CSS, should use start and end instead of left and right. for example: text-align: start;. and similar things for margins, padding and...

...the best way is to add dir="auto" to every element...

Not exactly.
This doesn't work on nested elements (for example li inside ul)

Looking at how GitHub does it, they do appear to indeed add dir=auto to many elements. There are CSS properties like direction, but apparently those do not have a auto value.

image

WIP at https://github.com/go-gitea/gitea/pull/24816, I added the dir=auto, but it does nothing. Not sure what else is needed. Feedback welcome on how to get it to work.

WIP at https://github.com/go-gitea/gitea/pull/24816, I added the dir=auto, but it does nothing. Not sure what else is needed. Feedback welcome on how to get it to work.

I did a lot of experiments on Codeberg and Github and I guess finally found the problem.
The thing is, somewhere on Codeberg css you are setting text-align: left; which causes the text direction to be RTL, but the align is still LTR.

image

That .ui.table selector is selecting the grandparent div of markdown text.
Removing that text-align: left; or adding text-align: initial; to the child(s) solves the issue.

Thanks, I figured that out as well. It's a short-sighted style coming from the Fomantic UI framework, which we now override to text-align: start and then it works. https://github.com/go-gitea/gitea/pull/24816 will merge momentarily.

This seems to have been fixed. Huge thanks @silverwind! Closing...