CODESCRACKER

CSS direction: define the text direction

The CSS direction property is used to define the direction of text. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .a{direction: ltr;}
      .b{direction: rtl;}
   </style>
</head>
<body>

   <div class="a">
      <h2>direction: ltr</h2>
   </div>
   
   <div class="b">
      <h2>direction: rtl</h2>
   </div>
   
</body>
</html>
Output

direction: ltr

direction: rtl

In the above example, the following CSS code:

direction: ltr;

targets any HTML element with a class of "a" and sets its direction property to "ltr" (left-to-right). This means that any text or other content within the element will be displayed from left to right, as is the default in many Western languages. Now the following CSS code:

direction: rtl;

targets any HTML element with a class of "b" and sets its direction property to "rtl" (right-to-left). This means that any text or other content within the element will be displayed from right to left, as is the default in many Middle Eastern and South Asian languages.

Two HTML "div" elements with "h2" headings inside are included in the code as a final step. The content of the first "div" will be displayed left-to-right because it has the class "a," whereas the content of the second "div" will be displayed right-to-left because it has the class "b."

CSS direction syntax

The syntax of the direction property in CSS is:

direction: x;

The value of x should be any of the following:

You can control how text and other content flow within your web page by setting the direction property in this way, ensuring that it is displayed correctly and in accordance with the conventions of the language and culture it represents.

Advantages of the direction property in CSS

Disadvantages of the direction property in CSS

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!