HTML lang, dir, and bdi: keep text pronunciation and direction stable

Use it for a real task

An English receipt page includes a customer name whose direction may differ from the sentence. Mark the known language on the name and isolate its direction with bdi, so punctuation around the inserted name does not shift unexpectedly. The document-level language still belongs on html.

<html lang="en">
<body>
  <main>
    <h1>Receipt owner</h1>
    <p>Approved for <bdi lang="ar">ليلى</bdi> on 23 October.</p>
  </main>
</body>
</html>

What the markup guarantees

If the language is unknown, do not guess it from a person's name. Bidi isolation handles direction interaction; translation and pronunciation still need correct language metadata where known. A fragment inserted by an application should not overwrite the whole page's lang.

Cost and limits

The markup has negligible runtime cost. Text-direction bugs tend to appear only with real mixed-language data, so test a few right-to-left names and punctuation cases.

Common Mistakes

Do not replace bdi with manual left-to-right marks in every record.
Set lang where the language actually changes.
Direction metadata does not translate the content.

Connected lessons

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