最近写一个阿拉伯国家的web,因为阿拉伯语言的阅读习惯是从右到左,而且本来就有做好了的英语版本的web,为了快速开发,就把英语版本的web复制一份出来,在调整一下css样式就好了,如下:
在HTML根元素加上css:
body{
transform:scale(-1,1);
}
//这样,整个web布局就会反过来。
但是,HTML内的文字也反过来了,所以这时,就可以在对应包裹文字的元素再把样式反过来(因为阿拉伯阅读习惯本来就是从右到左,所以翻译书写习惯就是从右到左,所以开发时,文字在英文状态下正常顺序)
例如:
<p>er<p>
p{
transform:scale(-1,1);
}
而行内元素需要变成块级元素或行内块:
<span>rwerer</span>
span{
display:inline-block;
transform:scale(-1,1);
}
但是,我的项目里有fixed定位的元素,HTML根元素使用了transform,把fixed定位降级了,这时怎么办呢?
别急,方法还是有的:
就是,哪里需要转换结构就在哪个结构转换,再在结构内把文字转过来,而有fixed定位的,避开transform(可以再嵌套元素避开)
如:
HTML:
<div class="container">
<div class="tran">
<p>从右到左阅读习惯</p>
</div>
</div>
css:
.container{
position:fixed;
top:0;
left:0;
}
.tran{
transform:scale(-1,1);
}
.tran p{
transform:scale(-1,1);
text-align:right;
}
end