Post
Ask Question

Building an Internationalized (i18n) Website using HTML & JS

Introduction

In our increasingly interconnected world, it's essential for websites to speak the language of their users. Literally. Internationalization (often abbreviated as i18n) is the process of designing and developing a website so it can be easily adapted to various languages and regions without engineering changes. In this guide, we'll walk through the steps to create a simple internationalized website using HTML, CSS, and JavaScript.

Step 1. Setting Up the HTML Structure

We begin by setting up the basic structure of our HTML document. This includes creating elements for displaying content and providing a way for users to select their preferred language.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>i18n Simple Example</title>
 
</head>
<body id="container">
    <br/>
  <div id="content">
    <!-- Placeholder for translated text -->
  </div>

</body>
</html>

Step 2. Styling with CSS

While not strictly necessary for i18n functionality, CSS can be used to style the elements and improve the visual appeal of the website.

<style>
    /* CSS styles */
    #content {
      text-align: center;
      margin-top: 50px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: larger;
      font-weight: 800;
      font-style: oblique;
      font-variant: normal;
     
    }
    select {
        text-align: center;
        width: 200px;
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #ccc;
        padding: 5px;
    }
  </style>

Step 3. Implementing JavaScript for i18n Support

The core functionality of our internationalized website lies in JavaScript. We define translations for different languages and implement logic to update content based on the selected language.

 <script>
    // JavaScript code for i18n
    const translations = {
      en: {
        greeting: "Welcome to C# Corner!"
      },
      es: {
        greeting: "¡Hola Mundo!"
      },
      fr: {
        greeting: "Bonjour le monde !"
      },
      ml: {
        greeting:"C# കോർണറിലേക്ക് സ്വാഗതം!"
      },
      hi: {
        greeting:"C# कॉर्नर में आपका स्वागत है!"
      },
      ta: {
        greeting: 'C# கார்னருக்கு வரவேற்கிறோம்!'
      },
      ar: {
        greeting: "مرحبًا بك في ركن C#!"
      }

      // Add more translations as needed
    };

    // Function to update content based on language
    function updateContent(language) {
      const translatedText = translations[language].greeting;
      document.getElementById("content").innerText = translatedText;
    }

    // Set default language
    let currentLanguage = "en";
    updateContent(currentLanguage);

    // Event listener to change language
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("language-select").addEventListener("change", function() {
        currentLanguage = this.value;
        updateContent(currentLanguage);
      });
    });
  </script>

Step 4. Enhancing User Experience with Language Selection

We provide users with a dropdown menu to select their preferred language. When a language is chosen, the content on the page updates accordingly.

<!-- Language selector -->
  <select id="language-select">
    <option value="en">English</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
    <option value="ml">Malayalam</option>
    <option value="hi">Hindi</option>
    <option value="ta">Tamil</option>
    <option value="ar">Arabic</option>
    <!-- Add more language options as needed -->
  </select>

Conclusion

With these steps, you've created a simple internationalized website that can adapt its content based on user language preferences. However, this is just the beginning. You can expand upon this foundation by adding more translations, improving the user interface, and integrating with backend systems for dynamic content. Internationalization opens your website to a global audience, making it more accessible and inclusive. Happy coding!


Similar Articles