In HTML, what problem does the <bdi> element solve, and how does it differ from <bdo>?

## The bug these elements exist for Browsers lay out mixed-direction text with the Unicode bidirectional algorithm. Characters that have a strong direction — Latin letters are left-to-right, Hebrew and Arabic letters are right-to-left — pull the neutral characters near them (spaces, dashes, digits, punctuation, parentheses) into their own run. That is exactly what you want inside a sentence written in one language, and exactly what you do not want when you have concatenated a string you did not write into a template you did. The canonical failure looks like this: ```html <p>USERNAME - 12 points</p> ``` With an ASCII username this reads as intended. With a right-to-left username, the dash and sometimes the number are neutral characters adjacent to a strong RTL run, so the algorithm reorders them: the score appears attached to the wrong side, or the dash jumps to the far end of the line. Nothing is broken in your data — the *display order* is wrong, and it is wrong only for the users whose names caused it, which is why it survives review. ## What `<bdi>` does `<bdi>` is the **bidirectional isolate** element. Its purpose is stated in its name: the content inside it is treated as a self-contained run, so its directionality cannot influence the ordering of text outside it, and the surrounding direction does not reorder its insides either. It also carries a default of `dir="auto"`, which means the direction of the content is inferred from its first strong character rather than inherited. That combination is precisely the contract you want for interpolated content: ```html <li><bdi>שרה</bdi> - 12 points</li> <li><bdi>Ana</bdi> - 9 points</li> ``` Both rows now render with the dash and the score where the template author intended, whatever the name's script. Because the element renders as ordinary inline content with no visible decoration, adding it is cheap and invisible for the majority of your users — which is the argument for putting it in the component rather than waiting for a bug report. ## What `<bdo>` does `<bdo>` is the **bidirectional override**. It requires a `dir` attribute of `ltr` or `rtl`, and it forces the characters inside to be laid out in that direction, overriding what the algorithm would have decided from the characters themselves: ```html <p><bdo dir="rtl">This text is laid out right to left</bdo></p> ``` This is a blunt instrument. It does not translate, it does not mirror meaning — it reverses the ordering of the rendered characters. Legitimate uses are narrow: demonstrating bidirectional behaviour in documentation, or repairing a specific string that arrives with its ordering already mangled by an upstream system. Using `<bdo>` on user content in the hope of "fixing" direction is a mistake, because you are asserting a direction you do not actually know. ## Where the `dir` attribute fits `dir` is a global attribute with the values `ltr`, `rtl` and `auto`. Setting `dir="auto"` on an element asks the browser to infer direction from the content, and in modern browsers an element that carries an explicit `dir` also gets isolated from its surroundings. So `<span dir="auto">` behaves similarly to `<bdi>` in practice. Why prefer `<bdi>` anyway? Because it states the intent — *this is a run of text whose direction I do not control* — in the element name rather than in an attribute a later editor might strip while "cleaning up" the markup, and because it carries the auto behaviour without anyone having to remember to add it. In an interview, name both facts: the isolation is what matters, and `<bdi>` is the element whose whole reason for existing is to provide it. ## How to talk about it as production judgment The senior framing is not "I memorised an obscure element". It is: any place where your template concatenates a string from outside your control with text you wrote is a potential bidi defect, and the defect is invisible in a monolingual test suite. Names, search terms, filenames, tags, book and song titles, chat messages, addresses — all of them belong in `<bdi>` at the component boundary. It is the same instinct as escaping output: you do it structurally, once, at the point of interpolation, rather than reacting to reports. ## Pitfalls Using `<bdo dir="ltr">` to "fix" an RTL name — this forces the name's own characters into the wrong order, so you have traded a misplaced dash for a mangled name. Setting `dir="ltr"` on the whole line, which establishes the paragraph direction but does not isolate the embedded run that caused the problem. Replacing spaces with `&nbsp;`, which changes nothing because non-breaking spaces are still directionally neutral. And assuming the issue is a font or a CSS problem — the ordering is decided by the bidirectional algorithm operating on characters, and the markup is where you constrain it.