direction

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Short information
CSS CSS2
Default value ltr
Inherited Yes
Applied To all elements
HTML analog <tag direction="ltr | rtl">
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-direction
Description
The parameter direction is intended for sites in which the text direction matters. For example, at use of the Arabian alphabet reading occurs from right to left.
The attribute direction is universal enough and operates following possibilities:
• A way of the text display in the block;
• An order of columns in the table;
• A position of a scrolling strip in the block;
• Last trailing position of the text block at text-align: justify.
It is used with the integral elements, the attribute value unicode-bidi should be specified as embed or override.

Syntax

direction: ltr | rtl
Values
ltr
It determines the direction from left to right.
rtl
It determines the direction from right to left.

Example 1

 
<!--
   DIV.rtl { 
    direction: rtl; /* Direction */ 
    width: 200px; /* Block width */ 
    height: 150px; /* Block height */ 
    overflow: scroll; /* Scrolling band */ 
    text-align: left; /* Left alignment */ 
    padding: 5px; /* Areas around thje text */ 
    border: 1px solid #000; /* Frame parameters */ 
   }
 
-->
<div class="rtl">The bicycle has been invented and different layout ways have been invented, too. You must acquaint more with world experience of layout and must not spend time for developing the things which are known for everybody.</div>
The result of this example is shown on the figure 1. Pay attention at dot location.

Example 2
 
<!--
    TABLE { 
     direction: rtl; /* Columns run right to left */
     width: 100%; /* Table width */
    } 
 
-->
<table border="1" cellspacing="0">
<tbody>
<tr>
<td></td>
<td>1999</td>
<td>2000</td>
<td>2001</td>
<td>2002</td>
<td>2003</td>
</tr>
<tr>
<td>Oil</td>
<td>16</td>
<td>34</td>
<td>62</td>
<td>74</td>
<td>57</td>
</tr>
<tr>
<td>Gold</td>
<td>4</td>
<td>69</td>
<td>72</td>
<td>56</td>
<td>47</td>
</tr>
<tr>
<td>Wood</td>
<td>7</td>
<td>73</td>
<td>79</td>
<td>34</td>
<td>86</td>
</tr>
</tbody>
</table>
The result of this example is shown on the figure 2. Columns image right to left

Browsers

When the attribute "direction" with the value "rtl" is added to the block with scrolling band (for example, <TEXTAREA>) browsers nternet Explorer, Firefox and Netscape image the scrolling in the left side and Opera Рё Safari from the right side.