CodeBlanks Logo Icon CodeBlanks
Login Register

Challenge - Multilingual RTL

HTML course · Expert · Lesson 37/39

Write a bilingual RTL page with hreflang, dir and bidi.

Multilingual and RTL page

Pages published in multiple languages set three things correctly: language, direction, and alternate links. <html lang="en" dir="ltr"> declares the root language and writing direction; RTL languages use dir="rtl". Other language versions are linked with <link rel="alternate" hreflang="tr">; hreflang="x-default" picks the version for visitors without a language.

To avoid duplicate content, <link rel="canonical"> marks the main version. When embedded RTL text needs its direction forced, <bdi> and <bdo> are used. Together these layers build a consistent multilingual experience.

Exercise Write a multilingual head

Write the head of a multilingual page. Use <html lang="en" dir="ltr"> as the root. In head add a <link rel="canonical"> element, at least two <link rel="alternate" hreflang="..."> elements, and one hreflang="x-default" alternate.

Show example solution 
Root has lang and dir; head has canonical and two alternates (one is x-default).

Example solution:
<html lang="en" dir="ltr">
<head>
  <link rel="canonical" href="https://site.example/en/">
  <link rel="alternate" hreflang="tr" href="https://site.example/tr/">
  <link rel="alternate" hreflang="x-default" href="https://site.example/en/">
</head>
</html>

Test yourself

  1. Match the multilingual attributes

    lang="tr"
    Turkish language code
    dir="rtl"
    Right-to-left direction
    hreflang="en"
    English alternate
    hreflang="x-default"
    Unspecified default
    rel="canonical"
    Mark the main version

  2. Which dir value is used for Arabic?

    • ltr
    • auto
    • rtl
    • ttb
    Show answer

    rtl — Correct. Arabic is written right-to-left, so dir="rtl" is used.

  3. Link the alternate version

    <link rel="alternate" ____ href="https://site.example/tr/">
    Show answer 
    <link rel="alternate" hreflang="tr" href="https://site.example/tr/">

  4. When is the bdi element used?

    • For embedded text with unclear direction
    • Only next to images
    • During form submission
    • In table headers
    Show answer

    For embedded text with unclear direction — Correct. bdi isolates embedded text with unclear direction.

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone