New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

which version support fully RTL


i have used html_v8.3.1_demo1 but it does not support full RTL languages

is there way to convert it to support RTL
or i have to use anthor demo

if so which demo(s) to use and download ?
and what is the easiest way to convert ?


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 (6)


Hi

The upgrade from v8 to v9 requires a manual migration rather than a simple asset replacement. It's almost rewritten from scratch.

Key Differences:
- v8 uses Bootstrap, v9 uses Tailwind CSS
- v8 uses Bootstrap components, v9 uses KtUI components
- v8 uses Gulp/Webpack, v9 uses modern build tools
- The file structure is completely different organization

Our recommendation is to create a new v9 project rather than trying to upgrade existing v8 files.

RTL for v8,
https://preview.keenthemes.com/html/metronic/docs/getting-started/rtl

Thanks



OK
thanks a lot really
but what a bout
2. Enabling RTL on the v8 HTML Version

In relation to my current v8 project, I need to implement the RTL layout.

I understand that the RTL stylesheet (style.bundle.rtl.css) is typically generated via the build tools (Gulp/Webpack). However, since I am using the pre-compiled HTML package, I do not have this build environment set up.

Could you please clarify how I can enable the RTL layout in this context? Does the pre-compiled HTML download package already include the necessary style.bundle.rtl.css file, and I simply need to reference it in my HTML, or is there another process I should follow?



I am currently using your Metronic theme and I have a couple of technical questions for which I would appreciate your guidance.

For context, I am working with Metronic v8 (the plain HTML version), without using the build tools.

My questions are as follows:

1. Upgrading from Version 8 to Version 9

I am planning to upgrade my existing project to the latest version of Metronic (v9). Could you please advise on the official, recommended procedure for this?

Is there a direct upgrade path where I can simply replace the assets, or is a manual migration of the HTML structure and custom logic required due to breaking changes? Any links to official documentation or a migration guide on this topic would be extremely helpful.

2. Enabling RTL on the v8 HTML Version

In relation to my current v8 project, I need to implement the RTL layout.

I understand that the RTL stylesheet (style.bundle.rtl.css) is typically generated via the build tools (Gulp/Webpack). However, since I am using the pre-compiled HTML package, I do not have this build environment set up.

Could you please clarify how I can enable the RTL layout in this context? Does the pre-compiled HTML download package already include the necessary style.bundle.rtl.css file, and I simply need to reference it in my HTML, or is there another process I should follow?

Thank you for your time and for creating such a great product. I look forward to your response.



Hi Baraa Abd


For Metronic v8 (Bootstrap-based), RTL support requires specific setup and build processes.

For Metronic v8 HTML version:
Build RTL CSS files using the build tools:
- Find your webpack.mix.js or gulpfile.js
- Uncomment the RTL plugin configuration
- Run the build command: npm run dev --rtl --demo1
- This generates RTL CSS files in the public folder

Update CSS references to use RTL versions:
- public/demo1/css/style.bundle.rtl.css
- public/demo1/plugins/global/plugins.bundle.rtl.css

Add RTL attributes to your HTML:

<html lang="ar" dir="rtl" direction="rtl" >


https://preview.keenthemes.com/html/metronic/docs/getting-started/rtl

Thanks



thanks a lot
but if i use Metronic v9

is there a specific way also ?



Yes! Metronic v9 has a much simpler approach to RTL support. Here's the specific way:

Just add dir="rtl" to your HTML tag.

<html dir="rtl">
<head>
<!-- Your head content -->
</head>
<body>
<!-- Your content -->
</body>
</html>


https://keenthemes.com/metronic/tailwind/docs/customization/rtl

Thanks


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  :(