在做国际化项目中可能会碰到阿拉伯语，阿拉伯语的文字排列方式是从右向左的，所以我们要将整体的布局做调整。
很多css样式都要调整，比如：margin-right、text-align、right、padding-right等带方向的，以及
文字的默认排列方式。
方法一：direction调整文字排列方向
css中有一个很有用的属性：directiondirection CSS 属性用于设置文本、表格列和水平溢出的方向。对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 rtl；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为 ltr。
在vue3项目中，应用到页面上：
<script setup lang="ts">
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
const themeStore = useThemeStore();
const { lang } = storeToRefs(themeStore);
const isRTL = computed(() => {
return lang.value === 'ar'; // ar 阿拉伯语
});
</script>
<style lang="scss" scoped>
/* 在这里添加全局样式来控制整个页面的布局方向 */
* {
unicode-bidi: embed;
direction: v-bind('isRTL ? "rtl" : "ltr"') !important;
text-align: v-bind('isRTL ? "right" : "left"') !important;
}
</style>直接调整文字的排列方式即可。
这种方式快速有效，但是有缺陷，无法对UI组件库内的文字生效，比如TDesign的表单文字。
方法二：vite-plugin-rtl-css
用css+js的方式比较麻烦，现有的库可以帮我们搞定
npm install vite-plugin-rtl-css --save-dev这个库非常简单，集成只需要如下几部：
1、vite.config.ts中配置
import { defineConfig } from 'vite';
import viteRtlCssPlugin from 'vite-plugin-rtl-css';
export default defineConfig({
plugins: [
viteRtlCssPlugin({
fileNameMap: {
'.css': '[name].rtl.css',
'.min.css': '[name].rtl.min.css'
},
sourceMap: true,
rtlcssConfig: {
autoRename: true
}
});
]
});配置说明：
- fileNameMap 是一个可选参数，用于指定从文件扩展名到 RTL CSS 生成模板的映射。示例中显示的是默认值。
- sourceMap 是一个可选参数，用于指定是否应生成源映射。如果未指定，它将默认为您的 vite.config.ts 中的 build.sourcemap 。
- rtlcssConfig 是一个可选参数，来自此插件用来配置 rtlcss 的 rtlcss 包。
vite-plugin-rtl-css会为每个CSS 文件生成对应的 RTL 版本，在 HTML 中根据 dir属性自动加载对应的 CSS，示例如下：
<!-- 开发时 -->
<html dir="ltr"> <!-- 自动加载 index.css -->
<html dir="rtl"> <!-- 自动加载 index.rtl.css -->
<!-- 构建后 -->
<link rel="stylesheet" href="/assets/index.css" data-dir="ltr">
<link rel="stylesheet" href="/assets/index.rtl.css" data-dir="rtl">2、根据语言动态切换html dir="ltr"属性
<script setup lang="ts">
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
const themeStore = useThemeStore();
const { lang } = storeToRefs(themeStore);
// 监听 lang 变化，动态设置 html dir 属性
watch(
lang,
newLang => {
document.documentElement.dir = newLang === 'ar' ? 'rtl' : 'ltr';
},
{ immediate: true }
);
</script>
其它方式
有很多现成的插件可以使用，我没办法全部试一遍，但网上有很多资料可以参考，可以根据实际需求使用，我这里例举一下：postcss-rtlcss： PostCSS 插件，使用 RTLCSS 自动构建包含从左到右（LTR）和从右到左（RTL）规则的层叠样式表（CSS）
github：https://github.com/elchininet/postcss-rtlcss
rtlcss：RTLCSS 是一个用于将从左到右（LTR）级联样式表（CSS）转换为从右到左（RTL）的框架。
github：https://github.com/MohammadYounes/rtlcss
参考资料：
direction：https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction
vite-plugin-rtl-css：https://github.com/SmushyTaco/vite-plugin-rtl-css
documentElement：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/doc...
Web 端 RTL 适配实践：https://juejin.cn/post/7343793872780296244
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。