Internationalization & Text Direction

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.