Thursday, November 27, 2008

using AJAX to dynamically translate a report

I decided to push the AJAX integration a little bit further...
Using jQuery and Google AJAX Language API, I was able to translate in "real time" a report. For my example, I decided to translate the records of a table containing the different states of the USA. I realize that this data is not the best for translation demonstration because many words are almost the same no matter what is the spoken language. To have better results, translate the data to Arabic, Chinese, Japanese or Korean.



You can try a working example of the Dynamic Translation w/ Google AJAX Language API demo.

1) Report (Region Definition)
Source:
SELECT     st
,initcap(state_name) AS state_name_en
,initcap(state_name) AS state_name
FROM demo_states

N.B. I had to use the initcap function on my data. Google translation engine is case sensitive. (I need to find more documentation to help with this issue.)


2) Report (Column Attributes)
STATE_NAME_EN:
Column Formatting > CSS Class: translate_src

STATE_NAME:
Column Heading : State Name (<span id="src">english</span>)
Column Formatting > CSS Class: translate_dst

3) Language Selection
I created a Select List item (P35_DST) inside my region "Translate". The options of this Select List are added dynamically when the "init_language_selection_tool" function is called.


4) JavaScript code

<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:false});

// Load Google AJAX Language API
google.load("language", "1");
</script>
<script>
function translate_report(pFrom, pTo) {
if (pTo != '-1' && pTo != "") {
$(".translate_src").each(function(i){
var l_translation = $(this);
google.language.translate(l_translation.text(), pFrom, pTo, function(result) {
if (!result.error) {
l_translation.parent().next().children().text(result.translation);
}
});
});
$s('src',$('#P35_DST option:selected').text());
}
}

//overwrite existing $a_report function
function $a_report(G,D,F,C,A){
lThis=$u_js_temp_drop();
var B=$x("report_"+G+"_catch");
B.id="report_"+G+"_catch_old";
var E="p="+$v("pFlowId")+":"+$v("pFlowStepId")+":"+$v("pInstance")+":FLOW_PPR_OUTPUT_R"+G+"_";

if(!!A){
E+=A+"::RP&fsp_region_id="+G
}
else{
E+="pg_R_"+G+":NO&pg_max_rows="+F+"&pg_min_row="+D+"&pg_rows_fetched="+C
}

var H=new htmldb_Get(null,null,null,null,null,"f",E);
var I=H.get();
lThis.innerHTML=I;
B.innerHTML=$x("report_"+G+"_catch").innerHTML;
B.id="report_"+G+"_catch";
lThis.innerHTML="";

translate_report("en",$("#P35_DST").val());

return
}

function init_language_selection_tool() {
var dst = $x('P35_DST');
var i=0;
for (l in google.language.Languages) {
var lng = l.toLowerCase();
var lngCode = google.language.Languages[l];
if (google.language.isTranslatable(lngCode)) {
dst.options.add(new Option(lng, lngCode));
}
}
google.language.getBranding('branding');
}

function init_language_selection_event() {
$("#P35_DST").change(function(){
translate_report("en",$(this).val());
});
}

$().ready(function() {
init_language_selection_tool();
init_language_selection_event();
});
</script>


Web 2.0 offers lots of possibilities. Gotta try them all! ;)
I speak French and English. I would like to have feedback about the translation of the other languages.

6 comments:

Roel said...

This is really nice! Although the example of US states is not very good I guess, because almost all of them have the same names in other languages. I spotted only one error in the Dutch translation (Georgia is the same in Dutch, "Georgië" is that country at the south of Russia).

Paulo Vale said...

Nice demo.. some mistakes with the Portuguese language, but I guess that it's not your fault ;)

Martin Giffy D'Souza said...

Very impressive! Good way to do some quick translations if necessary.

Martin.

Louis-Guillaume Carrier-Bédard said...

Thanks!
I would like to see this in a real application. It can be use for a translation application where you can upload an xliff file and do an automated translation process using the user predefined dictionary and Google Translate.
I like this tool: http://www.iadvise.be/XTra4o .
I think it should use my technique to help the translation process.

Patrick Wolf said...

Really nice!

Patrick

technical translation said...

Nice post.I would say that the importance of technical translation being accurate and efficient can indeed not be overstated. Especially in the ever faster moving world of globalized business, successful information and technology transfer within multinational businesses can make the difference between win or lose.