Arrow

CSS Text Direction

AuthorHariom Prajapati

Pubish Date28 Aug 2022

categoryCSS

It is used to change the text direction horizontally from left or from right(it is same as text alignment value left and right).

 

Syntax -

direction:value;

 

values

ltr

It is use to display texts in left side.(default) 

rtl It is use to display texts in right side.

 

  • ltr-left to right
  • rtl-right to left

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Direction</title>

    <style>
        h4 {
            direction: ltr;
        }

        h3 {
            direction: rtl;
        }
    </style>

</head>

<body>

    <h4>This is the default text direction (ltr).</h4>
    <h3>This is right-to-left text direction (rtl).</h3>

</body>

</html>

 

Output

Text Direction