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?
Solution 1:
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>
Solution 2:
Nowadays I would do it without jQuery. First I would hide all nodes with a lang attribute and show only the default language. This can be done in CSS:
[lang] {
display: none;
}
[lang=en] {
display: unset;
}
Without JavaScript enabled the document is not localized but at least readable in the default language.
Next I would use some JavaScript to show the correct language, if it is in the list of supported languages.
function localize (language)
{
if (['de'].includes(language)) {
let lang = ':lang(' + language + ')';
let hide = '[lang]:not(' + lang + ')';
document.querySelectorAll(hide).forEach(function (node) {
node.style.display = 'none';
});
let show = '[lang]' + lang;
document.querySelectorAll(show).forEach(function (node) {
node.style.display = 'unset';
});
}
}
You can either use a select box or the browser language.
localize(window.navigator.language);
Solution 3:
Here's one way around this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Localise</title>
</head>
<body>
<a href="#china" onclick="showthis('contentchina')">China flag</a>|
<a href="#usa" onclick="showthis('contentusa')">USA flag</a>
<div id="contentchina" style="display:none">
Lorem ipsum dolor sit amet...
</div>
<div id="contentusa" style="display:none">
Duis aute irure dolor...
</div>
<script>
function showthis(nation) {
document.getElementById(nation).style.display = "block";
return false;
}
</script>
</body>
</html>
Solution 4:
I would suggest looking into a template engine for this problem. To me it's not exactly a backend but more of a grey area. Something like Moustache OR smarty would be perfect for you.
Simply put, i agree with the other posters that this is not reasonable to achieve on the client side.
Solution 5:
You can use JavaScript to read the user language and show the right flag/content:
HTML:
<img id="myFlag" src="flag_default.png"/>
and some jQuery (since you tagged your question with jQuery):
var supportedLangs = ['de', 'en', 'cn'];
var userLang = navigator.language;
if($.inArray(userLang, supportedLangs) >= 0){
$('myFlag').attr('src', 'flag_' + userLang + '.png');
}
hjsfiddle