国际化之打包自动适配阿拉伯语(反向)的配置

1,431 阅读3分钟

国际化之自动适配阿拉伯语(反向)的配置

阿拉伯语 简称 阿语

背景

国际化业务中,需要做阿语,阿语和我们平常的习惯相反...下面会举例子。 我们希望用更通用简单的办法解决阿语的适配问题

  • 更多的是样式方面的适配,比如 正常定位 left: 30px; 在阿语中就是right: 30px; (反向操作

image.png

阿语特点

反向 反向 反向,网上随便搜的阿语网站

阿语: 从右到左 www.visitsaudi.com/ar image.png

正常中文(英文) 从左到右 www.visitsaudi.com/zh image.png

需适配的细节

  1. 设置dir='rtl'dir='ltr'

    • 如下,把中文网站的html标签设置rtl后,就变成反向了。改回ltr,又会变成正向的 image.png
  2. 补一些关于rtl的样式

    • 例如上面那个网站可以表现正常,就是因为有补对应的样式,例如: image.png

怎么补rtl的样式呢?

例如你正常写,从左到右的布局,也就是 dir="ltr" ,如下

.foo {
    float: right;
    margin-left13px;
    text-align: right;
    font-size13px;
    border-color: lightgray;
    border-width2px 0 2px 2px;
    border-style: solid dashed solid solid
}

如果要兼容阿语的话,就要写成下面这样👇🏻

  • 仔细观察一下,基本都要写成反向的,left <==> right,margin-left <==> margin-right
.foo {
    font-size13px
    border-color: lightgray
}
 
[dir="ltr"] .foo {
    float: right;
    margin-left13px;
    text-align: right;
    border-width2px 0 2px 2px;
    border-style: solid dashed solid solid
}
 
[dir="rtl"] .foo {
    float: left;
    margin-right13px;
    text-align: left;
    border-width2px 2px 2px 0;
    border-style: solid solid solid dashed
}

如何自动适配

自动适配是什么意思?

比如,我们在没有兼容阿语之前,正常写代码,肯定就是上面的第一种形式

.foo {
    float: right;
    margin-left13px;
    text-align: right;
    font-size13px;
    border-color: lightgray;
    border-width2px 0 2px 2px;
    border-style: solid dashed solid solid
}

我们希望,我们在打包时(wewbapck),自动把上面的代码,打包成下面这种👇。这样对我们的兼容阿语来说,是最简单的,而且以后的开发过程中,也不用特意的去[dir="rtl"] .xx { ... }的代码

.foo {
    font-size13px
    border-color: lightgray
}
 
[dir="ltr"] .foo {
    float: right;
    margin-left13px;
    text-align: right;
    border-width2px 0 2px 2px;
    border-style: solid dashed solid solid
}
 
[dir="rtl"] .foo {
    float: left;
    margin-right13px;
    text-align: left;
    border-width2px 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",
}

使用时的注意事项

  1. 不能写在内联样式style里面 ❌
    <span style="margin-left: 12px">
    
  2. 实在需要动态的怎么办? (以vue为例,react也是类似)
    <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…


码字不易,点赞鼓励!