Plugging Topics into Google Translate

We have had people us ask how they can have Flare’s WebHelp output ‘plug into’ Google translate. Although this is not an ideal solution to get your content translated, it could be “good enough” for a temporary solution or for content that you only need a rough translation.  Google makes it pretty easy for us to do this.  All we have to do is add the script below to a master page and then use that master page in the target. This solution will only work if you have an Internet connection.

You can get a more customized script from Google or use the one below:

<div id="google_translate_element"  style="float: right;"></div><script>
function googleTranslateElementInit() {
 new google.translate.TranslateElement({
 pageLanguage: 'en',
 layout: google.translate.TranslateElement.InlineLayout.SIMPLE
 }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

In this example we will create a new project, add a master page and add the script from Google to it, assign the master page to a target, generate and view the output.

Create a New Project

  1. Create a new project (File > New Project)
  2. Name it whatever you want and pick the location
  3. Click Next
  4. Select the Policy and Procedures Guide template
  5. Click Next
  6. Select MyWebHelp from the list
  7. Click Finish

Create a Master Page

  1. Click on the Project ribbon
  2. Click on New File
  3. From the drop-down in the New File UI, select Master Page
  4. Select the MasterPage.flmsp from the New from template area and name it MP
    Add Master Page
  5. Add the file
  6. Optional: We will now remove some of the other items in this master page.  Right-click on the breadcrumbs proxy and Delete it.  Repeat this for the mini-toc proxy and the topic toolbar proxy
  7. Save all

Add the Script to the Master Page

At this point you should have a master page with just a topic proxy in it.  It should look like this:

Master Page

  1. Open the master page in the text editor by clicking the text editor toolbar button Open Text Editor shown in the image above.
  2. Select and copy the script from the beginning of this post, or get a more customized one from Google. Note: If you get another version of the script from Google, make sure that you type in http: after the src=” and before the // toward the end of the script.
  3. Paste the script into the body of the master page, as shown below:
    Paste Script
  4. Save All
  5. Close the tabs that are named MP.flmsp

Add the Master Page to the Target

All that is left to do is assign the master page to the target, generate and view the results.

  1. Go to the Project Organizer and open the Targets folder
  2. Double-click the WebHelp target
  3.  Go to the Advanced tab and scroll down to the Master Page section
  4. Select the MP master page from the drop-down
    Assign Master Page
  5. Save All
  6. Generate and view the output.
  7. Click on the topic “How to Use This Template
  8. You should see the Google Translation drop-down in the upper right of each topic.  To translate the page, simple click the drop-down and select the desired language.
    Topic with drop-down

 

MadCap Simon

About MadCap Simon

MadCap Simon has been the MadCap Software mascot since the company’s inception. Simon loves to help you get the most out of MadCap’s suite of software…and he has a really cool hat.

This entry was posted in Flare, Tech Comm, Tips & Tricks. Bookmark the permalink.

4 Responses to Plugging Topics into Google Translate

  1. Ken Billing says:

    I tried this two projects, one exactly as in your instructions, but both hang upon viewing. Is the script not compatible with HTML5 targets?

  2. Ken Billing says:

    You can disregard my earlier comment. It works when published to a public website. Thanks!

  3. google says:

    Great site. Lots of useful info here. I am sending it to several friends ans also sharing in delicious. And of course, thanks in your effort!

  4. Don Johnson says:

    I’d like to take this to the next level. We do localize our help systems in some languages but it is just too expensive to cover all the languages of our customer base. I’d like to deploy something like this, but it isn’t well-suited for a two-panel Help system: in WebHelp 1.0, I can place a translator widget in both the TOC and the Content, but in the TOC it is enormous and ugly, and the two cannot be synchronized.

    In HTML5 help, which is what I’d rather deploy, I wonder if there is a way to place this widget in the HTML5 skin or somewhere else, so that a single language choice would translate the TOC as well as the content?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>