HTML - DOM Element dir Property

Quiz

The HTML DOM Element dir property is used to get (retrieve) and set (update) the text direction within the document or web page. The direction refers to the way the text content is displayed, either from left to right (LTR) or right to left (RTL).

This property determines the text's directionality, specifying whether the element's content should be displayed from left to right (LTR), right to left (RTL), or automatically based on the content (auto).

Syntax

Following is the syntax of the HTML DOM Element dir (to set the property) −

element.dir = "value";

Here, the value is the value that you want to assign to the dir property.

Use the following syntax to get the dir property −

element.dir;

Properties

Following is a list of the property values of the "dir" −

Property Value	Description
RTL	Determines the right-to-left direction of element's content.
LTR	Determines the left-to-right direction of element's content.
auto	Determines the text direction automatically.

Return Value

This property returns a string that represents the directionality of the text within the element.

Example 1: Setting Text Direction to Right-to-Left (RTL)

The following is a basic example of the HTML DOM Element dir property. It sets the dir property with the value rtl to the paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element dir</title>
</head>
<body>
<h3>HTML DOM Element dir Property</h3>
<p>Setting Text Direction to Right-to-Left (RTL)</p>
<p id="demo">This text direction is right-to-left.</p>
<script>
   let demo = document.getElementById('demo');
   demo.dir = "rtl";
</script>
</body>
</html>

The paragraph will be displayed on the right side of the page because the dir property with the value "rtl" is applied to the p element.

Example 2: Retrieving the dir Property Value

Here is another example of the HTML DOM Element dir property. This property is used to retrieve the dir property which is already set within the <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element dir</title>
</head>
<body>
<h3>HTML DOM Element dir Property</h3>
<p>Retrieving the text direction</p>
<div id="demo" dir="ltr">This text direction is left-to-right.</p>
<button onclick="display()">Display dir Property</button>
<p id="res"></p>
<script>
   function display(){
      let demo = document.getElementById('demo');
      document.getElementById('res').innerHTML = 
	  "The 'dir' property value: " + demo.dir;
   }
</script>
</body>
</html>

When the button is clicked, it displays the dir property value as "ltr".

Example 3: Dynamically Changing Text Direction

In the example below, we use the HTML DOM dir property to change (or update) the dir property value dynamically −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element dir</title>
</head>
<body>
<h3>HTML - DOM Element dir Property</h3>
<p>Dynamically Changing Text Direction 
<button onclick="changeDirection()">Toggle Direction</button>
<p id="text" dir="ltr">This text direction can be toggled.</p>
<script>
   function changeDirection() {
      var textElement = 
      document.getElementById("text");
      if (textElement.dir === "ltr") {
         textElement.dir = "rtl";
      } else {
         textElement.dir = "ltr";
      }
   }
</script>
</body>
</html>

When the button is clicked, the text direction of the paragraph toggles between left-to-right and right-to-left.

Supported Browsers

Property
dir	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page