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:
http://orrmarshall.com/wp/
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.
See:
http://www.meryl.net/2007/08/flags-as-a-representative-for-a-language/
http://www.cs.tut.fi/~jkorpela/flags.html
http://www.456bereastreet.com/archive/200604/indicating_language_choice_flags_text_both_neither/
http://www.jankoatwarpspeed.com/post/2008/10/27/You-should-never-use-flags-for-language-choice.aspx
(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.
Nick
http://wordpress.org/extend/plugins/google-ajax-translation/