CODEWITHSUNDEEP
javascriptjquerymultilingual
Java_Alert
Java_Alert

Reputation: 1179

How to make display-text Multi-lingual?

How can I create a window in jquery having multilingual contents?
eg. for Spanish language close window should be comes like 'maximizar la ventana'.

Upvotes: 1

Views: 436

Answers (2)

DavChana
DavChana

Reputation: 1966

You could have a set of files named en.php, sp.php etc on your server.
In each file, all messages text could be stored.

Like in sp.php,
$text["close_window"] = "maximizar la ventana";
$text["thank_you"] = "Gracias";

and in en.php,
$text["close_window"] = "Close this window"; $text["thank_you"] = "Gracias";

In your main file(index.foo), you could use echo $text["close_window"]; or
echo $text["thank_you"] where you want this text to be displayed.

Then based on User String, or some other data, you could conditionally include english.lang or spanish.lang in the server side, according to user's language.

Files Structure:

index.php //main file lang //language-files Folder lang/en.php //english language file lang/sp.php //spanish language file

Example Code:

en.php: 

<?php
$text["close_window"] = "Close this window";
$text["thank_you"] = "Thank you";
$text["welcome"] = "Welcome";
$text["home"] = "Home";
$text["about_us"] = "About Us";
$text["company_history"] = "Company History";
$text["company_profile"] = "Company Profile";
$text["contact_us"] = "Contact Us";
$text["greetings"] = "You have selected English";
?>

sp.php: 

<?php
$text["close_window"] = "maximizar la ventana";
$text["thank_you"] = "Gracias";
$text["welcome"] = "Bienvenida";
$text["home"] = "Casa";
$text["about_us"] = "Sobre Nosotros";
$text["company_history"] = "Historia de la Empresa";
$text["company_profile"] = "Perfil de la Empresa";
$text["contact_us"] = "Contact Us";
$text["greetings"] = "Usted ha seleccionado Español";
?>

index.php: 

 //Check if browser sent the User Language code
if(isset($_SERVER["HTTP_ACCEPT_LANGUAGE"])      // if browser sent
    //AND is NOT empty
    && ($_SERVER["HTTP_ACCEPT_LANGUAGE"] != "")
    ){ //if conditions END
    // get first two letters from it
    $user_lang = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2);
}
if(isset($_POST["lang"]) //if user selected it
  //and is in our desired format
  && (strlen($_POST["lang"]) == 2)
){
    $user_lang = $_POST["lang"];
}
//if User requested to change language, ask him
if(isset($_POST["lang_change"])
  && ($_POST["lang_change"])) // is true ?
{
    ask_lang();
    exit(); // exit the script now..
}
if(!isset($user_lang)){ //if we dont have $user_lang yet, ask
    ask_lang();
    exit();
}
//Main index file contents
include("lang/".$user_lang."php");
?>
<html>
    <head>
        <title><?php echo $text["welcome"]; ?> | Example.com</title>
    <head>
    <body>
    <?php echo $text["welcome"]; ?>, <?php echo $text["greetings"]; ?>!<br />
    <a href="index.php" title="<?php echo $text["home"]; ?>" >
        <?php echo $text["home"]; ?></a> |
    <a href="about_us.php" title="<?php echo $text["about_us"]; ?>" >
        <?php echo $text["about_us"]; ?></a> |
    <a href="history.php" title="<?php echo $text["company_history"]; ?>" >
        <?php echo $text["company_history"]; ?></a> |
    <a href="profile.php" title="<?php echo $text["company_profile"]; ?>" >
        <?php echo $text["company_profile"]; ?></a> |
    <a href="contact_us.php" title="<?php echo $text["contact_us"]; ?>" >
        <?php echo $text["contact_us"]; ?></a>
    <p>
        <form method="POST" action="">
            <input type="hidden" name="lang_change" value="true" />
            <input type="submit" value="<?php echo $text["change_language"]; ?>" name="change_language" />
        </form>
    </p>
    </body>
</html>

<?php
//Main index file contents ENDS
function ask_lang(){
?>
<html>
    <head>
        <title>Please Select Language</title>
    <head>
    <body>
        <form method="POST" action="">
            <fieldset>
                <legend>Please select language:</legend>
                <input type="radio" value="en" name="lang" />English<img src="en.png"><br />
                <input type="radio" value="sp" name="lang" />Spanish<img src="sp.png"><br />
                <input type="submit" value="OK" name="sumbit" />
            </fieldset>
        </form>
    </body>
</html>
<?php
} //function ask_lang() ENDS

Assumptions:

  • All type of possible translation files are in the Lang folder.
  • User input is sanitized.
  • Google translated all these Phrases correctly context-wise.

Here is a Live Snippet at Codepad.viper-7.com

The Live Snippet & In-Answer code has a small difference. Here, my code uses include to get external language files, whereas in Viper-7's codepad, I use in-script functions.
Reason: Because I can't put/write files to codepad's system.

Upvotes: 1

Florian
Florian

Reputation: 3366

You could use a supplant-method variant. Crockford wrote about such a thing here and wrote it as an extension of String. It is essential a kind of templating:

if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

Regarding your problem, you could then use an object containing your translations:

var spanish = {close: "maximizar la ventana", thanks: "Gracias"};
var german  = {close: "Fenster schließen", thanks: "Danke"};
var english = {close: "Close window", thanks: "Thank you"};

and then use this on a string:

var spanish_message = "<a href='javascript:void(0);'>{close}</a>".supplant(spanish);

var german_message = "<a href='javascript:void(0);'>{close}</a>".supplant(german);

This is not jQuery, but works pretty well. However, you still need to identify the condition for which language to use yourself. I suggest using something on the server side, e.g. an extra param for the language to be used. If you have different windows of which you know, which is in which language you could also present the language-object used for each.

Also, if your translations become more complex, I suggest you put them in external js files.

lg,

flo

Upvotes: 0

Related Questions