Using Google Translation Toolkit with Adobe Illustrator

Using Adobe Illustrator, Google Translation Toolkit and some custom XSLT (extensible stylesheet language transformations) I’ve established a workflow for producing translated versions of my mini-comic ‘Understanding Picklets‘.

I’m a Melbourne-based software developer. My current project is a digital publishing platform for mobile interactive content called the Picklet Platform.

‘Understanding Picklets’ is a self-published mini-comic in the style of, and heavily influenced by, Scott McCloud’s ‘Understanding Comics‘. It serves as an introduction to the Picklet Platform. I am distributing it as promotional material at a series of Picklet Author Workshops I’ve been running in Melbourne. I plan to take the project on tour to the UK and Europe this year to recruit authors and want to hand out the comic in each country I visit.

This post describes my setup for producing translations of the comic.

The Software

I’m using Illustrator CS3 to create the frames, balloons and text on each page. I bring the frames and the drawings (from Photoshop) together in Scribus in a print layout based on A5 page size, and save a PDF from Preview (on a Mac) that prints two comic pages to each A4 sheet. (I have a separate layout for producing a web version which shows each spread on a single page.)

The workflow described here assumes your translator will work in Google Translation Toolkit. The specific advantage of this is the ability to produce a translated HTML document which preserves the markup of the original.

The third software component is an XSLT processor. During my research I used a service provided by the W3C with varying success, and then downloaded an application called Editix (30-day trial) that is able to apply the stylesheet to an XML document. There are various other XML editors that will also handle XSLT transformations.

In the end I wrote a python script to do the transformation, which runs faster than either alternative.

The Process

Each step represents a language transformation – either machine readable markup language (HTML -> XML), or natural language (English -> Russian). The full process represents the translation of en.ai (Illustrator document with English text) to ru.ai (Illustrator document in Russian) using tools for the following transformations;

  • .ai -> .xml (Illustrator saves text variables as XML)
  • .xml -> .html (stylesheet transformation of XML)
  • en.html -> ru.html (Google Translation Toolkit guided by native speaker)
  • .html -> .xml (stylesheet transformation of XML)
  • .xml -> .ai (Illustrator loads text from XML file)

Perform the following steps to translate an Illustrator document with English text into, for example, an Illustrator document with Russian (ru) text;

  1. Getting original text from Illustrator as xml (en.ai -> en.xml)
  2. Converting xml to html (en.xml -> en.html)
  3. Translating html in Google Translation Toolkit (en.html -> ru.html)
  4. Converting translated html to xml (ru.html -> ru.xml)
  5. Loading translated xml into Illustrator (ru.xml -> ru.ai)

Then for each additional language start with the English HTML file and perform steps 3, 4 and 5.

From the top…

1. Illustrator Variables and Data Set to XML

Here the aim is to generate a single XML file containing all of the original text you want to have translated. If you have multiple Illustrator documents you’ll need to manually combine the individual saved XML files into a single one. You can edit XML with any text editor. I use TextMate.

Select an existing type object in your Illustrator document. Click the ‘Make Object Dynamic’ button in the Variables panel. Double click on the new Variable definition and give it a name that will make it unique across all your comic pages. Eg. page_1_type_1

Repeat this for all the text objects you want to translate. Eg. page_1_type_2, page_1_type_3, etc.

Google ‘illustrator create variables

Create a new Data Set for these variables. Click the ‘Capture Data Set’ button in the Variables panel.

Google ‘illustrator use data sets

Save the variables you’ve defined to an XML file. Choose ‘Save Variable Library…’ from the Variables panel menu. Name it your_project_en.xml so you know it contains the English version of your text.

Google ‘illustrator data-driven graphics tutorial

2. Cleanup and transform to HTML

My comic project has one Illustrator document per page, so I create a page_N_en.xml with just the Data Set for that page. I manually combined all the individual page Data Sets so I had a single pages_en.xml file containing all the text for my comic.

If you need to manually combine multiple XML files, the important thing to preserve is the sampleDataSet element and its parents and child nodes. You can ignore the variable elements. For example if you have files like this;

<?xml version="1.0" encoding="utf-8"?>
<svg>
<variableSets  xmlns="ns_vars">
  <variableSet  varSetName="binding1" locked="none">
    <variables>
      <variable  category="ns_flows" trait="textcontent" varName="page_0_written_by"></variable>
      <variable  category="ns_flows" trait="textcontent" varName="page_0_copyright"></variable>
    </variables>
    <v:sampleDataSets  xmlns:v="http://ns.adobe.com/Variables/1.0/" xmlns="http://ns.adobe.com/GenericCustomNamespace/1.0/">
      <v:sampleDataSet  dataSetName="page_0">
        <page_0_written_by>
          <p>Written and drawn by</p>
        </page_0_written_by>
        <page_0_copyright>
          <p>Copyright © 2011 Stewart Haines</p>
      </v:sampleDataSet>
    </v:sampleDataSets>
  </variableSet>
</variableSets>
</svg>

Extract the sampleDataSets element and children and combine them in a single file, preserving the toplevel ‘svg’ node. For example your pages_en.xml might end up looking like this;

<?xml version="1.0" encoding="utf-8"?>
<svg>
<variableSets>
  <variableSet locked="none" varSetName="binding1">
    <sampleDataSets>
 
      <sampleDataSet  dataSetName="page_0">
        <page_0_written_by>
          <p>Written and drawn by</p>
        </page_0_written_by>
        <page_0_copyright>
          <p>Copyright (c) 2011 Stewart Haines</p>
          <p></p>
          <p>This work is licensed under a Creative Commons</p>
          <p>Attribution- ShareAlike 3.0 Unported License.</p>
          <p>http://creativecommons.org/licenses/by-sa/3.0/</p>
          <p></p>
          <p>'Picklet' is a trademark of RobotInaBox Pty Ltd</p>
        </page_0_copyright>
        <page_0_drawn_by>
          <p>Drawn by</p>
        </page_0_drawn_by>
      <sampleDataSet  dataSetName="page_1">
        <page_1_so_you_want>
          <p>So, you want to make a picklet?</p>
        </page_1_so_you_want>
        <page_1_excellent>
          <p>Excellent.</p>
        </page_1_excellent>
        <page_1_what_do>
          <p>What do you need to know?</p>
        </page_1_what_do>
        <page_1_lets_start>
          <p>Let's start at the beginning.</p>
        </page_1_lets_start>
      </sampleDataSet>
      </sampleDataSet>
    </sampleDataSets>
  </variableSet>
</variableSets>
</svg>

I also stripped some of the DOCTYPE header tags from the document since I had trouble with the document not validating. Then perform the stylesheet transformation (in Editix or your XML editor) on pages_en.xml to produce pages_en.html

3. Upload and translate

Upload the pages_en.html document to Translation Toolkit and identify which language you want to translate to. The translation will be initialised by Google Translate, meaning that your translator’s job is largely to confirm the suggested translation and occasionally provide a more natural-sounding version.

The side-by-side display of the original and translated text also allows you to recommend a translation of similar line length to your original. This is important so you don’t have to tweak your Illustrator page layouts.

When your translator is happy with it, download the translated text.

4. Transformation to XML

Transform the HTML document using your XML editor and the XSLT stylesheet to obtain pages_LL.xml with the full translated text (where ‘LL’ is the language code for your translation).

5. Load translation and tweak

You will want to make a copy of your original Illustrator pages to apply the translated text. My Illustrator page documents are in a folder called frames_en. Copy the whole folder and name it for your translated language, for example frames_ru for Russian.

frames_ru/
  ./page_1.ai
  ./page_2.ai
  ./page_3.ai
  etc.

Then for each page in frames_ru open the Illustrator file and in the ‘Variables’ panel choose ‘Load Variable Library’ and select the ‘translation’ Data Set. You will see your dialog balloons update with the translated text.

You should proof each page, looking particularly for dialog balloons that aren’t big enough to display the translated text. You may need to tweak balloon sizes and layout to accomodate the translation.

Finishing up

You now have a set of translated Illustrator pages to push through the rest of your pre-production workflow.

I make a copy of my English Scribus layout document and update the linked Illustrator files to reference the translated versions, then export a new set of PDFs.

Notes

The stylesheet I’ve written performs one of two transformations depending on the xml document it is applied to. The document saved by Illustrator has a root ‘svg’ node. The html document imported and saved by Google Translation Toolkit has an ‘html’ node. Conceptually they’re separate transformations and could be in distinct stylesheets, but it suited my purposes to combine them.

This is the XSLT stylesheet I use to convert from Illustrator XML to clean HTML and back.

 

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>