HTML RTL/LTR 切换

Question

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

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

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

但是，在某些情况下，交换并没有像我预期的那样发生。显示文字信息的div有4个，如下：

<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 的显示顺序保持不变（即像上面的西方语言示例）。

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

谁能告诉我哪里做错了，或者我不应该期望 div 的顺序颠倒？

谢谢！！

Answer 1

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

使用内联块（有效）
如果你浮动它们（不起作用）
如果你使用 flexbox（可行）
table 显示（有效）

所以我想我有你切换时的选项 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>

HTML RTL/LTR 切换

HTML RTL / LTR switch

html

css

bidirectional

css-float

angularjs