CODEWITHSUNDEEP
html
Rudolfs Praulins
Rudolfs Praulins

Reputation: 69

Multilingual website with html

I have recently started front end web development and have a problem with understanding how to set up a multilingual website. I already have the content translated in the needed languages (Latvian, English,Russian). I would like to direct the user to the translated website via an image href (flag etc.). My question is whether it is possible to do this with just html or do I need some back end knowledge as well?

Upvotes: 4

Views: 18953

Answers (2)

hkasera
hkasera

Reputation: 2148

Your question is a bit misleading. To support multiple languages on a website has nothing to do with HTML.

HTML is used for markup of the website, i.e. where what element is placed. The markup won't change with the language.

Generally, the solution to support multilingual content is to not use hardcoded strings in the HTML files rather fetch that data from a separate file based on the language. This could be done by using Javascript or from the server as well. That depends on your approach.

Upvotes: 5

alexanderbird
alexanderbird

Reputation: 4198

To summarize, the question is how to implement client-side localization. I'm going to assume JavaScript is allowed.

Disclaimer:

I've answered the question "how would I solve this with those restrictions", but you need to answer the question "why do I have these restrictions?". If it's just a matter of starting out and trying to learn a new technology, I strongly suggest you ask "what is the best way to make a multilingual website" rather than "how can I make a multilingual website with the skills I have?". You will probably find that coming up with a "hacky" solution would take just as much effort and not work as well as learning a new technology and following best practices for multilingual websites.

If you're looking for general, no restrictions best practices for multi-lingual websites, I can't help you there - all I've got is a possible solution for client-side only localization/multi-lingual website.

Key problems to solve:

  • remembering the user's settings
  • changing language based on user's settings

Approach

  • when the document has loaded, check if the language setting has been saved
    • if it has, use that, otherwise use the default
  • when the user changes the language setting:
    1. store in in a cookie -JS how to cache a variable
    2. Update the UI
  • to update the UI for a new language, use a library like polyglot: https://github.com/airbnb/polyglot.js
    • keep track of a list of phrases and translations for each of the three languages
    • provide the correct list of phrases to polyglot based on user input
    • use an html data attribute to store the phrase name in the html
    • hard-code the default translation in the html
    • loop over every element that has the data attribute set, and update the innerHtml with the corresponding phrase

Example

index.html

<!-- parts omitted --> 
<h1 data-phrase='title'>My Cool Website</h1>
<script src="js/polyglot.js"></script>
<script src="js/translation_helper.js">
<script>
  TranslationHelper.Init();
</script>

tranlation_helper.js (using revealing module pattern)

var TranslationHelper = (function () {
  // add other logic as described above for storing and retrieving language setting from cookie
  function Init() {
    // initialize polyglot with the set of phrases
    Translate()
  }
  function Translate() {
    $("[data-phrase]").each(function () {
      $(this).html(polyglot.t(this.dataset.phrase))
    });
  }
  return {
    Init: Init,
    Translate: Translate
  };
}());

Problems & Comments

When you load the file, it will show the default language until the JavaScript runs, which is not very nice. You could do some trickery where you show nothing until the JavaScript has run, but then you'd have a blank (or text-free page) until the JavaScript has run, and that might not be any better.

One key thing is that it works if JavaScript is disabled - so putting the default text in to start is important in my opinion.

Upvotes: 5

Related Questions