适配阿拉伯文镜像页面

laishaojiang

已于 2022-03-03 14:26:53 修改

阅读量5k

点赞数 2

文章标签： javascript html 前端

于 2022-02-07 17:08:33 首次发布

本文链接：https://blog.youkuaiyun.com/laishaojiang/article/details/122811586

版权

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

请添加图片描述

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

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

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

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

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'

//然后在需要的页面上
if(isRTL) {
  $('.banner-content').addClass('rtl')
}

//后面就基于这个类名去单独改样式了

而图片那里，本质是没错的，确实是会反过来，只是我们不希望他反，保持原样就好了，这是又需要用到另一个css属性了: direction

direction也有两个值，rlt和ltr。跟dir属性差不多，向上面的图片我不需要他翻转，就单独给他的父级加上***direction:ltr***,这样可以了

其他的就是一些细节的调整了，比如margin,padding,position 这些，都比较繁琐，把margin-left换成margin-right, 定位的left换成right等等；

对了，还有文本对齐，如果有用到text-align的话，不要用left和right了，改成用start和end，这样加上dir="rtl"之后就会跟着反转了

第一次接触这种镜像适配，如果大家有啥问题或者还有更好的建议，请一起指出来，感谢

最后附上我们项目的地址参考一下 https://www.agogopost.com/

完事~