HTML RTL / LTR switch

Question

I have a Web application that needs to support all languages, including Middle-East.

After some reading, it would appear that using the dir tag does the job in many cases (for instance, text aligns correctly and I have a tables that correctly swap when needed).

I'm using Angular and, within the main controller, I set a global variable as rtl or ltr depending on the selected language.

There is, however, a situation in which the swap is not taking place as I'm expecting. There are 4 divs that present textual information as follows:

<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>

When a western language is selected, these divs appear as:

+--------------++--------------++--------------++--------------+
|              ||              ||              ||              |
|              ||              ||              ||              |
|  <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>    |
|              ||              ||              ||              |
|              ||              ||              ||              |
+--------------++--------------++--------------++--------------+

To my surprise, the order in which the internal divs are shown remains unchanged (i.e. like in the western language example above).

As stated, I have a table which does revert according to the setting of the Language_Layout variable.

Could anyone tell me what I'm doing wrong or, perhaps, I shouldn't be expecting the divs to be reversed in their order?

Thanks!!

Answer 1

For html blocks in a line, I have seen that direction has the following effect:

1. Using inline-block (works)

2. If you float them (does not work)

3. If you use flexbox (works)

4. table display (works)

So I guess I have the options you have when you switch direction. Let me know your feedback on this. Thanks!

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