CodesBeautify

HTML BDO Generator

Build a bdo tag that forces a run of text to render in the direction you choose.

HTMLdir="rtl"
<p><bdo dir="rtl">Order 4172 shipped</bdo></p>
Runs locally in your browser

About the HTML BDO Generator

The <bdo> element is a bidirectional override. Browsers normally work out direction from the Unicode bidi algorithm, which looks at the characters themselves, and <bdo> switches that off for the text inside it and imposes the value of the required dir attribute. Set dir="rtl" and the characters lay out from the right regardless of the script they belong to.

It is a deliberately blunt instrument, so reach for it only when the automatic result is wrong. A typical case is a reference number or product code that must read in a fixed order inside a paragraph of Arabic or Hebrew, where the algorithm would otherwise reorder the digits and punctuation around it. If you only want to isolate a value whose direction is unknown, such as a username pulled from a database, <bdi> is the safer choice because it isolates without forcing.

The generator escapes angle brackets and ampersands in your text, adds an optional lang so screen readers announce the right language, and can wrap the result in a paragraph. Note that dir changes visual order only, never the stored characters. Copying the rendered text gives you the original sequence back. To see the markup in place, paste it into the HTML Viewer.

How to use

  1. Type the text that needs a forced direction.
  2. Choose rtl or ltr.
  3. Add a lang code if the run is in another language.
  4. Copy the tag into your page.

Common questions

What is the difference between bdo and bdi?
bdo forces a direction on its contents. bdi isolates text of unknown direction so it cannot disturb the text around it, without dictating how it reads.
Is the dir attribute required?
Yes. A bdo without dir has no meaning and browsers fall back to the normal algorithm, so the tag does nothing.
Does bdo change the characters themselves?
No, only how they are laid out on screen. Copy the rendered text and you get the original character order back.
Can I use bdo on a whole block?
It is an inline element, so wrap phrases with it. For a whole block set dir on the div or paragraph instead.