切换网页语言为阿拉伯语时如何保留原页面设计布局？

1. 优先使用CSS原生逻辑属性（最省心方案） #

这是W3C推出的原生方向适配特性，不需要编写两套样式，浏览器会自动根据页面的dir属性自动适配左右方向：

• 把原来的物理方向属性padding-left/padding-right/margin-left/margin-right替换为逻辑属性padding-inline-start/padding-inline-end/margin-inline-start/margin-inline-end
• LTR（英文）场景下，inline-start对应左、inline-end对应右；RTL（阿拉伯语）场景下，inline-start自动对应右、inline-end自动对应左，布局效果和英文版本完全对称，你原有的响应式断点规则完全不用调整，只需要替换属性名即可。

修改后的样式示例：

<style type="text/css">
@media (min-width:0) and (max-width:607px){
  #MainContent_WebChartControl2_IMG{
    padding-inline-end: 270px;
  }
  #MainContent_WebChartControl3_IMG{
    padding-inline-end: 270px;
  }
  #MainContent_WebChartControl1_IMG{
    padding-inline-end: 400px;
    padding-inline-start: 90px;
    margin-top: -190px;
    margin-inline-start: -116px;
  }
}

@media (min-width: 608px)and (max-width: 768px) {
  #MainContent_WebChartControl3_IMG {
    padding-inline-start: 140px;
    margin-inline-start: -140px;
  }
  #MainContent_WebChartControl2_IMG {
    padding-inline-start: 140px;
    margin-inline-start: -140px;
  }
  #MainContent_WebChartControl1_IMG {
    padding-inline-end: 300px;
    padding-inline-start: 90px;
    margin-top: -100px;
    margin-inline-start: -40px;
  }
}

/* 剩余所有断点的left/right属性全部按照上述规则替换即可，无需修改数值和断点范围 */
</style>

切换语言的时候只需要给<html>或<body>标签切换dir属性：英文设dir="ltr"，阿拉伯语设dir="rtl"即可。

2. 兼容旧浏览器方案：dir属性配合CSS覆盖规则 #

如果你的项目需要兼容不支持逻辑属性的旧版本浏览器，可以用该方案：

• 切换语言时同样给根标签切换dir="ltr"/dir="rtl"属性
• 针对dir="rtl"的场景编写覆盖样式，把所有左右边距数值反向即可，示例规则如下：

/* 阿拉伯语适配覆盖规则，加在原有CSS末尾即可 */
[dir="rtl"] #MainContent_WebChartControl2_IMG {
  padding-right: 0;
  padding-left: 270px;
}
/* 其余所有元素的左右边距都按照这个逻辑反向编写覆盖规则即可 */

3. 大批量样式适配可选工具 #

如果你的项目样式体量很大，手动修改成本高，可以用RTLCSS工具，直接将现有LTR版本的CSS文件自动生成对应的RTL版本CSS文件，切换语言时动态加载对应CSS文件即可。

4. 预处理器封装方案 #

如果你的项目使用Sass/Less等CSS预处理器，可以自己封装方向属性的mixin，自动生成双向适配的样式规则，不用重复编写两套代码。

内容的提问来源于stack exchange，提问作者Shahed A.