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?
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With