适配阿拉伯文镜像页面

灬answer

前端程序猿

我们国际业务的项目，支持多种语言切换的，是采用词条方式来做，即每个文案都是一个单独的词条变量，根据当前的所选的语言环境，渲染对应的语言文字，语言是在我们的后台管理系统中添加的

但是，最近我们需要新增 阿拉伯语 ，扩展语种倒没啥，在后台新增一个就好了，主要的问题是排版，

阿拉伯人的网站都是镜像的，即是从右向左排版的，文字阅读也是从右向左。

当时以为要重新为这个语言版本单独写一套结构和样式，吓得我头发都掉了几根。。。

后面看了一些文档和参考了其他人的网站，发现其实有个属性可以统一翻转

实现

html dir 属性

反正就是说，这个东西可以让你自己定义网站的排版方式，给html加个dir="rlt"，书写的顺序的是从右到左了。

这么简单？当然会有坑啦，后面再说，先看我是怎么做的

首先判断是阿拉伯语就给html加上dir=rtl属性

if(i18n === 'ar') document.documentElement.setAttribute("dir", "rtl")//i18n是我们项目里的全局变量，表示当前选择的语言，ar代表阿拉伯语

这一步做完，不出意外的话，你的页面大部分就都反过来了

但是人生总是充满意外~~

加上dir="rtl"后

可以看到，顶部导航栏是正常换了。banner部分排版没换过来，图片不该换的反而被换了。。。

这个就是坑啦。

原因就是，banner那使用的是float布局，而dir属性对浮动是不生效的

所以这里得改下，有两种方式：

1，把布局方式给改一下，把float布局换成 flex

2，单独改这里的样式，把浮动方向换一换

因为这块原来不是我写的，所以尽量不去改动原来的布局，这里我选择了第二种方式，因为后面可能有大量需要单独处理的地方，所以先定义一个全局变量

const isRTL = document.documentElement.getAttribute('dir') === 'rtl'
//然后在需要的页面上