RTL issue

anasaw

I did the translation for my project ِ(English | Arabic)
But when I reload any page RTL not working
and Arabic is a RTL language

dobbel

@anasaw

But when I reload any page RTL not working

So the first time a page loads it does display correctly?

Did you read this:
https://quasar.dev/options/rtl-support#Enabling-RTL-support

anasaw

@dobbel yes when i change the language it’s work and the language save in the browser storage when the page reload
the language not change only it’s back to ltr

dobbel

@anasaw

Please answer:

Did you read this:
https://quasar.dev/options/rtl-support#Enabling-RTL-support

Now you say something different. Now you say you change the language from a non rtl to a rtl inside the app and then save the new rtl language in the ‘browser storage’ and reload.

To help you please show me your code in a code pen?

anasaw

@dobbel Yes, I have read it

and yes when reload the page the language still arabic but the page change to ltr

which part of code you want to see ?

dobbel

@anasaw

Show me the code that

changes the language to a rtl language
stores the rtl language in ‘browser cache’
onRefresh reads the ‘browser cache’ to retrieve the stored language
show output of this.$q.lang.rtl on every step.

best way would be a codepen.io , or a github repo with your code so we can check it out to take a look the problem.

anasaw

@dobbel
this is the code
https://github.com/anas-aw/quasar-rlt

dobbel

@anasaw

Very good. I will take a look at it tomorrow.

anasaw

@dobbel thank you

dobbel

@anasaw

I ran your app locally. The app is in english. I don’t see any arabic language or lang switcher.

dobbel

@anasaw

The reason that when you reload the page it will show en-us non rtl again after after a lang change. Is because of the lang property in quasar.conf.js is set to ‘en-us’ and that is a ltr language.

So in a boot file or main component you’ll have to set the lang to the value stored in for example localstorage. Also store the lang in the localstorage when you change the lang value in the app).

Also found this:

https://medium.com/@nafaabout/app-internationalization-with-quasar-framework-bfc222e6247c

https://medium.com/quasar-framework/adding-full-i18n-to-quasar-150da2d5bba4

with a demo repo that has working i18n:

https://github.com/NafaaBout/q-internationalization

anasaw

@dobbel
i’m trying but nothing is working

dobbel

@anasaw

the examples work ( I ran them). So I suggest you explore how they deal with i18n.

No More Posting New Topics!

RTL issue