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

New issue

mokazemi · 2023-05-14T08:03:17+02:00

mokazemi commented

2023-05-14 08:03:17 +02:00

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)

✅ Correct (Github)

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](/attachments/405f2368-8488-4f17-a5ae-a54ff16fda27) ✅ Correct (Github) ![image](/attachments/c64e58e6-87fa-4a92-b639-1835c1675cc6)

image.png

77 KiB

image.png

48 KiB

n0toose added the

s/Forgejo

label

2023-05-14 15:15:43 +02:00

fnetX added the

bug

contributions welcome

labels

2023-05-15 21:02:01 +02:00

silverwind commented

2023-05-16 00:51:09 +02:00

Any link to such a sample file?

mokazemi commented

2023-05-16 10:09:28 +02:00

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

> 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

mskf1383 commented

2023-05-16 14:01:50 +02:00

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...

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...

👍 1

ahangarha commented

2023-05-17 18:35:47 +02:00

...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)

> ...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`)

silverwind commented

2023-05-19 22:20:36 +02:00

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.

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](/attachments/738a4d5b-50d0-4aba-a428-25929873ab37)

image.png

133 KiB

silverwind commented

2023-05-19 23:02:41 +02:00

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.

mokazemi commented

2023-05-20 10:20:37 +02:00

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.

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.

> 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](/attachments/432b2294-7180-44f5-952e-19a5d44eecd5) 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.

image.png

57 KiB

silverwind commented

2023-05-20 12:46:34 +02:00

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.

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.

🎉 1

n0toose added

upstream

and removed

contributions welcome

labels

2023-05-20 14:47:56 +02:00

earl-warren referenced this issue from a commit

2023-05-23 07:28:53 +02:00

Add RTL rendering support to Markdown (#24816)

n0toose commented

2023-08-11 00:19:05 +02:00