Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

RTL conversion on language change


Hi !
I am making a website which needs to support both English and Arabic language.
The desired behaviour of the webiste should be that , when a user changes the language option to Arabic the design should also switch from LTR to RTL.

I have read the RTL documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/rtl.html

But as mentioned in the documentation the style direction(RTL or LTR) need to decided at the build step, and css style sheets will be generated at the build step and it cannot be configured at runtime (after deployment).

Is there a possibility that when i change language from english to arabic , the style direction also changes from LTR to RTL and vice versa,
(I can obviously configure in my code that on language change following things are also done
1. html direction attribute is changed to RTL,
2. data-kt-menu-placement="bottom-end" & data-kt-menu-placement="left-start"
3. class="RTL" is added to body element.) or anyother changes required.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

The CSS RTL files are generated in advance during your development and when you deploy it to your server the RTL switch only flips the CSS file based on the user lang selection. In your server, while you serve your pages you will not deal with npm/gulp/build stuff. It's only during the development that you customize your assets.

Regards


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(