i18n for static html content

Question

I am building a website on the front of a REST API (this supports i18n) and i\'m not sure which way to go about internationalization. I have looked into js and html solution

Answer 1

I really can not recommend having various HTML files. Localizability best-practices recommend separating the translations from the code.

The fastest, simplest, and least obstructive method I know is using Google ARB. Consider having the following sample HTML:

    
        
        
    

    
        
This is a test.
    

Now it's needed to extract the localizable content. It's possible to do this either using the extractor tool ARB provides or if your pages are very simple, you can even do it manually:

    
        
        
    

    
        
This is a test.
    

Then let's create the resource file for these messages and also provide the translation:

arb.register(
    "test", 
    {
    "MSG_HTML_TITLE": "Testing ARB",
    "MSG_BODY_TEST": "This is a test.",
    "MSG_CURR_LOCALE": "...and the selected language is \"{currentLocale}\".",
      "@MSG_CURR_LOCALE": {
        "placeholders": {
          "0": {
            "description": "This variable would show the current locale.",
            "example": "fr"
          }
        }
      }
    }
);

arb.register(
    "test:de", 
    {
    "MSG_HTML_TITLE": "ARB auf Probe",
    "MSG_BODY_TEST": "Das ist ein Test.",
    "MSG_CURR_LOCALE": "...und die ausgewählte Sprache ist \"{currentLocale}\".",
      "@MSG_CURR_LOCALE": {
        "placeholders": {
          "0": {
            "description": "This variable would show the current locale.",
            "example": "fr"
          }
        }
      }
    }
);

Finally, add the JS to the HTML. Also, provide an easy way to get the selected locale from URL; i.e. ./index.html?locale=de

    
        
        
        
         
    

    
        
This is a test.

        
        

    

The code for this sample can be found here.