selector {
    direction: ltr | rtl
    /* ltr : 왼쪽  → 오른쪽(line-left-to-line-right)
       rtl : 오른쪽 → 왼쪽(line-right-to-line-left) */
}
/* 키워드 값 */
direction: ltr; /* 초깃값 */
direction: rtl;

/* 전역 값 */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;
<section class="ltr">
    <h4>direction: ltr</h4>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</section>
<section class="rtl">
    <h4>direction: rtl</h4>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</section>
.ltr {
    direction: ltr;
}
.rtl {
    direction: rtl;
}

/* 코드의 복잡성을 줄이기 위해서
   이하 공통 스타일은 생략했습니다. */
실제 적용된 모습
<section class="ltr">
    <h4>direction: ltr</h4>
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
</section>
<section class="rtl">
    <h4>direction: rtl</h4>
    <button>button 1</button>
    <button>button 2</button>
    <button>button 3</button>
</section>
.ltr {
    direction: ltr;
}
.rtl {
    direction: rtl;
}

/* 코드의 복잡성을 줄이기 위해서
   이하 공통 스타일은 생략했습니다. */
실제 적용된 모습
<table class="ltr">
    <caption>direction: ltr</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<table class="rtl">
    <caption>direction: rtl</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
.ltr {
    direction: ltr;
}
.rtl {
    direction: rtl;
}

/* 코드의 복잡성을 줄이기 위해서
   이하 공통 스타일은 생략했습니다. */
실제 적용된 모습