Latest TweetsGreat post about the latest power grab: www.eff.org/deeplinks/2018/09/…
Perishable Press

Automatic Language Translation Methods

As you may have noticed, Perishable Press recently added automatic language translation to each of our articles. The free, automatic translations are available as a series of image links (via corresponding country flag icons) next to each article’s individual post view. We have found that providing this free service is important as many of our visitors come from countries other than the United States, and therefore may be unable to read our articles as presented in the English language.

Google Translate

Although there are several excellent translation services currently available, our research has determined that Google’s free translation service exceeds our expectations and serves as an excellent online translator that remains fast, effective, and (best of all) free. Another excellent online translator service is provided by BabelFish, which is also highly efficient and free of charge.

Using either of these free online translators and a little .htaccess or PHP magic, it is very easy to serve alternate versions of site content in a wide variety of languages. This article presents two excellent methods of incorporating automatic language support using either .htaccess or PHP. We also provide the (X)HTML source code necessary to manually include automatic translation links within static (X)HTML documents. The translation configurations covered in this article include the following:

Google1

  • French
  • Deutsche
  • Español
  • Italian
  • Português
  • Arabic
  • Japanese
  • Korean

BabelFish2

  • French
  • Deutsche
  • Español
  • Italian
  • Português
  • Arabic
  • Japanese
  • Korean
  • Russian
  • Greek
  • Chinese Simplified
  • Chinese Traditional

Automatic translation via htaccess

Begin with your site’s root .htaccess file. Add the following lines of code:

# Automatic Language Translation
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^(.*)-fr$ http://www.google.com/translate_c?hl=fr&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-de$ http://www.google.com/translate_c?hl=de&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-es$ http://www.google.com/translate_c?hl=es&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-it$ http://www.google.com/translate_c?hl=it&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-pt$ http://www.google.com/translate_c?hl=pt&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-ar$ http://www.google.com/translate_c?hl=ar&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-jp$ http://www.google.com/translate_c?hl=jp&sl=en&u=http://domain.com/$1 [R,NC]
RewriteRule ^(.*)-kr$ http://www.google.com/translate_c?hl=pt&sl=en&u=http://domain.com/$1 [R,NC]

Ensure that you have replaced every instance of domain.com with your domain name. You will also want to customize according to which languages you wish to provide translations. In each of the last eight lines of the code above, there are two instances of the abbreviation for the language to be translated via that particular line. To customize your set of languages to be translated, simply edit both of the language abbreviations in each line according to the corresponding country abbreviations. Add or delete languages by adding or deleting their corresponding .htaccess expressions.

Formatting links

The next step involves formatting links to be recognized and processed by your new .htaccess rewrite rules. Here is a generalized set of corresponding links. Notice the two-digit language abbreviation hyphenated to the end of each anchor reference.

<a href="example.html-fr" title="Traduire en Fran&#231;ais">Traduire en Fran&#231;ais</a>
<a href="example.html-de" title="In Deutschen &#252;bersetzen">In Deutschen &#252;bersetzen</a>
<a href="example.html-es" title="Traducir a Espa&#241;ol">Traducir a Espa&#241;ol</a>
<a href="example.html-it" title="Tradurre in Italiano">Tradurre in Italiano</a>
<a href="example.html-pt" title="Traduzir no Portugu&#234;s">Traduzir no Portugu&#234;s</a>
<a href="example.html-ar" title="Translate into Arabic">Translate into Arabic</a>
<a href="example.html-jp" title="Translate into Japanese">Translate into Japanese</a>
<a href="example.html-kr" title="Translate into Korean">Translate into Korean</a>

In the previous example, we are creating a set of eight links to a page named example.html. Each link will automatically send the associated page contents to Google’s free (for now) translation service and return a freshly translated version of the page according to the language type specified at the end of the file name. Thanks to our recently acquired .htaccess rewrite rules, the set of translation links will be automatically rewritten as:

<a href="http://216.239.39.104/translate_c?hl=fr&sl=en&u=http://domain.com/example.html" title="Traduire en Fran&#231;ais">Traduire en Fran&#231;ais</a>
<a href="http://216.239.39.104/translate_c?hl=de&sl=en&u=http://domain.com/example.html" title="In Deutschen &#252;bersetzen">In Deutschen &#252;bersetzen</a>
<a href="http://216.239.39.104/translate_c?hl=es&sl=en&u=http://domain.com/example.html" title="Traducir a Espa&#241;ol">Traducir a Espa&#241;ol</a>
<a href="http://216.239.39.104/translate_c?hl=it&sl=en&u=http://domain.com/example.html" title="Tradurre in Italiano">Tradurre in Italiano</a>
<a href="http://216.239.39.104/translate_c?hl=pt&sl=en&u=http://domain.com/example.html" title="Traduzir no Portugu&#234;s">Traduzir no Portugu&#234;s</a>
<a href="http://216.239.39.104/translate_c?hl=ar&sl=en&u=http://domain.com/example.html" title="Translate into Arabic">Translate into Arabic</a>
<a href="http://216.239.39.104/translate_c?hl=jp&sl=en&u=http://domain.com/example.html" title="Translate into Japanese">Translate into Japanese</a>
<a href="http://216.239.39.104/translate_c?hl=kr&sl=en&u=http://domain.com/example.html" title="Translate into Korean">Translate into Korean</a>

Thus, we are relying on .htaccess to do the dirty work of transforming our simple, page.php-fr links into the dynamic monstrosities that will get the job done. To translate any page, simply hyphenate the two-digit language abbreviation to the end of its anchor reference. — So easy!

Add to WordPress

Finally, to set this up in WordPress for, say, a set of language translation links for each post, you would add the following code to the WordPress loop:

<a href="<?php the_permalink(); ?>-fr" title="Traduire en Fran&#231;ais">Traduire en Fran&#231;ais</a>
<a href="<?php the_permalink(); ?>-de" title="In Deutschen &#252;bersetzen">In Deutschen &#252;bersetzen</a>
<a href="<?php the_permalink(); ?>-es" title="Traducir a Espa&#241;ol">Traducir a Espa&#241;ol</a>
<a href="<?php the_permalink(); ?>-it" title="Tradurre in Italiano">Tradurre in Italiano</a>
<a href="<?php the_permalink(); ?>-pt" title="Traduzir no Portugu&#234;s">Traduzir no Portugu&#234;s</a>
<a href="<?php the_permalink(); ?>-ar" title="Translate into Arabic">Translate into Arabic</a>
<a href="<?php the_permalink(); ?>-jp" title="Translate into Japanese">Translate into Japanese</a>
<a href="<?php the_permalink(); ?>-kr" title="Translate into Korean">Translate into Korean</a>

Automatic translation via PHP

This method is so easy it almost hurts. Here, for our first example, we create a set of text links for each of our target languages. Begin by adding the following chunk of code to any PHP-enabled web page:

<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cfr" title="Traduire en Fran&#231;ais" rel="nofollow">Traduire en Fran&#231;ais</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cde" title="In Deutschen &#252;bersetzen" rel="nofollow">In Deutschen &#252;bersetzen</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Ces" title="Traducir a Espa&#241;ol" rel="nofollow">Traducir a Espa&#241;ol</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cit" title="Tradurre in Italiano" rel="nofollow">Tradurre in Italiano</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cpt" title="Traduzir no Portugu&#234;s" rel="nofollow">Traduzir no Portugu&#234;s</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Car" title="Translate into Arabic" rel="nofollow">Translate into Arabic</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cja" title="Translate into Japanese" rel="nofollow">Translate into Japanese</a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cko" title="Translate into Korean" rel="nofollow">Translate into Korean</a>

That’s all there is to it. You may wish to further embellish the code or add subtle details or whatever, but as far as the main functionality is concerned, it’s a real copy-and-paste party. To replace the text links with a series of representative flag icons, download this zip file, upload them to your server, and edit the URL paths in the following code as you copy and paste it into your .php-enabled web page:

<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cfr" title="Traduire en Fran&#231;ais" rel="nofollow"><img src="http://domain.com/your/path/to/fr.gif" alt="Traduire en Fran&#231;ais" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cde" title="In Deutschen &#252;bersetzen" rel="nofollow"><img src="http://domain.com/your/path/to/de.gif" alt="In Deutschen &#252;bersetzen" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Ces" title="Traducir a Espa&#241;ol" rel="nofollow"><img src="http://domain.com/your/path/to/es.gif" alt="Traducir a Espa&#241;ol" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cit" title="Tradurre in Italiano" rel="nofollow"><img src="http://domain.com/your/path/to/it.gif" alt="Tradurre in Italiano" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cpt" title="Traduzir no Portugu&#234;s" rel="nofollow"><img src="http://domain.com/your/path/to/pt.gif" alt="Traduzir no Portugu&#234;s" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Car" title="Translate into Arabic" rel="nofollow"><img src="http://domain.com/your/path/to/ar.gif" alt="Translate into Arabic" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cja" title="Translate into Japanese" rel="nofollow"><img src="http://domain.com/your/path/to/ja.gif" alt="Translate into Japanese" /></a>
<a href="http://translate.google.com/translate?u=<?php echo urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?>&langpair=en%7Cko" title="Translate into Korean" rel="nofollow"><img src="http://domain.com/your/path/to/ko.gif" alt="Translate into Korean" /></a>

Automatic translation via BabelFish

An excellent alternative to Google’s translation tool is AltaVista’s BabelFish. Here, we present the (X)HTML markup required to automatically translate twelve common languages. Using this code, you will want to edit the http://domain.com/document.html bit according to your specific needs:

<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_nl">Nederlands/Dutch</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_fr">Francais/French</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_ru">Russian</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_de">Deutsch/German</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_it">Italiano/Italian</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_pt">Portugues/Portuguese</a> 
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_es">Espanol/Spanish</a> 
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_el">Greek</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_ja">Japanese</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_ko">Korean</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_zh">Chinese Simplified</a>
<a href="http://66.94.231.168/babelfish/translate_url_content?trurl=http://domain.com/document.html&lp=en_zt">Chinese Traditional</a>

Of course, by extrapolating any of the methods described in this article, you could also incorporate BabelFish translations via .htaccess or PHP. Regardless of which method you choose, integrating language translation support with your site provides an invaluable service for your visitors, thereby improving accessibility, maximizing traffic, and enhancing overall quality.

Thanks for reading! Please feel free to drop questions, comments, or concerns via the comment form below.

Notes & Resources

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
9 responses
  1. Offers language translation services including languages English, French, German, Italian, Spanish, Chinese, Korean, Japanese etc

  2. Hi

    I’m not a programmer so please excuse a silly question. Is it possible to use this technique to translate just part of a page rather than an entire page or website? If so, how would one change the above to do this?

    I ask because my site advertises properties, with each property advertisement pulled from a MYSQL database and simple values (e.g. numbers, pull-down menus) automatically translated, so the only item I need translated is the free-text property description field.

    Regards,
    Doug

  3. Jeff Starr

    Robert,

    By default, the translation services mentioned in this article translate the entire document, so passing variables indicating specific page regions is not currently possible. There may be other services which allow the passing of variables, however..

    A relatively simple solution may involve using frames (<frame> or <iframe>). Frames would enable you to translate only the contents of the "framed" document, thereby providing greater control over translated regions.

    You may also want to search for language translation tools or scripts, as new possibilities may emerge. I think there may even be a plugin for WordPress that will translate only the contents of a post, which may be modified to suit your needs.

    Good luck!

  4. .htaccess with link on website will not work. Why?
    entering landcode, for example -de in address field after address works.

  5. Jeff Starr

    Difficult to say – there are many variables involved (server, platform, software, version, configuration, etc.). Nonetheless, thank you for pointing this out – it is a helpful tip that may come in handy.

  6. i am having the same issue as Juhani… did you ever resolve it?

  7. Jeff Starr

    Dave,

    To tell you the truth, Juhani’s comment did not provide enough information to explain the issue. If you would like me to look into it, please either drop a comment or contact me directly. Provide as much relevant information as possible and I will look into it as soon as time allows.

    Regards,
    Jeff

  8. server is Apache version 1.3.37 (unix)

    htacces file is correct written and placed in public_html directory.

    This will not work: <a href="index.html-de">

    but if I writing http://www.rayongproperties.com/-de in addressfield on browser then it works and translates all text to germany.

    Would be nice to get it work with links.
    Regards
    Juhani

  9. Jeff Starr

    Okay, I finally took some time and looked into the htaccess/link issue. Apparently Google has “revamped” their query string parameters for automatic translations. As a result of the changes, the htaccess code presented in this article does not work.

    In order to find a working replacement, I spent several hours researching and testing but only was able to find a partial solution to the htaccess/link dilemma. Using Apache’s RedirectMatch directive, I was able to come within one character of success.

    The “one character” in question is a ‘literal question mark’ (?). RedirectMatch fails to escape them, and Google refuses to play with their URL-encoded alternatives.

    Long story short: I can get the htaccess/link method to work if someone can figure out how to escape (or work around) a literal question mark in a RedirectMatch directive. Until then, I recommend using the PHP method (described above) for your automatic translation needs.

[ Comments are closed for this post ]