HTML RTL/LTR 开关

Question

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

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

我正在使用 Angular，在主 Controller 中，我根据所选语言将全局变量设置为 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>

选择西方语言时，这些divs显示为:

+--------------++--------------++--------------++--------------+
|              ||              ||              ||              |
|              ||              ||              ||              |
|  <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 block ，我看到 direction 具有以下效果:

1. 使用内联 block (有效)

2. 如果你 float 它们(不起作用)

3. 如果你使用 flexbox(可行)

4. 表格展示(作品)

所以我想当您切换方向时，我有您拥有的选项。让我知道您对此的反馈。谢谢!

$('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>