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>

8. Use CSS Logical Properties

Logical CSS properties adapt to writing direction and flow. They are generally more suitable for multilingual layouts than hard-coded left and right properties.

<style>
  .card {
    padding-inline: 1rem;
    margin-inline-start: 1rem;
    border-inline-start: 4px solid blue;
  }
</style>

<article class="card" dir="rtl">
  <p>This layout follows the text direction.</p>
</article>

Logical properties such as padding-inline and margin-inline-start adapt to the writing mode and direction.

9. Avoid Directional Assumptions

• Declare the main language on the html element.
• Mark sections that switch to a different language.
• Use dir="auto" for suitable user-generated text with unknown direction.
• Use bdi for mixed-direction inline content when isolation is helpful.
• Prefer CSS logical properties for adaptable layouts.
• Test mixed-language content, punctuation, numbers and identifiers.

Common Mistakes

• Leaving the document language undeclared.
• Using the wrong language code.
• Assuming every language reads from left to right.
• Using bdo when direction isolation with bdi would be more appropriate.
• Hard-coding left and right spacing for every language.

Practice Exercises

1. Create an HTML page with English and Odia content.
2. Set the language on a paragraph that switches to Hindi.
3. Create a right-to-left paragraph and include a mixed-direction identifier.
4. Use CSS logical properties to create a direction-aware card.

Revision Quiz

1. What does lang communicate?
2. Which language code is commonly used for Odia?
3. What does dir="rtl" mean?
4. Which element isolates inline text with an independent direction?
5. What does bdo do?
6. Why are CSS logical properties useful?

Answer Key and Explanations

1. The language of the content — It supports pronunciation, language processing and accessibility.
2. or — It is the standard language subtag for Odia.
3. Right to left — It establishes a right-to-left base direction.
4. bdi — It isolates inline content with an independent direction.
5. Overrides text direction — It applies an explicit directional override.
6. They adapt to writing direction and flow — This reduces hard-coded left/right assumptions.