Localized String Lengths and UI Design

Creating a UI design with right button widths and field lengths are quite challenging when you consider using image spriting techniques. When I was designing a page I would go to www.microsofttranslator.com and use it to translate words to see if everything works as expected. However, I had to do it for multiple languages which is painful. In the end, all I want is give one string and get it translated into multiple languages at once. So I started looking at how to use Bing translation API, specifically the AJAX interface. However, the example given on the MSDN page was using really antiquated way of making AJAX calls.

I created a page that would make a simple AJAX call to Translate method to translate a given input string.

 <script type="text/javascript">
     $(document).ready(function () {
         $("#translateButton").click(function () {
             $(".translationResult").each(function () {
                 var translationResultObject = this;
                 var translationData = {};
                 translationData.appId = $("#bingAPIKey").text();
                 translationData.to = $(translationResultObject).attr("id");
                 translationData.from = "en";
                 translationData.text = $("#translationInput").val();
          $.ajax({
            url: 'https://api.microsofttranslator.com/V2/Ajax.svc/Translate',
            data: translationData,
            dataType: 'jsonp',
            jsonp: 'oncomplete',
            success: function (data) {
               $(translationResultObject).text(data);
            }
          });
             });

         });
     });

 </script>

Note the data type in AJAX call, I am using jsonp instead of json as the Bing AJAX interface calls use callback mechanism to return data. However I am not passing the callback function name and relying on the success method itself to use the context variable to assign my translated text back to DOM. You can also use another callback function and use jsonpCallback to direct jquery to use that. If you want to do that then use GetTranslations along with options parameter to pass State back and forth. I had bunch of div elements that provided the needed input for the AJAX call to do its work.

 <div class="languageLabel">German:</div> <div id="de" class="translationResult"></div><br />
<div class="languageLabel">Japanese:</div> <div id="ja" class="translationResult"></div><br />
<div class="languageLabel">French:</div> <div id="fr" class="translationResult"></div><br />
<div class="languageLabel">Spanish:</div> <div id="es" class="translationResult"></div><br />
<div class="languageLabel">Chinese Simplified:</div> <div id="zh-CHS" class="translationResult"></div><br />
<div class="languageLabel">Chinese Traditional:</div> <div id="zh-CHT" class="translationResult"></div><br />
<div class="languageLabel">Russian:</div> <div id="ru" class="translationResult"></div><br />
<div class="languageLabel">Italian:</div> <div id="it" class="translationResult"></div><br />
<div class="languageLabel">Korean:</div> <div id="ko" class="translationResult"></div><br />
<div class="languageLabel">Portugese:</div> <div id="pt" class="translationResult"></div><br />

Now lets see all of this in action.

I have attached the entire htm file to this blog post for reference.

Thanks
RV

TranslateStrings.htm

Comments

• Anonymous
  July 27, 2011
  I do not see the attached htm file. Can you point out the link to the file? Thanks!
• Anonymous
  July 27, 2011
  The comment has been removed