Section 36: Internationalization and Bidirectional Text

Learning Objectives

Understand internationalization in HTML.
Use the lang attribute correctly.
Understand left-to-right and right-to-left text.
Use dir, bdi and bdo appropriately.
Learn why language and direction affect accessibility.

1. What Is Internationalization?

Internationalization, often abbreviated as i18n, means preparing software and content to work for different languages, scripts and regional conventions.

HTML supports internationalization through language declarations, text direction and Unicode character handling.

2. Declare the Document Language

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML Mastery</title>
</head>
<body>
  <h1>Welcome to HTML Mastery</h1>
</body>
</html>

The lang attribute helps assistive technology choose suitable pronunciation and helps tools identify the language. Use the correct language tag for the document.

3. Language Tags

<p lang="en">Welcome to the course.</p>
<p lang="or">ଓଡ଼ିଆ ଭାଷାରେ ସ୍ୱାଗତ।</p>
<p lang="hi">पाठ्यक्रम में आपका स्वागत है।</p>

Common language tags include en for English, or for Odia and hi for Hindi. More specific tags can identify regional variants where appropriate.

4. Text Direction with dir

The dir attribute specifies the base direction of text. Use ltr for left-to-right, rtl for right-to-left and auto when direction should be determined from the text.

<p dir="ltr">This text reads from left to right.</p>
<p lang="ar" dir="rtl">مرحبا بكم</p>
<p dir="auto">User-provided text with an unknown direction</p>

5. Bidirectional Text

Some documents mix scripts with different writing directions. For example, a right-to-left Arabic sentence may contain a left-to-right product code or username. The Unicode bidirectional algorithm determines much of the display order, but markup can help isolate content correctly.

6. The bdi Element

bdi isolates a span of text so its direction can be handled independently from surrounding text. It is useful for dynamically inserted names or identifiers with unknown direction.

<p>User: <bdi>مرحبا123</bdi></p>

7. The bdo Element

bdo explicitly overrides the text direction for its contents. Use it only when an intentional directional override is required.

<p>
  Normal text:
  <bdo dir="rtl">This text has an overridden direction.</bdo>
</p>

Internationalization & Text Direction