HTML multilingual case page project: preserve names and a clear reading order

Implementation choice

This static page lists a case summary in English while preserving a customer name in Arabic script and a support route with a Hindi-language alternative. The reference stays visible beside the name so reviewers do not have to infer identity from script or pronunciation. The sample deliberately avoids a language toggle that pretends to translate content; a real application must provide a separate equivalent page and keep its decision text in sync.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Case C-47 — review summary</title>
  <link rel="alternate" hreflang="hi" href="/cases/C-47/hi">
</head>
<body>
  <header><nav aria-label="Case navigation"><a href="/cases">Case index</a></nav></header>
  <main>
    <h1>Case C-47</h1>
    <p>Customer: <bdi>ليلى</bdi>. Review state: awaiting evidence.</p>
    <section aria-labelledby="next-step"><h2 id="next-step">Next step</h2>
      <p>Check the seal record before a decision is recorded.</p></section>
    <p><a href="/cases/C-47/hi" hreflang="hi">हिन्दी में पढ़ें</a></p>
  </main>
</body>
</html>

What remains outside the markup

Both case routes and the index must be implemented. The static text is an example record, not a live case state. A backend owns authorization, the current review state, and translation equivalence.

Cost and limits

The page has no script requirement and only a small amount of HTML. Maintaining two language versions and checking bidirectional text in exports and notifications takes more work than rendering this document.

Common Mistakes

• Do not use a visible language link that points to an untranslated page.
• Do not force a customer's name into the document direction.
• Do not expose private case data through an unchecked route.

Connected lessons

• HTML lang, dir, and bdi: keep text pronunciation and direction stable
• HTML bdi: isolate an unknown text direction
• HTML alternate language links: identify equivalent page versions
• HTML landmarks: give navigation, main content, and page edges clear owners

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

Continue with: Project: release a multilingual order notice safely.