switch to start/end instead of left/right to support RTL layouts

[ibrasho]

This PR makes some changes to the tailwind classes used to support RTL layouts.

I'm applying similar changes to my local version of the pro files.

[cs4alhaider]

Thanks @ibrasho for this PR!

Just to give a context as this will improve the adaptability for different languages as using left and right is static—it assumes all languages are left-to-right (LTR), like English. But in right-to-left (RTL) languages like Arabic or Hebrew, layouts are often mirrored. start and end dynamically adjust based on the text direction.
start aligns to the left in LTR languages and to the right in RTL languages. Similarly, end aligns to the right in LTR and to the left in RTL.
It also for internationalization (i18n) as this change is crucial for supporting applications used by people from different cultures and languages. By using start and end, the layout automatically adjusts to the user's language preference, improving usability for RTL users.

Long time no seee @ibrasho 🙋🏻‍♂️

[3adeling]

I have published all the components for Flux (Flux and Flux-Pro), and here are my observations:

Adding RTL (Right-to-Left) support to Flux can be completed in 30 minutes to 1 hour at most.
Steps to implement:
Replace all pl-* and pr-* classes with ps-* and pe-* respectively.
Replace all ml-* and mr-* classes with ms-* and me-* respectively.
Replace left-* and right-* with start-* and end-*.
Replace text-left and text-right with text-start and text-end.
For translations:
If the value for ltr is negative, it should be the same value but positive for rtl, and vice versa.
Add the rtl: prefix for reversed translations while retaining the ltr: prefix for default translations as needed.
Ensure dir="ltr" is set in all layout files, as the ltr: prefix will not work without this attribute.
Additionally, the same principles should be applied to pure CSS files. For example, any instance of left: in the CSS should be replaced with inset-inline-start:.

Implementing RTL support in Flux is a straightforward process and can be done efficiently.

[3adeling]

[mozex]

Any update on this?

[ibrasho]

Hey @calebporzio ,

Is this something you would be looking to add to Flux (and Flux Pro)?

[FaridAghili]

Looking forward to this