direction

Definition

The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).

Examples

Setting the direction of an element to RTL:

<p style="direction: rtl;">This text will be displayed from right to left</p>

Setting the direction of a table to RTL:

<table style="direction: rtl;">
  <tr>
    <td>Table column 1</td>
    <td>Table column 2</td>
    <td>Table column 3</td>
  </tr>
</table>

Setting the direction of a list to RTL:

<ul style="direction: rtl;">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Values

Best Practives

• Use direction property judiciously and only when necessary as it can have significant impact on the layout and appearance of an element.
• For bidirectional text, consider using unicode-bidi property along with the direction property.

Browser Compatibility