RTL support

[mahmoudmy]

Thanks guys,
That's a really nice project.
Do you have any plan for RTL support in css? (for languages like Persian, Arabic, ...)

[Leopoldthecoder]

Thanks.
We don't have plans to add RTL support, but there may be some third party libraries you can use with Element, like rtlcss.

[MahdiMajidzadeh]

no plan to add rtl with contribution neither ??

[osman-mohamad]

do you have any guides about using element-ui with rtlcss ?

[KayvanMazaheri]

Has anyone find a solution for using Element with RTL languages? Any suggestions would be appreciated.
@mahmoudmy @MahdiMajidzadeh @osman-mohamad

[osman-mohamad]

@KayvanMazaheri I did found a solution . you can use postcss-loader in your project with postcss rtlcss plugin . and it will convert all the styles to rtl .
plus :

body,html {
   direction: ltr
}

in the App.vue Component style section

[siavash-sajjad]

@osman-mohamad
hi my friend
can you help me to add and usage rtlclass to laravel-vue project?

[osman-mohamad]

@siavash-sajjad put the repository url here . for me to review it .

[kooshkestani]

@Leopoldthecoder hi tree element not support rtl .
how to customize tree-node.vue
:style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">to padding-right???

[moosti]

+1

[ghyath5]

How can I use rtlcss in my nuxtjs project ?
and did you find another way to support RTL in element?

[kooshkestani]

https://www.npmjs.com/package/tree-element-ui-rtl

[ghost]

+1

[hitautodestruct]

+1

[hasanisaeed]

@Leopoldthecoder Still have no plans for RTL support?

[mra-dev]

It would be so good if we had it.

[mahsamirzapour]

Thanks guys, That's a really nice project. Do you have any plan for RTL support in css? (for languages like Persian, Arabic, ...)

Hi homie, just use like this:
html {
direction: rtl;
}
[class*='el-col-'] {
float: right;
}

[kriem2000]

As I saw that the rtlcss plugin solved the problem, but not in my application case where i use both rtl and ltr directions so the rtlcss is always converts the styles into rtl regardless of the html dir value, any solution for this issue?

here's my vite.config.js file:

import { fileURLToPath, URL } from 'node:url';
import rtlcss from 'rtlcss';
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import vue from '@vitejs/plugin-vue';
import tailwindcss from 'tailwindcss';


export default defineConfig({
  css: {
    postcss: {
      plugins: [
        rtlcss,
        tailwindcss,
      ],
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});