RTL support for Quasar #5045
Replies: 3 comments 3 replies
-
|
Hi @M6stafa, This seems to be a feature request, so I converted it to a discussion. This way we can clarify details about a possible solution and others can vote on it. For us left-to-right users, can you explain what exactly does not work with the current version of NiceGUI? Can you share some example code and explain the desired outcome? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @falkoschindler Here is a minimal code to show one of the wrong settings in RTL. from nicegui import ui
ui.query('body').style('direction: rtl;')
ui.input(label='متن ورودی', placeholder='متن خود را وارد کنیم')
ui.run(language='fa-IR')Without the When you add As you can see the "textbox" goes to the right of the screen. Also the "placeholder" is in the right position but the "label" is not. the "label" must be in the right side too. It is wrong because as you can see in below image, the position is set to absolute with left equals to zero. That must be change in RTL mode to right equals zero. So if I change the These are the rules in RTL CSS that makes it works fine in this case: For Quasar the only change needed is including the right CSS file. You can give the freedom to the user with some options like #popup {
position: fixed;
...
left: 0;
...
}I don't know the right solution for the JS if you do some positionings in it, but for the CSS there is a package named |
Beta Was this translation helpful? Give feedback.
-
|
Ah, I see! So we only need to replace the Quasar CSS with the RTL version and everything should work fine? It looks like for Quasar 2.18.2 the RTL version is 239KB (39.8KB zipped) instead of 200KB (35.6KB zipped). I don't think it is worth adding an opt-in just to save 4KB - compared to 155KB zipped size of the JavaScript library. |
Beta Was this translation helpful? Give feedback.
-
|
For the Quasar part, yes — the only thing to do is change the CSS file. For the nicegui custom CSS and JS, I’ve only seen two places that need to be changed in nicegui.css: this and this. I think these can be handled more simply too by creating extra rules for them, rather than adding postcss-rtlcss to the project. |
Beta Was this translation helpful? Give feedback.
-
|
See PR #5058. |
Beta Was this translation helpful? Give feedback.
-
|
PR #5058 has been merged and will be released as part of version 3.0. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
First Check
Example Code
Description
The current
quasar.prod.cssdoes not include[dir="rtl"]rules so there are some wrong settings in RTL mode like paddings. Quasar has official RTL support that can be enabled by including the right css file like this link:quasar.rtl.prod.css.NiceGUI Version
2.22.2
Python Version
Python 3.12.11
Browser
Firefox
Operating System
Linux
Additional Context
No response
Beta Was this translation helpful? Give feedback.
All reactions