Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Bdo dir Property
The HTML DOM Bdo dir property is associated with the HTML <bdo> element. Here, bdo stands for Bi-Directional Override. The <bdo> tag is used to override the current text direction which is by default left to right. The bdo dir property sets or returns the dir attribute value of a <bdo> element. The dir property is compulsory for the <bdo> element and specifies the direction of the text flow.
Syntax
Following is the syntax for setting the dir property −
bdoObject.dir = "ltr|rtl"
Here, ltr is left-to-right text direction, whereas rtl is right-to-left text direction.
Following is the syntax for returning the dir property −
bdoObject.dir
Parameters
The dir property accepts the following string values −
-
ltr − Sets text direction from left to right (default behavior).
-
rtl − Sets text direction from right to left.
Return Value
This property returns a string representing the current text direction of the <bdo> element, either "ltr" or "rtl".
Example − Getting and Setting Direction
Let us see an example for HTML DOM bdo dir property −
<!DOCTYPE html>
<html>
<head>
<title>Bdo dir Property Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
<p>Click the below buttons to get or change text direction:</p>
<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>
<p id="sample"></p>
<script>
function getDirection() {
var x = document.getElementById("myBdo").dir;
document.getElementById("sample").innerHTML = "The text direction is: " + x;
}
function setDirection() {
document.getElementById("myBdo").dir = "ltr";
document.getElementById("sample").innerHTML = "Direction changed to left-to-right (ltr)";
}
</script>
</body>
</html>
The output of the above code is −
TFEL-OT-THGIR (text appears right-to-left) Click the below buttons to get or change text direction: [GET DIRECTION] [SET DIRECTION] After clicking GET DIRECTION: The text direction is: rtl After clicking SET DIRECTION: RIGHT-TO-LEFT (text now appears left-to-right) Direction changed to left-to-right (ltr)
Example − Multiple Bdo Elements
Following example demonstrates using multiple <bdo> elements with different directions −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Bdo Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Text Direction Examples</h2>
<p>Normal text: Hello World</p>
<p>LTR override: <bdo id="ltr-text" dir="ltr">Hello World</bdo></p>
<p>RTL override: <bdo id="rtl-text" dir="rtl">Hello World</bdo></p>
<button onclick="showDirections()">Show All Directions</button>
<div id="result"></div>
<script>
function showDirections() {
var ltrDir = document.getElementById("ltr-text").dir;
var rtlDir = document.getElementById("rtl-text").dir;
document.getElementById("result").innerHTML =
"<p>LTR element direction: " + ltrDir + "</p>" +
"<p>RTL element direction: " + rtlDir + "</p>";
}
</script>
</body>
</html>
This example shows how different bdo elements can have different text directions simultaneously −
Text Direction Examples Normal text: Hello World LTR override: Hello World RTL override: dlroW olleH After clicking Show All Directions: LTR element direction: ltr RTL element direction: rtl
How It Works
In the first example −
-
We create a
<bdo>element inside an<h3>element with the dir attribute value set to"rtl". -
The
getDirection()function retrieves the<bdo>element usinggetElementById("myBdo")and accesses itsdirproperty to display the current direction. -
The
setDirection()function changes the dir property value to"ltr", switching the text from right-to-left to left-to-right display.
Browser Compatibility
The HTML DOM Bdo dir property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The <bdo> element and its dir attribute are part of the HTML specification since HTML 4.0.
Conclusion
The HTML DOM Bdo dir property provides control over text direction in <bdo> elements. It accepts "ltr" for left-to-right and "rtl" for right-to-left text flow, making it useful for displaying multilingual content or creating special text effects where direction override is needed.
210 Views
