some changes I made with your Google AJAX Translation plugin (13 posts)

  1. monodistortion
    Posted 7 years ago #

    Hi Libin and/or Michael,

    I looked at the translation plugins and thought I would give yours a shot. I like the way the Google ajax translation works in myspace blogs if you've seen it there.

    Here's what I came up with:

    The changes I made are:

    • Added an option to enable and disable comment translation.
    • The "Translate" buttons appear only after the document is ready and if javascript is enabled.
    • Fixed the comment translation so that it's XHTML valid. (The problem was with the order of the default filter wpautop.)
    • Added all 42 languages currently available from http://code.google.com/apis/ajaxlanguage/
    • The list of languages appear in a popup window so they take up less space (42 languages is a lot!)
    • The languages are displayed in their own language.
    • If you hover over a language name the tooltip shows the language name in English.
    • The popup window is styled with its own external CSS from google-ajax-translation.css.
    • In Firefox the popup window is in three columns using CSS3. Safari doesn't quite format the columns correctly so I left that out.
    • I used the jQuery-translate plugin to access Google translate. http://code.google.com/p/jquery-translate/

      There are a lot of advantages with jQuery-translate like:

      • It automatically breaks longer strings up into pieces less than 1000 characters so the translate API can handle them.
      • It can handle large sections of the html DOM so I have it translate the entire post including the date, title, etc.
      • It saves the original text and translated text into the html DOM so that switching back to a language is instantaneous. (Something doesn't work right in nested comments still.)
      • It's easy to show a throbber while the translation is in progress. (I just used three dots since a graphic doesn't work well on my pages.)
      • Since it works so well I think the next step would be an optional sidebar widget that just sends the entire page to jQuery-translate (see: http://www.texasonline.com/ ) but it's kind of slow for a big page.
    • The fun part comes in when you change your browser's preferred language. (See http://www.w3.org/International/questions/qa-lang-priorities and you can double check it at http://whatsmyuseragent.com/ where it says HTTP_ACCEPT_LANGUAGE.)
      • The "Translate" buttons show up in the browser's preferred language if available.
      • The browser's preferred language is put first in the list of languages in the popup.
      • The first time the user clicks on a "Translate" button the tooltip language names are sent off to jQuery-translate and then inserted back into the tooltips so they can be displayed in all 42 languages also. So to the user the plugin is completely self-localized.

    I updated the code for displaying flag icons but didn't work on it further. Flags don't really accurately represent languages well.

    (I would put the flag images into a CSS background sprite if I were going to use them.)

    The javascript code section is big enough that it might be better to make a link to an external file but I'll leave it as-is for now.

    Please try it out and see if I missed any bugs or if anything breaks.


  2. monodistortion
    Posted 7 years ago #

    Here's just a small update if anyone is interested.

    Libin added me the the Subversion repository so I thought I would fix up any remaining issues I had with the plugin.

    • I added the rest of the flags so there are flag icons for all 42 languages. (These are from http://www.famfamfam.com/lab/icons/flags/ )
    • All the flag icons are assembled into one PNG file and displayed as CSS background images sprites, which reduces the number of HTTP requests.
    • I added an AJAX loading throbber image. I think users feel more comfortable seeing a throbber when something is loading on the page. (From http://www.ajaxload.info/ )
    • Javascript has been minified and moved to an external file. The non-minified source code is google-ajax-translation.js

    I'll have to update the documentation before uploading everything, but please try it out if you're curious.

  3. alquanto
    Posted 7 years ago #

    Cool! Thanks for your work.

    I didn't know that there is something like jquery-translate available... this makes things a lot easier. The option "show language as a flag" is in fact not that simple, but covering just a few european languages works. Full I18N e.g. de_DE, de_CH and so on is way beyond the scope of this little plugin.

    The idea with the css-striping-thingie is very good.

    I'll test it.

    Thanks again,


  4. alquanto
    Posted 7 years ago #

    OK found an issue regarding "malformed URIs", so please change the following lines: 380, 388 and 404 by removing unnecessary spaces in the url:

    before: href=\"javascript:google_translate('$lg', '$type', $id);\"
    after: href=\"javascript:google_translate('$lg','$type',$id);\"

    so far everything works very good.

    BTW what Translation-icon would you suggest instead of having a link called [translation]? :-)


  5. monodistortion
    Posted 7 years ago #

    What shows the problem with malformed URIs? My pages validate fine by the http://validator.w3.org/

  6. alquanto
    Posted 7 years ago #

    the problem with this occurs with templates using "XHTML 1.0 Strict"-doctypes: the whitespaces in the hrefs aren't allowed. Thats all.

  7. rsmarsha
    Posted 7 years ago #

    monodistortion I like the changes on your orrmarshall blog you've made to this plugin. How do i get your version?

    Are you planning to update it, or maybe your changes can be integreated into the main plugin itself so people can choose things like flags or link.

    If you can let me know where I can get your modded version and if your going to keep this up to date that would be great. :)

  8. rsmarsha
    Posted 7 years ago #

    Ah I think i'm being a bit thick.

    Am I right in thinking monodistortion's changes have now been added to the plugin downloadable from this site?

  9. monodistortion
    Posted 7 years ago #


    Where do you see this? I use the http://validator.w3.org/ and I've never seen this problem.

    the problem with this occurs with templates using "XHTML 1.0 Strict"-doctypes: the whitespaces in the hrefs aren't allowed. Thats all.

    It's an easy change to make of course. I've never seen the white space requirement in the XHTML spec.

  10. eiland
    Posted 7 years ago #


    I have a page where i add posts to a static page (see my homepage url, (built according to static-frontpage-combined-with-dynamic-content) and it now it seems css/js isn’t applied to the translate link at the blog posts. Any ideas?


  11. monodistortion
    Posted 7 years ago #


    Please start a new thread for your question. I don't see the page that you're linking to.

  12. yakos
    Posted 7 years ago #

    Found an issue when used in conjunction with Blogarate (another plugin which is allowing rating of the post)
    Why couldn't the [Translate] button be at the top of the post?

  13. monodistortion
    Posted 7 years ago #


    Please start a new thread for your questions.

    I haven't tried Blograte but it looks like it hasn't been updated for a while. The problem is most likely that it's using an old jquery library.

    Moving the [Translate] button wouldn't be too hard. I think it's less intrusive at the bottom though.

Topic Closed

This topic has been closed to new replies.

About this Topic