RTL (Right-to-Left) text direction for some Asian languages such as Arabic, Hebrew, Persian etc.

[okaeiz]

##Issue
We need to use Persian interface and Persian (Farsi) is a RTL language. This feature is not supported in Nextcloud and the interface strings are translated into Persian but its Left-to-Right.
We have also checked Arabic and it was also LTR.

##What we suggest:
We strongly suggest that Nextcloud developers include the text direction feature.

[Spartachetto]

There should be some work already done. I've seen for example #11716

[tflidd]

Perhaps a stupid question, you probably would change the alignment, but would you as well "mirror" the whole design?

[Spartachetto]

@jancborchardt Sorry to disturb you, but:

• this issue maybe is already solved
• this is a front end issue

[okaeiz]

the issue is not solved yet.
we have tried multiple options to make it right to left; none of which worked.
We modified core css files using RTLCSS (a tool written in javascript to make a left-to-right interface right-to-left.
We searched for any css patch to include in Custom CSS (a theming app in nextcloud) but we didn't find anything.
We need nextcloud developers to help us out.
This cannot be done without your help.

[mokazemi]

There are some problems for Right-to-Left languages.

• Text boxes should adopt text (or paragraph) direction automatically, based on the writing language.
• The total interface should be mirrored. (Since Some issues are encountered when the interface is LTR but text isn't.)

[jancborchardt]

cc @skjnldsv @marcoambrosini @PVince81 @AndyScherzinger since this is quite an overarching front-end issue.

[AndyScherzinger]

Not sure when this could be picked up, since we want to push more for the rewrite to vue and also work on accessibility which both couldn't be worked on given the priorities of version 24. So I think that this should be implemented first before improving RTL support.

[mokazemi]

Isn't there anything about RTL layout support for Version 25?
Since this makes Nextcloud not being much usable for these languages. (Only strings translations is not enought)

[AndyScherzinger]

Isn't there anything about RTL layout support for Version 25?

Not that I know of, maybe @PVince81 is aware of something, but my guess it no.

[bandarrex]

it is a front-end issue . the direction must rely on the used language to view the text and tables and containers properly.
open developer mode and addup the page code after html:
dir="rtl"
and see part of the experience

[ahangarha]

I have tried manually, and I think the implementation of this feature should be straight forward. If there is no objection against using logical properties in CSS (I mean using text-align: start|end instead of left|right, or padding-inline-start|end instead of padding-left|right and other similar cases, I should be able to work on this feature.

Perhaps the only issue is with the support for inset-inline-start|end for left|right properties in absolute positioned elements.

If there be no objection, this approach helps us to avoid creating rtl styles (which brings more headache for maintenance). Then we need to publish some guidelines for developing apps to respect the same styling conventions to follow the direction of the page.

Green light?

[AndyScherzinger]

#31420 (comment) What do you think @skjnldsv @nickvergessen @juliushaertl @artonge @ChristophWurst - for some front-enders feedback. In general having RTL supported would be awesome, I just lack the technical knowledge if the approach works or where one would expect challenges and side-effects for app-developers

[ahangarha]

The good thing is that my native language is Persian (so I know what I am fixing). I also have several contributions to different projects, fixing their bidirectional text support.

I expect the changes to be very limited, so it shouldn't add more complexities to the project.

I document things so they can become a guideline for other developers.

We only need a reliable way to verify the quality of the changes. If we have automated tests, it would be great. In any case, we will make it work. I have some cool plans for the next 3 months. Wish me for making it realized.

[AndyScherzinger]

That sounds awesome @ahangarha 🎉

Also if you have any troubles from a design perspective feel free to loop in people from @nextcloud/designers or @jancborchardt or @nimishavijay specifically.

Really looking forward to have RTL languages properly supported ✨

[alimahwer]

Great news. Any progress on this feat. My mother language is Arabic, so I can help on reviewing the result and QA.

[ahangarha]

@alimahwer No progress yet. But it is good to have you for testing

[okaeiz]

I can help you with Persian strings.

[GameO7er]

So is this solved in this pull request?

[ahangarha]

So is this solved in nextcloud/forms#1654 pull request?

No @GameO7er
That is some minor fix in forms app. This issue is for the NextCloud itself.

[GameO7er]

Thank you for your response.
So, considering that I know different people come to this page through search engines, to make the issue clear and transparent, I would say that the problem with the "NextCloud Forms" has been resolved, but the same problem needs to be addressed in other software as well. Software such as NextCloud Talk, NextCloud Task, NextCloud Deck, NexxtCloud Phone Track, NextCloud Calendar and other existing softwares.

[ahangarha]

A few colleagues and I are working on adding bidirectional text support to NC server.

There are a few blockers. Should I discuss them here?

• Can we drop IE11 support? In particular, this commit is problematic.
• There are cases where we have explicit values set for showing elements to the left or right. Namely these. Can we change these to start|end rather than left|right? (in later PR) Does it have any further impact on any other part of the software?

For now, I don't touch these cases. Please let me know how we can resolve these issues.

[ahangarha]

Since nextcloud server uses this browserslist, then I think we can totally ignore IE11. But still we have Samasung Internet and Opera Mobile.

May I ignore them as well or you want to keep them in the list? These two browsers don't proper support for logical CSS properties.

[jancborchardt]

Thanks a bunch for looking into this @ahangarha! :)

• Can we drop IE11 support? In particular, this commit is problematic.

@AndyScherzinger what do you think? Also @danxuliu could that commit/fix be done in a different way?

• There are cases where we have explicit values set for showing elements to the left or right. Namely these. Can we change these to start|end rather than left|right? (in later PR) Does it have any further impact on any other part of the software?

As far as I know, the tooltip library is being phased out in favor of the native browser title/tooltip functionality, so this might soon be obsolete. cc @JuliaKirschenheuter @ShGKme for more info.

[AndyScherzinger]

I'd be looping in @sorbaugh for the server part.

see https://docs.nextcloud.com/server/latest/user_manual/en/webinterface.html - we do not supprot IE11 in latest versions of Nextcloud. As stated by Jan we also phased out the tooltip library in favor of native tooltips with v27.

[nickvergessen]

Also danxuliu could that commit/fix be done in a different way?

The commit is 4years old, and the person is OOO for another 2.5 months.
But as per above neither tooltip nor IE11 are supported anymore, so just go ahead.

[ShGKme]

As far as I know, the tooltip library is being phased out in favor of the native browser title/tooltip functionality, so this might soon be obsolete. cc @JuliaKirschenheuter @ShGKme for more info

Yep, it is mostly removed. Some places still use it, but we probably will remove it completely.

[ahangarha]

Great.
So I won't bother with IE support.
Now the only issue is (almost) Samsung Internet. We have issue with float/clear styles.
Not sure how many of NextCloud users use the web interface on mobile phones and there, use Samasung Internet.

If I get green light for dropping this browser too, I can wrap up and make the PR in 24 hours.

I must say, this is just the beginning of a series of changes all over NextCloud. These changes wont affect LTR languages (visually) but RTL languages will be impacted (since in some apps they see the content in RTL while the text is LTR; the same issue they face with RTL content in LTR layout even now). So we are moving forward but the team should be aligned and synced about the progress we are going to make.

[jancborchardt]

Now the only issue is (almost) Samsung Internet. We have issue with float/clear styles.
Not sure how many of NextCloud users use the web interface on mobile phones and there, use Samasung Internet.

According to Statcounter, Samsung Internet has a current market share of 4.58% on mobile: https://gs.statcounter.com/browser-market-share/mobile/worldwide
In 3rd position only after Chrome and Safari – this is much too high of a percentage, so we can not drop support for it.

[ahangarha]

Samsung Internet has a current market share of 4.58% on mobile

That is what is concerning me. I wish there be some statistics about NC users who use this browser.

But I think I can find some workaround if NC wants to support this browser.

[jancborchardt]

@ahangarha yeah, we don’t do tracking in this regard though. But considering the many people who use Nextcloud either not only self-hosted but also via companies, schools, governments, very common service providers and more → We have to take the Statcounter values and take them as if they are our own. Thus Samsung Internet is not something we can not support, sorry. :( Hope that’s understandable?

[ahangarha]

@jancborchardt
It is totally understandable. Thanks for your insight.

I have already taken that into account while working on #42471, and I hope I can get some response in that regard and move forward.

[AndyScherzinger]

Implemented via #47343 and #47349

[AndyScherzinger]

So anyone can try out the latest master and report back any issues you find that still need fixing/polishing.

Some might be here in the server some might be in libraries or apps. Don't worry if unclear, we will take care of transferring the issue to the matching repo in case it is needed 👍