Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to localize a simple HTML website page in my case?

I am NOT developing any web service application which contain client side and backend server side (like java EE application or Ruby on Rails).

Instead, I am simply developing a HTML website page, on this page, there are two flag images(USA and China) which is used as a language selection of the page for users.

I am wondering, for this single web page development (without any backend system), is there any efficient way to implement the page localization(that's display the page in different language) based on the flag selection from user?

like image 842
Leem.fin Avatar asked Sep 23 '11 14:09

Leem.fin


People also ask

What is localization in HTML?

There are three areas in your HTML tag and headers that should be updated with each localization: The page's language, Writing direction, Alternative languages the page is available in.

Why you should localize your website?

Localizing your website promotes your products to a larger number of potential customers, and that brings both economic and social benefits. From a very practical standpoint, it's more likely you'll increase sales if you have a bigger pool of prospective clients to market to.

How do you use localization in Javascript?

To perform file-based localization, we need to extract this content into a file, possibly in JSON format, and then retrieve it from the file. Let's make a file in a language folder to keep track of all files for different languages: ```JSON <! -- ./lang/en.


1 Answers

You can use the standard HTML lang attribute:

<span lang="en">Scale</span><span lang="de">Maßstab</span> 

And then you can hide and show the matching elements:

function select_language(language) {     $("[lang]").each(function () {         if ($(this).attr("lang") == language)             $(this).show();         else             $(this).hide();     }); } 

I use a simple selection:

<select onchange="select_language(this.options[this.selectedIndex].value)">   <option value="en" selected>English</option>   <option value="de">Deutsch</option> </select> 
like image 155
ceving Avatar answered Sep 22 '22 02:09

ceving