I have no idea how to handle localization with JQuery. I want to set an innerHTML
with German text, but if the browser is configured to use English, then I want to set English text.
In PHP I use gettext for such stuff, but how to do it in JavaScript/jQuery?
There are two ways to go at JavaScript localization: File-based: Meaning that you extract your content in the form of a file, upload it to the Translation Management System (TMS), translate the content, then download it from the TMS and upload it back to your app/website and deploy the changes.
i18n is a jQuery based Javascript internationalization library. It helps you to internationalize your web applications easily. This is a project by Wikimedia foundation's Language Engineering team and used in some of the Wikimedia Foundation projects like Universal Language Selector.
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.
Locale (Runtime - JavaScript) A Locale object represents a specific geographical, political, or cultural region. An operation that requires a Locale to perform its task is called locale-sensitive and uses the Locale to tailor information for the user.
There is no easy solution for that. What I would probably do is create several scripts with language texts for every language and include proper one in PHP. So if someone is using english version of your site you would include only english file, if someone is using german version you would include german language file etc.
Example:
// your script logic
myscript.js
// language texts
myscript.en.js
myscript.de.js
myscript.it.js
...
You can define all language files like that:
LANG = {
txt1: 'English text1',
txt2: 'English text2'
...
};
Make sure you are including only one of those in your HTML and make sure to include language file first i.e.
<script type="text/javascript" src="myscript.de.js"></script>
<script type="text/javascript" src="myscript.js"></script>
Then you can use those localized texts in your main script for example:
$(document).ready(function () {
alert(LANG.txt1);
});
What's best about it is that your logic (myscript.js
in this example) doesn't have to worry about localization and you won't have to change it if you want to add a new language file.
I've not used it yet, but I'm thinking about using jquery-localize for a project. If you don't mind basing the translation on 'rel' attributes defined on your elements then it looks like a good option.
Example from the README:
HTML
<p rel="localize[title]">Tracker Pro XT Deluxe</p>
<p rel="localize[search.placeholder]">Search...</p>
<p rel="localize[search.button]">Go!</p>
<p rel="localize[footer.disclaimer]">Use at your own risk.</p>
<p rel="localize[menu.dashboard]">Dashboard</p>
<p rel="localize[menu.list]">Bug List</p>
<p rel="localize[menu.logout]">Logout</p>
application-es.json
{
title: "Tracker Pro XT Deluxo",
search: {
placeholder: "Searcho...",
button: "Vamos!"
},
footer: {
disclaimer: "Bewaro."
},
menu: {
dashboard: "Dashboardo",
list: "Bug Listo",
logout: "Exito"
}
}
Localize it!
$("rel*=localize").localize("application", { language: "es" })
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