HTML <bdo> Tag
The HTML <bdo> tag forces text direction (ltr or rtl), overriding the browser's bidirectional algorithm. Learn the dir attribute with RTL/LTR examples.
The HTML <bdo> tag ("bidirectional override") forces a specific text direction, overriding the browser's built-in bidirectional (bidi) algorithm. It is most useful when you need to display characters in a fixed left-to-right or right-to-left order, regardless of the natural direction of the script those characters belong to.
This page covers what the override does, the required dir attribute, practical RTL and LTR examples you can run, the CSS equivalent, browser support, and accessibility notes.
Why bidirectional override exists
By default, browsers handle mixed-direction text automatically using the Unicode bidirectional algorithm. That algorithm looks at each character's inherent direction — Latin letters flow left-to-right (LTR), while Arabic and Hebrew letters flow right-to-left (RTL) — and lays them out accordingly. Most of the time this is exactly what you want.
<bdo> is the escape hatch for the rare cases where you must force the visual order instead of letting the algorithm decide. It overrides the inherent directionality of every character inside it. This is a deliberate, low-level tool: use it only when you genuinely need a specific character order, not as a general way to display foreign-language text.
If your goal is simply to isolate a piece of text whose direction you don't control (for example, a user-supplied name) so it doesn't disturb the surrounding layout, reach for <bdi> instead — it isolates without overriding.
The required dir attribute
The dir attribute is required on <bdo>. It tells the browser which direction to force, and it accepts two values:
rtl— render the content right-to-left. Use this with RTL scripts such as Arabic and Hebrew, or to force RTL ordering on any content.ltr— render the content left-to-right. This is especially useful for forcing LTR ordering on a fragment (such as a code snippet, URL, or number) that sits inside an RTL context like an Arabic paragraph.
Unlike the dir global attribute, which only sets a base direction and still lets the bidi algorithm reorder runs of opposite-direction characters, dir on a <bdo> element overrides that algorithm entirely.
Syntax
The <bdo> tag comes in pairs. The content is written between the opening (<bdo>) and closing (</bdo>) tags, and dir must always be present:
<bdo dir="rtl">…content…</bdo>RTL example (Arabic)
Here a base LTR paragraph contains an Arabic phrase. Because dir="rtl" matches the natural direction of the Arabic script, the text reads correctly from right to left.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Result
LTR override inside an RTL context
When the base direction is RTL (an Arabic paragraph here), the bidi algorithm would normally flip the order of an LTR fragment such as a file path or product code. Wrapping that fragment in <bdo dir="ltr"> forces it to stay in its intended left-to-right order:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Result
The CSS equivalent
The effect of <bdo> can be reproduced in CSS by combining the direction property with unicode-bidi: bidi-override. In fact, the HTML element is defined in terms of this CSS:
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}The key part is unicode-bidi: bidi-override. Setting direction alone only changes the base direction (the same thing the dir attribute does); it's bidi-override that disables the automatic reordering. If you want the override behavior on an element other than <bdo>, apply both declarations yourself. Conversely, prefer the semantic <bdo> element when the markup represents a deliberate directional override — it keeps the intent in the HTML rather than hidden in a stylesheet.
Attributes
| Attribute | Value | Description |
|---|---|---|
| dir | ltr | rtl | Required. Defines the direction of the text: left-to-right (ltr) or right-to-left (rtl). |
The <bdo> tag also supports Global Attributes and Event Attributes.
Browser support
<bdo> is part of the HTML standard and has been supported in every major browser for a long time, including Chrome, Firefox, Safari, Edge, and Opera. No fallback is needed for current browsers.
Accessibility
<bdo> changes only the visual order of characters; it does not change pronunciation or the logical reading order exposed to assistive technology. Screen readers announce the text in its underlying logical (document) order, not the overridden visual order.
Because of this, reserve <bdo> for cases where the visual character order genuinely matters (such as forcing a code fragment or identifier to stay LTR). For normal multilingual content, set a correct base direction with the dir global attribute on the surrounding element and let the bidi algorithm do its job, or use <bdi> to isolate untrusted text — both produce a more accurate experience for screen-reader users than overriding direction outright.