Support RTL languages - migrate css from physical to logical positioning

[susnux]

• Resolves Add RTL and preferably, bidi support #1637

Summary

This should at least resolve the RTL issue on our side, but it still looks odd when having a body set to dir=rtl because the @nextcloud/vue package needs to be updated as well.

Screenshots

I checked LTR before / after => exactly the same.

For RTL languages it looks like the following, note that elements (and e.g. the "answers are connected to your account" text) are still left aligned. This should be fixed by changing the @nextcloud/vue package and global nextcloud theme.
So currently only elements / texts changed by the user are handled by setting the direction to auto, because even though the language is a RTL one (this example uses Persian) users could use English text (name, etc).

before	after

For the question note that the first one is "Persian English" and the second one is "English Persian". And note that the * is on the after screenshot aligned on the left as it should be on the end of the question.

Notes

@ahangarha what do you think? Does this work for you?

(Generally I would suggest to next fix the Nextcloud vue package, but this requires much more work.)

[Chartman123]

@susnux could you perhaps also add some screenshots to the first post with before/after for a RTL language? Or a LTR/RTL comparison? :)

[susnux]

@Chartman123 done ✔️

---

ℹ️ This is a mockup:

A full RTL version would look like this (I guess), but as said it requires the vue library to be fixed and a global RTL setting:

[ahangarha]

Thanks for the PR.

It looks good.

The only thing that requires a double check is lists. Fill content and ensure they behave correctly.

Generally they are two rules:

• li shouldn't get dir="auto"
• In nested elements, the first child shouldn't get dir="auto".

You have applied logical style properties very well. 👍🏾

If there is any test server, please let me know so I can check to ensure everything works fine both while creating the form and when it is being filled.

[Chartman123]

@ahangarha you can just spin up a local Nextcloud instance and follow the instructions on the Readme file of this repository to get your local clone of this repo running. :)

[ahangarha]

@Chartman123 I try to do it this week and give feedback.

[jancborchardt]

Awesome! Also cc @mabkenar who had feedback about this some time ago – if you want to check it out. :)

[ahangarha]

I tested the branch on a local setup.
Some features work as expected but in many cases we still need tweaks.

I think the best way to move forward from here is that I make a PR to fix/alignments-rtl and continue its work. In some cases (parsing markdown to html, we may use https://github.com/dobidi/markdown-it-bidi plugin developed by me and and one of my good friends. We need to apply some new changes)

How is it?

[susnux]

@ahangarha what kind of issues do you face?

Are the issues related to the alignment within the forms app?
Because I think it is often easier to have pull requests small, so e.g. first merge the PR with the change from physical to logical alignments (padding-left vs padding-inline-start) like the first commit of this one.

And then a second pull request fixing the dir like the mentioned markdown part.

It is just that huge PRs with all in one are hard to review, so doing it step by step (if possible without breaking anything) would be easier.

But help is highly welcomed 😃
I think there is still much work, especially as we use components from https://github.com/nextcloud/nextcloud-vue which do not support RTL.

[ahangarha]

@susnux You are right. I didn't see any problematic issue. I thought better to make improvements but I agree with you. One small step at a time is better.

I will make another PR making further improvement. This is perhaps a better approach.

[susnux]

@Chartman123 Resolved your comments and rebased onto current main branch 😃

@ahangarha Sure create a pull request, any help is welcome 🙏