The bdi element

HTML is a declarative language insomuch that it doesn’t deal in explicit control structures. You know the kind of thing: “do this if this, or otherwise do this”. But don’t be fooled, that doesn’t make it inert or passive; it’s still giving your computer instructions and bossing it around.

As with other languages, the code itself is, in fact, just instructions. Whether you’re writing HTML or JavaScript, it takes a lower level system or “environment” to actually carry them out. Although we don’t often think of it this way, the browser is such an environment and it can do some pretty clever things. One such clever thing is implementing the Unicode Bidirectional Algorithm.

Some languages are written left-to-right (LTR) and others right-to-left (RTL). However, either language can contain characters (and sets of characters) that do not implicitly belong to any one direction, such as numerals. These make the text bidirectional and it’s left to the browser to determine a reasonable order in which to display a full complement of characters and elements.

That’s where the algorithm part comes in. An algorithm is just a set of instructions for handling circumstances. In this case, the nature and given order of the characters sets the circumstance.

As the name suggests, the <bdi> (Bidirectional Isolate) element is used to isolate a set of characters such that the algorithm is applied to them separately. Content between <bdi> and </bdi> cannot influence the direction of surrounding content or vice versa. As such, it is a kind of programmatic scoping mechanism.

I have never had cause to use the <bdi> element in my work. Usually, the bidirectional algorithm gets by perfectly well without it. I also have the privilege of being a native English speaker, rarely required to incorporate other languages into my writing. Still, the <bdi> element is a good reminder that, despite being “just markup”, HTML can set some complex and clever things in motion.

Without an awareness or appreciation for the behaviors browsers elicit directly from HTML, you’re destined to reinvent those wheels in JavaScript. Which would be time consuming, boring, inefficient, and completely pointless. Proving I Can Do This With JavaScript, like breakdancing before it, is destined to become an Olympic Sport. Outside of competition, it’s just rolling around on the floor in a bucket hat.

Not everyone is a fan of my writing. But if you found this article at all entertaining or edifying, I do accept tips. I also have a clothing line: