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 (
        { children }
      )
  }
  return (
    

      { children }
    
  )
}

• 获取根元素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组件，然后包裹需要翻转的图片和文字

    

      我的滑板鞋，时尚时尚最时尚 {''}
      
            
      
    

这种方式可以实现图片和文字的正常显示。看似结束了，好像完美解决了。但是我们忽略了input这个标签
input经过root的transform翻转和自身的transform翻转后会回复到之前的状态，简单来说负负的正。还是LTR布局格式，所以还要借助direction特定对input(这里的input是antd中的，原理一样)设定一个rtl来适配。

  export const isLeftType = locale !== 'he-IL' && locale !== 'ar-EG';

这里可以解决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 翻转的方案，需要嵌入很多入侵业务的代码，耦合度较高，复用性较低。如果页面复杂，不建议使用这种方案。