Implementing RTL Direction in Quasar Components

[mohamad68]

What happened?

I have configured my project with RTL as the default direction. using Quasar framework and PostCSS with rtlcss. I'm encountering an unintended behavior where styles such as margin-right are automatically converted to margin-left. This is not the desired outcome for my project.

What did you expect to happen?

i am seeking guidance on how to exclusively adjust the direction of Quasar's built-in components to RTL without affecting other styles or functionalities in my application.

Reproduction URL

https://codepen.io/mohamad/pen/abrrLML?editors=1010

How to reproduce?

1-Added rtlcss to the PostCSS configuration.
2-Specified lang="fa-ir" in the Quasar configuration.
3-Set dir="rtl" on the HTML tag.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Please follow the guide at https://quasar.dev/options/rtl-support
Notice that you also need to configure Quasar with an RTL Quasar language pack.

[mohamad68]

@rstoenescu
First, thank you for your response. The configuration you mentioned does indeed transform the code to RTL, but my aim is to write RTL code directly, without relying on transformations. The issue I'm encountering is that Quasar components are inherently coded in LTR, and they only switch to RTL through transformation.

To clarify, if I want to use Quasar components in RTL, I am forced to apply the transformation using the guidelines you've provided. However, this approach affects all the code, not just the Quasar components, which isn't what I want.

Unfortunately, due to this issue, the usage of the Quasar framework is quite rare in countries that primarily use RTL languages.

For a better understanding, I suggest creating a project and trying to code with an RTL base directly, so you can see the challenge in action.