HTML RTL/LTR переключатель

Question

У меня есть веб-приложение, которое должно поддерживать все языки, в том числе на Ближнем Востоке.

После некоторого чтения, кажется, что использование тега dir выполняет работу во многих случаях (например, текст выравнивается правильно, и у меня есть таблицы, которые правильно меняются при необходимости).

Я использую Angular и, в пределах основного контроллера, устанавливаю глобальную переменную как rtl или ltr в зависимости от выбранного языка.

Существует, однако, ситуация, когда своп не происходит, как я ожидаю. Есть 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> 

При выборе западного языка, эти дивы выглядят как:

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

и при выборе среднего востока язык, мое ожидание что бы показать, как:

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

к моему удивлению, порядок, в котором показаны внутренние дивы остается неизменным (т.е. как в западном примере языка выше).

Как указано, у меня есть таблица, которую делает в соответствии с настройкой переменной Language_Layout.

Может ли кто-нибудь сказать мне, что я делаю неправильно или, может быть, я не должен ожидать, что divs будут отменены в их порядке?

Спасибо!

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>