starred/PeerTube

Fork 0

mirror of https://github.com/Chocobozzz/PeerTube.git synced 2026-03-02 22:57:11 -05:00

Add BiDi support #1798

New issue

Open

opened 2026-02-22 06:01:59 -05:00 by deekerman · 11 comments

deekerman commented

2026-02-22 06:01:59 -05:00

Owner

Originally created by @ahangarha on GitHub (Sep 6, 2019).

What happened?
Peertube is LTR friendly. So if you post something in RTL scripts, it behaves wrongly

What do you expect to happen instead?
SImple: it should be both LTR and RTL friendly.

Steps to reproduce:
Just post something in Persian/Arabic/Urdu etc. Especially it is horrible if it be a mixed LTR and RTL in the text. you may check this post to see an example

Additional information

PeerTube version or URL: PeerTube v1.4.0 on peertube.social
Browser name/version: Firefox 69 (it is not related to browser version)
NodeJS version: -

My suggestion is to add bidi support to the UI. This way, regardless of the default text direction, texts will find the right direction based on the first character of the line/paragraph.

I myself have experience of adding bidi support. So you may assign this to me.

Originally created by @ahangarha on GitHub (Sep 6, 2019). **What happened?** Peertube is LTR friendly. So if you post something in RTL scripts, it behaves wrongly **What do you expect to happen instead?** SImple: it should be both LTR and RTL friendly. **Steps to reproduce:** Just post something in Persian/Arabic/Urdu etc. Especially it is horrible if it be a mixed LTR and RTL in the text. you may check [this post](https://peertube.social/videos/watch/5c9cb7bb-48a2-4238-acf2-d81a6045d17e) to see an example **Additional information** * PeerTube version or URL: PeerTube v1.4.0 on peertube.social * Browser name/version: Firefox 69 (it is not related to browser version) * NodeJS version: - My suggestion is to add bidi support to the UI. This way, regardless of the default text direction, texts will find the right direction based on the first character of the line/paragraph. I myself have experience of adding bidi support. So you may assign this to me.

deekerman added the

Type: Feature Request ✨

Component: i18n 🔡

labels

2026-02-22 06:01:59 -05:00

deekerman commented

2026-02-22 06:02:03 -05:00

Author

Owner

@Chocobozzz commented on GitHub (Nov 29, 2019):

I'm sorry I don't know RTL languages, so I'm not sure what I have to do here. Do you have some hints or resources on how we could add RTL support in PeerTube? Or maybe you have already started such work?

@Chocobozzz commented on GitHub (Nov 29, 2019): I'm sorry I don't know RTL languages, so I'm not sure what I have to do here. Do you have some hints or resources on how we could add RTL support in PeerTube? Or maybe you have already started such work?

deekerman commented

2026-02-22 06:02:05 -05:00

Author

Owner

@ahangarha commented on GitHub (Nov 30, 2019):

The simplest way is to add dir="auto" attribute to all the elements may contain texts which might be in different languages. I haven't checked the source code, otherwise I myself would suggest to give the task to me.

If needed, I can check for it

@ahangarha commented on GitHub (Nov 30, 2019): The simplest way is to add `dir="auto"` attribute to all the elements may contain texts which might be in different languages. I haven't checked the source code, otherwise I myself would suggest to give the task to me. If needed, I can check for it

deekerman commented

2026-02-22 06:02:05 -05:00

Author

Owner

@ahangarha commented on GitHub (May 16, 2020):

I have made a very simple Firefox extension called Add Bidi Support which does what I proposed here.

I share some screenshot of how effectively it solves the problem:

@ahangarha commented on GitHub (May 16, 2020): I have made a very simple Firefox extension called [Add Bidi Support](https://addons.mozilla.org/en/firefox/addon/add-bidi-support/) which does what I proposed here. I share some screenshot of how effectively it solves the problem: ![image](https://user-images.githubusercontent.com/11241315/82123834-acf50b00-97b0-11ea-9bf2-8ed3492bfabf.png) ![image](https://user-images.githubusercontent.com/11241315/82123864-ea599880-97b0-11ea-94aa-a4f38c390ae6.png) ![image](https://user-images.githubusercontent.com/11241315/82123927-445a5e00-97b1-11ea-8f18-fc72488147d6.png)

deekerman commented

2026-02-22 06:02:05 -05:00

Author

Owner

@ahangarha commented on GitHub (May 20, 2021):

Any update in this regard?

@ahangarha commented on GitHub (May 20, 2021): Any update in this regard?

deekerman commented

2026-02-22 06:02:05 -05:00

Author

Owner

@Chocobozzz commented on GitHub (May 25, 2021):

Hello,

Not yet but I want to work on it this year, adding the dir attribute to the body tag, and using custom SASS functions to set the appropriate margin-right/margin-left to elements depending on the direction (similar to what bootstrap 5 does). Since it's the first time I'll work on this kind of subject, it will take some time :)

@Chocobozzz commented on GitHub (May 25, 2021): Hello, Not yet but I want to work on it this year, adding the `dir` attribute to the `body` tag, and using custom SASS functions to set the appropriate `margin-right`/`margin-left` to elements depending on the direction (similar to what bootstrap 5 does). Since it's the first time I'll work on this kind of subject, it will take some time :)

deekerman commented

2026-02-22 06:02:05 -05:00

Author

Owner

@ahangarha commented on GitHub (May 26, 2021):

Adding dir to body wont solve the issue. Regardless of the overall direction of the page (which should be dependent on UI language), there are mixed content on Fediverse. So it should be handled on each entry level.

Moreover I would suggest to use margin-inline and padding-inline with start|end instead of left|right to address bidirectional functionality. That includes text-align as well.

@ahangarha commented on GitHub (May 26, 2021): Adding `dir` to `body` wont solve the issue. Regardless of the overall direction of the page (which should be dependent on UI language), there are mixed content on Fediverse. So it should be handled on each entry level. Moreover I would suggest to use `margin-inline` and `padding-inline` with `start|end` instead of `left|right` to address bidirectional functionality. That includes `text-align` as well.

deekerman commented

2026-02-22 06:02:05 -05:00

Author

Owner

@Chocobozzz commented on GitHub (May 27, 2021):

So it should be handled on each entry level

I'm not sure to understand. Are you explaining that we should detect the language in a HTML element to know if it should be displayed to the according direction?

@Chocobozzz commented on GitHub (May 27, 2021): > So it should be handled on each entry level I'm not sure to understand. Are you explaining that we should detect the language in a HTML element to know if it should be displayed to the according direction?

deekerman commented

2026-02-22 06:02:06 -05:00

Author

Owner

@ahangarha commented on GitHub (May 27, 2021):

Yes. If you see the screenshot I shared above, in a timeline or search result or even in a channel, one may have videos with both English and Persian text. English titles should render with LTR direction and Persian titles should render with RTL. This applies to description, tags, channel name, etc. This mean each element that contains text which can be either RTL or LTR, should determine the direction of the text and accordingly render it in right direction.

There are different ways to achieve this. One is to apply dir="auto" to the element. The other is to add unicode-bidi: plaintext style to the element which works but is not recommended. The first approach is used by many projects including Gitlab. In either cases, we should avoid using absolute values of left|right for text alignment, padding and margin and border unless.

@ahangarha commented on GitHub (May 27, 2021): Yes. If you see the screenshot I shared above, in a timeline or search result or even in a channel, one may have videos with both English and Persian text. English titles should render with LTR direction and Persian titles should render with RTL. This applies to description, tags, channel name, etc. This mean each element that contains text which can be either RTL or LTR, should determine the direction of the text and accordingly render it in right direction. There are different ways to achieve this. One is to apply `dir="auto"` to the element. The other is to add `unicode-bidi: plaintext` style to the element which works but is not recommended. The first approach is used by many projects including Gitlab. In either cases, we should avoid using absolute values of `left|right` for text alignment, padding and margin and border unless.

deekerman commented

2026-02-22 06:02:06 -05:00

Author

Owner

@Chocobozzz commented on GitHub (Jun 8, 2021):

Hello,

I implemented bidi support in github.com/Chocobozzz/PeerTube@27bc958674

You can try the changes on https://peertube2.cpy.re/ar:

I decided to not mix RTL and LTR directions depending on element languages to not break the layout. It seems that youtube also respects this behaviour.

There's still have some CSS inconsistencies because of some libraries we use (bootstrap 4 for example), but it should not hurt too much. There's also a bug with the bootstrap dropdown when there is a scrollbar, we reported it in https://github.com/ng-bootstrap/ng-bootstrap/issues/3495

@Chocobozzz commented on GitHub (Jun 8, 2021): Hello, I implemented bidi support in https://github.com/Chocobozzz/PeerTube/commit/27bc95867442c772841fb183a625bbda61dede51 You can try the changes on https://peertube2.cpy.re/ar: ![Screenshot_2021-06-08 الفيديوهات الشائعة - PeerTube](https://user-images.githubusercontent.com/6329880/121144313-2806e480-c83e-11eb-82ae-3b60b729f221.png) I decided to not mix RTL and LTR directions depending on element languages to not break the layout. It seems that youtube also respects this behaviour. There's still have some CSS inconsistencies because of some libraries we use (bootstrap 4 for example), but it should not hurt too much. There's also a bug with the bootstrap dropdown when there is a scrollbar, we reported it in https://github.com/ng-bootstrap/ng-bootstrap/issues/3495

deekerman commented

2026-02-22 06:02:06 -05:00

Author

Owner

@ahangarha commented on GitHub (Jun 8, 2021):

See. Peertube (like any other social media platform or messengers) hosts videos from different languages. Channel name, Video title, video description, tags, etc can not only have text in different languages but also can have mixed text. Not all people see videos on peertube while being logged in. So they cannot choose language. Even if they do this, they see problems in text direction specially if there be a mixed text.

Having RTL support is good but it is different from supporting Bidirectional text. If you share your concern regarding layout, I might be able to help to fix them in the best possible way.

Social media is not where we can control the language people share content. The platform should be enough flexible to handle it. Trust me! I along with millions of other people are suffering from this issue. So lets work together and fix this issue. It might take some time but it should be resolved.

Since the issue is not resolved, I request to keep it open. The mentioned commit 27bc958 doesn't address the issue raised here. it is RTL support not bidi support.

@ahangarha commented on GitHub (Jun 8, 2021): See. Peertube (like any other social media platform or messengers) hosts videos from different languages. Channel name, Video title, video description, tags, etc can not only have text in different languages but also can have mixed text. Not all people see videos on peertube while being logged in. So they cannot choose language. Even if they do this, they see problems in text direction specially if there be a mixed text. Having RTL support is good but it is different from supporting Bidirectional text. If you share your concern regarding layout, I might be able to help to fix them in the best possible way. Social media is not where we can control the language people share content. The platform should be enough flexible to handle it. Trust me! I along with millions of other people are suffering from this issue. So lets work together and fix this issue. It might take some time but it should be resolved. Since the issue is not resolved, I request to keep it open. The mentioned commit 27bc958 doesn't address the issue raised here. it is RTL support not bidi support.

deekerman commented

2026-02-22 06:02:06 -05:00

Author

Owner

@ahangarha commented on GitHub (Jun 8, 2021):

Thank you @Chocobozzz. I really appreciate it.

@ahangarha commented on GitHub (Jun 8, 2021): Thank you @Chocobozzz. I really appreciate it.