Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


That's hard, I usually just build website with theme drive mad



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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(