Свойство direction

В тех случаях, когда запись текста задаётся в другом направлении, например, если используется арабский алфавит, для соответствующего порядка символов с помощью свойства direction можно изменить параметры положения элементов.
Свойство direction и его параметры:
direction : ltr;
direction : rtl;
direction : inherit;
ltr
– Направление слева направо.
rtl
– Направление справа налево.
inherit
– Наследует значение родителя.
Направление, соответствующее параметру ltr
задано по умолчанию и назначается в тех случаях, когда основное содержимое имеет направление справа налево и нужно отобразить часть материала слева на право.
Свойство direction меняет способ отображения текста в блоке с помощью параметров ltr
и rtl
.

HTML
<div class="box ltr">
<div class="title">
ltr
</div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Donec ex arcu, accumsan accumsan
auctor tristique, scelerisque in sapien.
</div>
<div class="box rtl">
<div class="title">
rtl
</div>
Nullam ultrices nec massa vel
ultrices. Morbi molestie sapien
metus, sed malesuada ex luctus ut.
Ut ac arcu sed nibh posuere
rutrum semper congue nisl.
</div>
CSS
.box{
width: 140px;
padding: 20px;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
background-color: #fC0;
}
.title{
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.ltr{
direction: ltr;
}
.rtl{
direction: rtl;
}
С помощью свойства direction изменяется порядок колонок в таблице.

HTML
<table class="ltr">
<caption>
ltr
</caption>
<tr>
<td>Наименование</td>
<td>Цена</td>
</tr>
<tr>
<td>Товар 1</td>
<td>100р.</td>
</tr>
<tr>
<td>Товар 2</td>
<td>120р.</td>
</tr>
<tr>
<td>Товар 3</td>
<td>180р.</td>
</tr>
<tr>
<td>Товар 4</td>
<td>200р.</td>
</tr>
</table>
<table class="rtl">
<caption>
rtl
</caption>
<tr>
<td>Наименование</td>
<td>Цена</td>
</tr>
<tr>
<td>Товар 1</td>
<td>100р.</td>
</tr>
<tr>
<td>Товар 2</td>
<td>120р.</td>
</tr>
<tr>
<td>Товар 3</td>
<td>180р.</td>
</tr>
<tr>
<td>Товар 4</td>
<td>200р.</td>
</tr>
</table>
CSS
table {
font-size: 18px;
display: inline;
margin-left: 18px;
margin-right: 18px;
border-collapse: collapse;
}
caption{
font-size: 22px;
font-weight: bold;
margin-left: 10px;
margin-bottom : 10px;
}
td {
padding: 4px;
border: 1px solid black;
}
.ltr{
direction: ltr;
}
.rtl{
direction: rtl;
}
Свойство direction позволяет изменять позицию полосы прокрутки в блоке.

HTML
<div class="box ltr">
<div class="title">
ltr
</div>
<ol>
<li>Первый</li>
<li>Второй </li>
<li>Третий</li>
<li>Четвертый</li>
<li>Пятый</li>
<li>Шестой</li>
<li>Седьмой</li>
<li>Восьмой</li>
<li>Девятый</li>
</ol>
</div>
<div class="box rtl">
<div class="title">
rtl
</div>
<ol>
<li>Первый</li>
<li>Второй </li>
<li>Третий</li>
<li>Четвертый</li>
<li>Пятый</li>
<li>Шестой</li>
<li>Седьмой</li>
<li>Восьмой</li>
<li>Девятый</li>
</ol>
</div>
CSS
.box{
width: 165px;
height: 165px;
padding: 8px;
margin-left: 20px;
margin-right: 20px;
overflow-y: scroll;
display: inline-block;
background-color: #d5d5d5;
}
.title{
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.ltr{
direction: ltr;
}
.rtl{
direction: rtl;
}