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">
<!--
function translate_page(val)
{
window.location = "http://www.google.com/translate_c?langpair=es|" + val + "&u=" + window.location.href;
}
-->
</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">
<!--
if (window.top !== window.self) {window.top.location = window.self.location;}
-->
</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('translate');
var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || 'xx').substr(0, 2).toLowerCase();
if (lang == 'en') {
e.style.display = 'none';
}
</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:
Post a Comment