HTML RTL / LTR 切换

Question

我有一个需要支持所有语言的 Web 应用程序，包括中东。

经过一番阅读，使用dir 标签似乎在许多情况下都可以完成这项工作（例如，文本正确对齐，并且我有一个表格可以在需要时正确交换）。

我正在使用 Angular，在主控制器中，我根据所选语言将全局变量设置为 rtl 或 ltr。

但是，有一种情况是交换没有像我预期的那样发生。有 4 个 div 显示如下文本信息：

<div style="width:100%" dir="{{Language_Layout}}">

    <div style="width:25%">
      {{Text_of_Div_1}}
    </div>
    <div style="width:25%">
      {{Text_of_Div_2}}
    </div>
    <div style="width:25%">
      {{Text_of_Div_3}}
    </div>
    <div style="width:25%">
      {{Text_of_Div_4}}
    </div>
</div>

选择西方语言时，这些 div 显示为：

+--------------++--------------++--------------++--------------+
|              ||              ||              ||              |
|              ||              ||              ||              |
|  <text 1>    ||   <text 2>   ||   <text 3>   ||  <text 4>    |
|              ||              ||              ||              |
|              ||              ||              ||              |
+--------------++--------------++--------------++--------------+

and when a middle-east language is selected, my expectation is that it would show as:

+--------------++--------------++--------------++--------------+
|              ||              ||              ||              |
|              ||              ||              ||              |
|  <text 4>    ||   <text 3>   ||   <text 2>   ||  <text 1>    |
|              ||              ||              ||              |
|              ||              ||              ||              |
+--------------++--------------++--------------++--------------+

令我惊讶的是，内部 div 的显示顺序保持不变（即像上面的西方语言示例一样）。

如上所述，我有一个表确实根据Language_Layout 变量的设置恢复。

谁能告诉我我做错了什么，或者我不应该期望 div 的顺序会被颠倒？

谢谢！！

Answer 1

对于一行中的html块，我看到direction有如下效果：

1. 使用内联块（有效）

2. 如果你浮动它们（不起作用）

3. 如果你使用 flexbox（有效）

4. 表格展示（作品）

所以我想当你切换direction 时我有你的选项。让我知道您对此的反馈。谢谢！

$('button').click(function(e) {
  if ($(e.target).text() == "Left") {
    $('.wrapper').addClass('left');
    $('.wrapper').removeClass('right');
  } else {
    $('.wrapper').removeClass('left');
    $('.wrapper').addClass('right');
  }

});

.wrapper {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 10px 0;
}
.title {
  margin: 5px 0;
}
.box {
  height: 100%;
  width: 25%;
  border: 1px solid green;
  margin: 5px;
}
.box.inline-block {
  display: inline-block;
  vertical-align: middle;
}
.box.float {
  display: inline-block;
  vertical-align: middle;
  float: left;
}
.wrapper.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.wrapper.table {
  display: table
}
.wrapper.table > .box {
  display: table-cell;
}
.btn {
  background: #fff;
  border: 1px solid black;
}
.btn.l {
  border: 1px solid blue;
}
.btn.r {
  border: 1px solid red;
}
.btn_wrapper {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 10px 0;
}
.left {
  direction: ltr;
}
.right {
  direction: rtl;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn_wrapper">
  <button class="btn l">Left</button>
  <button class="btn r">Right</button>
</div>
<div class="title">
  1. Using inline block (works)
</div>
<div class="wrapper">
  <div class="box inline-block">text 1.</div>
  <div class="box inline-block">text 2.</div>
  <div class="box inline-block">text 3.</div>
</div>
<div class="title">
  2. If you float them (does not work)
</div>
<div class="wrapper">
  <div class="box float">text 1.</div>
  <div class="box float">text 2.</div>
  <div class="box float">text 3.</div>
  <div style="clear:both"></div>
</div>
<div class="title">
  3. If you use flexbox (works)
</div>
<div class="wrapper flex">
  <div class="box">text 1.</div>
  <div class="box">text 2.</div>
  <div class="box">text 3.</div>
</div>
<div class="title">
  4. table display (works)
</div>
<div class="wrapper table">
  <div class="box">text 1.</div>
  <div class="box">text 2.</div>
  <div class="box">text 3.</div>
</div>