国际化之自动适配阿拉伯语(反向)的配置
阿拉伯语 简称 阿语
背景
国际化业务中,需要做阿语,阿语和我们平常的习惯相反...下面会举例子。 我们希望用更通用简单的办法解决阿语的适配问题
- 更多的是样式方面的适配,比如 正常定位 left: 30px; 在阿语中就是right: 30px; (反向操作)
阿语特点
反向 反向 反向,网上随便搜的阿语网站
阿语: 从右到左 www.visitsaudi.com/ar
正常中文(英文) 从左到右 www.visitsaudi.com/zh
需适配的细节
-
设置
dir='rtl'
或dir='ltr'
- 如下,把中文网站的html标签设置rtl后,就变成反向了。改回ltr,又会变成正向的
-
补一些关于rtl的样式
- 例如上面那个网站可以表现正常,就是因为有补对应的样式,例如:
怎么补rtl的样式呢?
例如你正常写,从左到右的布局,也就是 dir="ltr" ,如下
.foo {
float: right;
margin-left: 13px;
text-align: right;
font-size: 13px;
border-color: lightgray;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
如果要兼容阿语的话,就要写成下面这样👇🏻
- 仔细观察一下,基本都要写成反向的,left <==> right,margin-left <==> margin-right
.foo {
font-size: 13px
border-color: lightgray
}
[dir="ltr"] .foo {
float: right;
margin-left: 13px;
text-align: right;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
[dir="rtl"] .foo {
float: left;
margin-right: 13px;
text-align: left;
border-width: 2px 2px 2px 0;
border-style: solid solid solid dashed
}
如何自动适配
自动适配是什么意思?
比如,我们在没有兼容阿语之前,正常写代码,肯定就是上面的第一种形式
.foo {
float: right;
margin-left: 13px;
text-align: right;
font-size: 13px;
border-color: lightgray;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
我们希望,我们在打包时(wewbapck),自动把上面的代码,打包成下面这种👇。这样对我们的兼容阿语来说,是最简单的,而且以后的开发过程中,也不用特意的去[dir="rtl"] .xx { ... }
的代码
.foo {
font-size: 13px
border-color: lightgray
}
[dir="ltr"] .foo {
float: right;
margin-left: 13px;
text-align: right;
border-width: 2px 0 2px 2px;
border-style: solid dashed solid solid
}
[dir="rtl"] .foo {
float: left;
margin-right: 13px;
text-align: left;
border-width: 2px 2px 2px 0;
border-style: solid solid solid dashed
}
如何实现编译时自动适配?
用一个webpack插件postcss-rtl www.npmjs.com/package/pos…
如何接入这个插件?
- 上面的链接里有文档说明,不行的话,也可以谷歌一下
- 但有个注意项,我这边test的时候,是需要额外装postcss的,版本如下,供参考。可以先试试npm装"postcss-rtl",如果有报错的话,在把postcss装一下。如果还报错的话,可以用我下面给的版本
"devDependencies": {
"postcss": "^7.0.39",
"postcss-rtl": "^1.7.3",
}
使用时的注意事项
- 不能写在内联样式style里面 ❌
<span style="margin-left: 12px">
- 实在需要动态的怎么办? (以vue为例,react也是类似)
- 用css变量语法:
<span class="item-text" :style="{ '--margin': `${item.blank * 12}px` }" > .item-text { margin-left: var(--margin); }
唯一的缺点(进阶)
如果性能优化要做的极致的话,这里其实是有冗余的css,因为大多数语言还是ltr(正向的),没法做按需加载
-
因为 postcss-rtl 是在编译阶段做的处理,所以css的体积其实是会变大的,由上面的case也看的出来,多出了rtl(反向,阿语)部分的样式。
-
所以此处rtl部分的样式做到按需加载会更好,但因为是编译阶段处理的,所以没法做到按需
一定要实现按需加载的话,这里可以考虑用另一个工具 rtlcss,但需要对代码做较多改造,参考如下 rtlcss.com/learn/usage…
码字不易,点赞鼓励!