RTL适配实践
背景
- 阿拉伯语适配是一个比较麻烦的事情，不仅仅在于它文案的适配，更多的是在于其语言习惯的变化。由从左到右(LeftToRight)的布局习惯变为了从右向左(RightToLeft)的布局习惯。
https://sabq.org/
http://wam.ae/ar - 通过上面的网站，可以很直观地看出像阿拉伯语，典型 RTL 布局网站的特点：
- 文字都是右对齐，并且是从右往左阅读的
- 排版都是从右到左的，在一个产品列表中，右边第一个商品是第一个
- 箭头代表的意义刚好相反，比如在轮播图中，向左箭头代表下一帧，而向右箭头则代表查看上一张图片
思考
对于rtl网站的适配，这里有两种方案参考
1、direction 布局方案
2、transform镜像翻转方案
direction 布局方案
- direction是css属性，css手册中对direction的描述：该属性指定了块的基本书写方向，以及正对Unicode双向算法的嵌入和覆盖方向。
- 通俗的讲就是：
1、定义过 direction:rtl 的元素，如果没有预先定义过 text-align，那么这个元素的 text-align 的值就变成了 right，如果设置了 left/center 则无效
2、对于数字和标点符号以外的编码，顺序仍然是从左到右的
3、改变了 inline-block 元素的书写顺序 - direction适配方案借助rtlcss 模块来完成。
.test: {
direction: rtl;
margin-right: 10px;
float: left;
}
通过rtlcss模块处理后
.test: {
direction: ltr;
margin-left: 10px;
float: right;
}
最后通过一套代码编译成一套 html，多套 css，一套 js 文件，区分国家用户来进行访问。
transform镜像翻转方案
transform镜像翻转通过一套html，一套css，一套js文件既可完成ltr和rtl适配
- 对比了一下direction和transform的方案，最终我在项目中选择了transform方案，transform实现起来比较简单，但是也存在缺陷，这个下面会提到。
- transform镜像翻转实现rlt和ltr原理：
- transform: scaleX(-1); 以使页面沿着中轴进行水平翻转，通过水平翻转，原本 LTR 的布局页面会变成RTL布局页面，但图片和文字会被相对于的翻转了，这时候在被翻转的文字和图片上设定transform: scaleX(-1)镜像翻转回来就完美实现了，理论看似很简单，实际上会遇到一些问题;
下面介绍一下我在项目中的实现（react中台项目）
封装一个FlipBox组件用来包裹需要翻转的text和img（FlipBox 可以替换页面中的span标签，img通过div包裹），获取url中的locale字段，locale字段来判定LTR布局还是RTL布局。
const locale = localeDeal() || 'en-US';
export const FlipBox = ({ children, ...props }) => {
if(typeof children === 'string') {
return (
<span
{...props}
style={{ transform: (locale === 'he-IL' || locale === 'ar-EG') ? 'scaleX(-1)' : 'none' }}
>{ children }</span>
)
}
return (
<div
{...props}
style={{
display: 'inline-block',
transform: (locale === 'he-IL' || locale === 'ar-EG') ? 'scaleX(-1)' : 'none',
}}
>
{ children }
</div>
)
}
- 获取根元素dom（root），然后进行翻转。
注意：这里为什么不能获取html或者body标签来进行翻转呢？
因为通过html、body在翻转会影响到modle弹框以及message的翻转，这个导致了很严重的问题，不说解决不了，因为没必要。
if(locale === 'he-IL' || locale === 'ar-EG') {
const domeRoot = document.getElementById('root');
domeRoot.style.transform="scaleX(-1)";
}
- 在页面中引用FlipBox组件，然后包裹需要翻转的图片和文字
<div className={styles.formItemTitle}>
<FlipBox>我的滑板鞋，时尚时尚最时尚 {''}</FlipBox>
<FlipBox>
<img className={styles.modalImg} src={imgList.bills} alt="" />
</FlipBox>
</div>
这种方式可以实现图片和文字的正常显示。看似结束了，好像完美解决了。但是我们忽略了input这个标签
input经过root的transform翻转和自身的transform翻转后会回复到之前的状态，简单来说负负的正。还是LTR布局格式，所以还要借助direction特定对input(这里的input是antd中的，原理一样)设定一个rtl来适配。
export const isLeftType = locale !== 'he-IL' && locale !== 'ar-EG';
<FlipBox>
<input
dir={isLeftType ? "ltr" : "rtl"}
value={value}
onChange={onChange}/>
</FlipBox>
这里可以解决input的RTL适配。
当前页面为状态页面的时候，可能存在LTR布局和RTL布局无差异的情况，这个时候可以通过transform: scaleX(-1)把整个页面翻转回来，这样可以做到减少入侵代码，提高代码的可读性。
transform: scaleX(-1)方案来解决RTL布局的适配优缺点都很明显
优点：
1、transform翻转是兼容原来的css和js逻辑的。翻转后margin-left: 10px;在浏览器的理解下是向右的，而direction 方案只是针对 CSS，JS 逻辑需要调整兼容。
2、transform不需要考虑 CSS 命名，CDN 部署等一系列工程问题，因为它是划分 CSS 作用域的方式，针对 LTR/RTL 布局进行隔离适配。
3、内嵌样式 transform 方案也可以很好地做到兼容，而 direction 方案是针对 CSS 文件的，如果要针对 html 文件则需要另外额外的工作。
缺点：
1、transform 翻转的方案，需要嵌入很多入侵业务的代码，耦合度较高，复用性较低。如果页面复杂，不建议使用这种方案。
