h5如何兼容拉阿伯语或乌尔都语

投放到国外的h5都可以用i18n实现多语言开发

但是遇到像阿拉伯语或乌尔都语这种比较特殊的语言，他们的书写方向和浏览方向跟其他大多数语言是相反的，在我们看来，就像是整个世界镜像翻转了一样。

这在css怎么实现的呢

诶嘿，css有个属性叫direction，通过{ direction: rtl }把文本方向设置为“从右向左”，而且direction也能直接改变左右块状非float布局的方向。

那么，像float、padding-left、padding-right、margin-left、margin-right、border-left、border-right等这些不受direction属性的影响，我们应该怎么兼容呢？

一般我们获取到语言后，需要给html加上一个lang-direction的属性

let lang = 'ar'; // 你获取到的语言码
const langRightArr = ['ar', 'ur']
document.querySelector('html').setAttribute('lang-direction', langRightArr.includes(lang) ? 'right' : 'left')

然后在全局初始化的scss里加上

html[lang-direction = 'right'] {
    direction: rtl;
}

接着你可以写个mixin.scss，处理像padding-left、padding-right这些。

举个例子，兼容padding-left

@mixin padding-left($val: 0) {
    padding-left: $val;
    [lang-direction='right'] & {
        padding-left: initial;
        padding-right: $val;
    }
}

在组件中引入mixin.scss，通过@include使用padding-left

@import '../../assets/css/mixin.scss';

.content {
    @inlude padding-left(10px);
}

这样，当遇到阿拉伯语或乌尔都语这种从右往左的排版方向，"padding-left: 10px;"  会自动转成 "padding-right: 10px; padding-left: initial;"，完美

还有比如background-image这种，没办法通过自身的属性值实现镜像翻转，我是将整块元素沿着y轴翻转，有些取巧了

html[lang-direction = 'right'] & {  
    transform: rotateY(-180deg);
}

多语言处理起来挺麻烦的，像这种 “我离第x名还差y个东西”，x和y都有特别的UI样式，多语言翻译x和y也夹在中间的话就不好处理了，还望路过的大神指点指点。