html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS direction property

Definition

The CSS direction property allows us to specify the base writing direction of blocks, embeddings and overrides, table columns and incomplete lines of justified text for the Unicode bidirectional algorithm.

Applies To

All elements.

Property Values

For inline elements to affect directional reordering, the direction CSS property must be used in conjunction with 'unicode-bidi: embed;' or 'unicode-bidi: bidi:override;'.

inherit - Text direction attributes are inherited from the parent element.

ltr - Text direction is from left to right.

rtl - Text direction is from right to left.

Default Value

Default value is set to ltr so text direction is from left to right.

Inheritance

The direction property is inherited from the parent element if no value is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS direction property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS direction Property</title>

<!-- Valid values for CSS direction Property are:
	
	inherit, ltr and rtl.
	
--> 

<style type="text/css">

/* Change Direction */
.para1 {
  direction: rtl;
}
</style>
</head>

<body>
<h1>The direction CSS property</h1>
<p>A sentence with default direction - ltr</p>
<p class="para1">A sentence with overridden direction - rtl</p>
</body>
</html>

How It Looks

The results of using the direction property with the values above will look something like the following:

notepad
CSS cursor    << Prev          Next >>   CSS display

go to home page Homepage go to top of page Top