HTML bdi: isolate an unknown text direction

When the element earns its place

A review queue includes customer names entered in several scripts. The page layout is left to right, but one name may contain right-to-left characters. Isolating each untrusted name keeps nearby punctuation and case numbers in a sensible order without forcing every name into the page direction. If a known phrase has a fixed language and direction, mark those facts directly instead of guessing from its first character.

<ul>
  <li>Case C-47 — <bdi>ليلى</bdi> — awaiting review</li>
  <li>Case C-52 — <bdi>Meera</bdi> — approved</li>
</ul>

Behavior boundary

Isolation changes text ordering behavior. It does not escape HTML, clean a submitted name, or make the application multilingual. Encode user-supplied strings before placing them inside these elements.

Cost and operational limits

Each isolated name adds one small element. The main cost is testing: mixed-script labels, copied text, and screen-reader output need review with real names and punctuation.

Common Mistakes

• Do not use bdi as an HTML sanitizer.
• Do not force dir=ltr on a name just because the page is left to right.
• Do not omit language metadata for known-language paragraphs.

Connected lessons

• HTML lang, dir, and bdi: keep text pronunciation and direction stable
• HTML character references: escape data before inserting it into markup
• HTML inline text: emphasis, importance, code, and abbreviations

Continue with HTML translate attribute: protect identifiers while localizing the surrounding text.