Direction

In this chapter, we will learn about CSS direction property to use in our websites.

The direction property defines the text direction.

The direction property sets the base text direction of block-level elements and the direction of embeddings which are created by the unicode-bidi property. It also sets the text's default alignment and block-level elements and the direction that cells flow within a table row.

As a difference from dir attribute in HTML, direction property is not inherited from table columns into table cells.

The direction property has no any effect on inline-level elements.

CSS Syntax

direction: ltr | rtl | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
     <style>
          div {
               direction: rtl;
           }
     </style>
   </head>
   <body>

        <p>As you can see, this text is written with default direction.</p>
        <div>.However, this text is written from right to left as we defined</div>

   </body>
</html>

Here is the result:



Property Values

Value Descriptions
ltr It means that the direction of text will be from left to right. It is the default value of this property.
rtl It means that the direction of text will be from right to left.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.