国际化 RTL方案

RTL 涉及到哪些不同

1. 文案排版、字体大小、字体
2. icon
3. 图片
4. 配色
5. 等等

具体的介绍可以参考下面的这两篇文章：

1. 干货 | 国际化探索之路-Trip.com如何走进阿拉伯市场
2. material design bidirectionality

涉及的团队

1. 产品
2. UI UE
3. 前端
4. 测试
5. 其他

前端涉及的技术点

1. rtl 排版 （大部分情况通过dir 是解决实现）
2. 样式文件中的显示方向性设置反向转换实现
   比如：

margin padding
position
transform
animation
....

3. js动态设置样式的反向转换实现（react类的技术实现方案 提倡数据驱动 相对好一些）
4. 其他 比如：字体 字号，甚至颜色等等。

方案

1. 不同的地区站点 加载不同的css文件 , 例如：苹果官网
   https://www.apple.com/ vs https://www.apple.com/jo-ar/
   技术实现方案：
   • rtlcss

构建阶段，产出两份样式 ,不同地区加载对应的样式文件

2. 不同的地区站点 部分加载不同的css样式
   参考竞品：
   • https://www.binance.com/ar vs https://www.binance.com/zh-CN
     使用的是css-in-js的方案 并且使用的SSR
   • 爱彼迎 ar vs 爱彼迎 en
     使用的是css-in-js的方案
   • google 不同地区，也是采用的css-in-js方案
     比如可以使用stylis-rtl & emotion实现

css-in-js 方案的核心，是利用js动态创建style的能力

伪代码

//html 

...

// js
const classConfig = {
   name: '.logo'
   rules: {
    'padding-left': '20px',
  }
}
const rules =   classConfig.rules;
const dir = document.dir;
if(dir ==='rtl') {
    rules['padding-right'] = rules['padding-left'];
    delete rules['padding-left'];
}
const style = document.createElement('style');
const styleStr = Object.keys(rules).map(key=> {
  return `${key}: ${rules[key]};`
}).join('');
style.innerHTML =`
${classConfig.name}: {
  ${styleStr}  
}
`

3. 不同的地区站点 加载一份，css文件内部通过地区标记 设置不同的样式

示例代码

[dir='ltr'] .logo {
  margin-left: 100px;
}

[dir='rtl'] .logo {
  margin-right: 100px;
  margin-left: 0px;
}

代码生成可以通过构建过程中自动生成，比如使用postcss-rtl

关于CSS IN JS

参考线上example

参考

1. 关于网站左右布局适配
2. arabic-styles
3. RTL适配实践
4. 国际化 - 通用 LTR/RTL 布局解决方案
5. 干货 | 国际化探索之路-Trip.com如何走进阿拉伯市场