Open Source Projects for i18n à la Facebook

Question

Facebook has this unique and clever approach to localization of their site: translators (in their case users that help to translate the site voluntarily) can simply click on the not-yet-translated strings – which are marked with a green bottom border – in their natural context on the site. See http://www.facebook.com/translations/.

Now, if you ever had to deal with the translation of a website, you'll be well aware of how odd and funny some of these translations can be when using tools like poedit where the translator isn't fully aware of the spot the translated string will lated appear in on the website.

Example: Please translate "Home". In German, for instance, the start page of a website would be "Home" while the house you live in is "Heim". Now, you as the translator basically have to guess which context this term is likely to appear in on the website and translate accordingly. Chances are, you're new website on home furniture now translates as "Home-Einrichtung" which sounds ridiculous to any German.

So, my question boils down to:

Do you know any open source PHP projects that work on something like this? I'm basically looking for a framework that allows you to put your internationalized website in "translation mode" and make strings clickable and translatable e.g. through a Javascript modal.

I'm not so much looking for a full-fledged and ready-made solution, but would love to know about similar projects that I can contribute code to.

Thanks in advance!

Answer 1

If you want to roll your own with jquery & jquery browserLanguage, this might get you going.

Tag all translatable text's contain elements with class="i18n", and include jquery, jquery browserLanguage, and your i18n script.

1. the internationalization javascript

— this needs to accept translations via ajax from your server, like:

var i18n = {};
i18n.bank = new Array();
i18n.t = function ( text, tl=$.browserLanguage ) {
    var r = false;
    $.ajax({ 
        url: "/i18n_t.php?type=request&from="+ escape(text) +"&tl="+ tl, 
        success: function(){ i18n.bank[text] = this; r = true; }
    });
    return r;
};

2. php i18n translation service

— now we need to serve up translations, and accept them

the database will look like a bunch of tables, one for each language.

// SCHEMA for each language:
CREATE TABLE `en`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`from` VARCHAR(500) NOT NULL,
`to` VARCHAR(500) NOT NULL
)

the php will need some connection and db manipulation.. for now this may do:

//Connect to the database
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);

function table_exists($tablename, $database = false) {
    if(!$database) {
        $res = mysql_query("SELECT DATABASE()");
        $database = mysql_result($res, 0);
    }

    $res = mysql_query("SELECT COUNT(*) AS count FROM information_schema.tables WHERE table_schema = '$database' AND table_name = '$tablename'
    ");

    return mysql_result($res, 0) == 1;
}

the code is simply:

<?php     
// .. database stuff from above goes here ..
$type=$_GET["type"];
$from=$_GET["from"];
$to=$_GET["to"];
$tl=$_GET["tl"];

if (! table_exists($tl)) {
...
}

if ($type == "request") { // might want to set $tl="en" when ! table_exists($tl)
    $find = mysql_query("SELECT to FROM `'$tl'` WHERE from='$from'");
    $row = mysql_fetch_array($find);
    echo $row['to'];
} elsif ($type == "suggest") {
    $find = mysql_query("SELECT COUNT(*) AS count FROM `'$tl'` WHERE from='$from'");
    if ( !(mysql_result($res, 0)) == 0 ) { 
        $ins = mysql_query("INSERT INTO `'$tl'` (from, to) VALUES ('$from','$to')");
    }
}
?>

3. page translation mechanics

— finally we can tie them together in your webpages with some further jquery:

i18n.suggest = function (from) { // post user translation to our php
    $.ajax({ 
        url: "/i18n_t.php?type=suggest&from='+from+'&to="+ escape( $('#i18n_s').contents() ) +"&tl="+ $.browserLanguage, 
        success: function(){ $('#i18n_t_div').html('<em>Thanks!</em>').delay(334).fadeOut().remove(); }
    });
};

$(document).ready(function() {
    i18n.t("submit");
    i18n.t("Thanks!");
    $('.i18n').click( function(event) { //add an onClick event for all i18n spans
        $('#i18n_t_div').remove;
        $(this).parent().append(
'<div id="i18n_t_div"><form class="i18n_t_form">
    <input type="text" id="i18n_s" name="suggestion" value="+$(this).contents()+" />
    <input type="button" value="'+ i18n.bank[ "submit" ] +'" onclick="i18n.suggest( '+$(this).contents()+' )" />
</form></div>'
        );
    }).each(function(){ 
        var c = $(this).contents(); //now load initial translations for browser language for all the internationalized content on the page
        if ( i18n.t(c) ){
            $(this).html(i18n.bank[c]);
        }
    });
}); 

Mind you I don't have a server to test this on... and I don't actually code php. :D It will take some debugging but the scaffolding should be correct.