Saturday 14 April 2012

How to translate your web page using Google Translate tool


Google provides several useful tools to translate your web page. Then you can offer your page contents in more than sixty languages!

Our goal is to provide a drop down list where user will select target language and then the page will "automagically" translate into the desired language.

Translated page will appear in the same top window frame so not to distort your web page design layout.

Drop down list will show or hide depending on user browser default language.



USING GOOGLE TRANSLATE TOOL

Procedure to translate a web page is simple:

We will request a web page to Google Translate server, and it will return our web page already translated!


Request will have following structure:

http://www.google.com/translate_c?langpair=LANG1|LANG2&u=URL

where:
LANG1 is set to original language
LANG2 is set to target language
URL is the url we want to translate.


This is the same way as going to http://translate.google.com/?hl=en web page, and pasting there our URL web page.

NOTE: Google also offers to us this other tool: http://translate.google.com/translate_tools?hl=en but it introduces some problems maintaining the original formatting of the web page.



SELECTOR WITH LANGUAGE OPTIONS

select HTML tag generates a drop down list with several options. We will add a select tag with every
language Google is able to translate into. (right now april 2012)

You must paste this HTML code within your web page, where you want the selector to appear:

<div id='translate'>
  <select onchange='translate_page(this.value)'>
    <option value=''>Translate this Page</option>
    <option class='notranslate' value='af'>Afrikaans</option>
    <option class='notranslate' value='sq'>Albanian</option>
    <option class='notranslate' value='hy'>Armenian (Alpha)</option>
    <option class='notranslate' value='az'>Azerbaijani (Alpha)</option>
    <option class='notranslate' value='ar'>Arabic</option>
    <option class='notranslate' value='eu'>Basque (Alpha)</option>
    <option class='notranslate' value='be'>Belarusian</option>
    <option class='notranslate' value='bn'>Bengali (Alpha)</option>
    <option class='notranslate' value='bg'>Bulgarian</option>
    <option class='notranslate' value='ca'>Catalan</option>
    <option class='notranslate' value='zh-cn'>Chinese (Simplified)</option>
    <option class='notranslate' value='zh-tw'>Chinese (Traditional)</option>
    <option class='notranslate' value='hr'>Croatian</option>
    <option class='notranslate' value='cs'>Czech</option>
    <option class='notranslate' value='da'>Danish</option>
    <option class='notranslate' value='nl'>Dutch</option>
    <!-- option class='notranslate' value='en'>English</option-->
    <option class='notranslate' value='et'>Estonian</option>
    <option class='notranslate' value='tl'>Filipino</option>
    <option class='notranslate' value='fi'>Finnish</option>
    <option class='notranslate' value='fr'>French</option>
    <option class='notranslate' value='gl'>Galician</option>
    <option class='notranslate' value='ka'>Georgian (Alpha)</option>
    <option class='notranslate' value='de'>German</option>
    <option class='notranslate' value='el'>Greek</option>
    <option class='notranslate' value='gu'>Gujarati (Alpha)</option>
    <option class='notranslate' value='ht'>Haitian Creole (Alpha)</option>
    <option class='notranslate' value='iw'>Hebrew</option>
    <option class='notranslate' value='hi'>Hindi</option>
    <option class='notranslate' value='hu'>Hungarian</option>
    <option class='notranslate' value='is'>Icelandic</option>
    <option class='notranslate' value='id'>Indonesian</option>
    <option class='notranslate' value='it'>Italian</option>
    <option class='notranslate' value='ga'>Irish</option>
    <option class='notranslate' value='ja'>Japanese</option>
    <option class='notranslate' value='kn'>Kannada (Alpha)</option>
    <option class='notranslate' value='ko'>Korean</option>
    <option class='notranslate' value='la'>Latin (Alpha)</option>
    <option class='notranslate' value='lv'>Latvian</option>
    <option class='notranslate' value='lt'>Lithuanian</option>
    <option class='notranslate' value='mk'>Macedonian</option>
    <option class='notranslate' value='ml'>Malay</option>
    <option class='notranslate' value='mt'>Maltese</option>
    <option class='notranslate' value='no'>Norwegian</option>
    <option class='notranslate' value='fa'>Persian</option>
    <option class='notranslate' value='pl'>Polish</option>
    <option class='notranslate' value='pt-BR'>Portuguese</option>
    <option class='notranslate' value='ro'>Romanian</option>
    <option class='notranslate' value='ru'>Russian</option>
    <option class='notranslate' value='sr'>Serbian</option>
    <option class='notranslate' value='sk'>Slovak</option>
    <option class='notranslate' value='sl'>Slovenian</option>
    <option class='notranslate' value='es'>Spanish</option>
    <option class='notranslate' value='sw'>Swahili</option>
    <option class='notranslate' value='sv'>Swedish</option>
    <option class='notranslate' value='ta'>Tamil (Alpha)</option>
    <option class='notranslate' value='te'>Telugu (Alpha)</option>
    <option class='notranslate' value='th'>Thai</option>
    <option class='notranslate' value='tr'>Turkish</option>
    <option class='notranslate' value='uk'>Ukrainian</option>
    <option class='notranslate' value='ur'>Urdu (Alpha)</option>
    <option class='notranslate' value='vi'>Vietnamese</option>
    <option class='notranslate' value='cy'>Welsh</option>
    <option class='notranslate' value='yi'>Yiddish</option>
  </select>
</div>

This selector shows 64 possible language translations.

English option is commented because it is my blog original language.

When user selects one option, it calls a javascript function: translate_page(this.value)

this.value variable stores user selected option.


This function will perform the request to Google translate server.

translate_page function has to be placed within <head>..</head> section:

<script type="text/javascript">
&lt;!--
function translate_page(val)
{
  window.location = &quot;http://www.google.com/translate_c?langpair=es|&quot; + val + &quot;&amp;u=&quot; + window.location.href;
}
--&gt;
</script>


NOTE: Suit these sample javascript codes to your page. Right now they are written to be pasted within a blogger template.



MOVE WINDOW FRAME TO TOP WINDOW

You will observe Google returns the translated page embedded within some frames.
That distorts our web page layout. To return to previous appearance, we need to move current window frame to top one.

This code pops up the frame window where our translated web page is set to top window, so no more frames are displayed.

Copy this code within body section <body>..<body>

<script type="text/javascript">
&lt;!-- 
if (window.top !== window.self) {window.top.location = window.self.location;}
--&gt;
</script>



DETECT BROWSER DEFAULT LANGUAGE

If we do not want to show translate selector for some languages, e.g: english, this code makes it not visible when navigator default language is set to "en" code.

<script type="text/javascript">
  var e = document.getElementById(&#39;translate&#39;);
  var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || &#39;xx&#39;).substr(0, 2).toLowerCase();
  if (lang == &#39;en&#39;) {
    e.style.display = &#39;none&#39;;
  }
</script>

NOTE: xx is a fake language code.



CUSTOMIZE SELECTOR APPEARANCE

Also we can customize selector appearance changing CSS settings:

E.g:

#translate {
  float:right;
  display: block;
}

#translate select {
  padding:0.1em;
  font-size:110%;
  border-style:outset;
  border-width:2px;
  color:#000000;
  background-color:#dddde0;
}



AVOID TRANSLATION OF SOME PARTS OF YOUR PAGE

Usually there are parts of your web page which do not make sense being translated.

As an example:

<code> tag is not translated by default.


In other cases:

E.g: if we want some pre tag not to be translated there are two options:

<pre class="notranslate">...</pre>

or

<pre translate="no">...</pre>


NOTE: <pre> by default equals <pre translate="yes">



REFERENCE

http://googlesystem.blogspot.com.es/2008/03/useful-google-translate-addresses.html

http://xantorohara.blogspot.com.es/2009/02/get-browsers-language-via-javascript.html

http://www.farneville.com/2010/04/how-to-remove-google-translate-top-frame.html

http://www.askdavetaylor.com/how_to_make_web_site_available_multiple_languages.html

0 comentarios: