Spectrum 2014 welch_allyn

Creating and Managing

Content-Heavy Localized Graphics

for Multilingual Documentation

Corrie Baum, Illustrator/Graphic Designer, Technical Communication Joan Taggart, Sr. Analyst, Content Management System

Rochester Chapter

© 2014 Welch Allyn® All rights reserved

Agenda

• Introductions

• Background

• Problem

• Solution

• Questions


In the beginning...

• Welch Allyn manufactured hardware devices

• No UI

• Documentation tools

– Word

– FrameMaker

– Corel Draw

• Text imbedded in graphic

• Required translation

• Cost high for translation and DTP


Illustration examples


Implementation of structured authoring

• One option:

– Separate graphics and text

– Graphic with numbered or lettered callouts

– Table with callout content in body of text


Illustration example


Technology innovations

• Along with shift to structured authoring came devices

with embedded software

• Software strings translated and loaded to device

• Required to publish manuals with translated strings in

the image


Implementation of structured authoring

• Pros

– content reuse

– eliminate DTP

• translated images could be batch loaded into CMS

• manuals generated with translated graphic without having to re-insert

correct image for each language in source documents

• But the image file had to have the correct file name


First time process

• Needed simulators to display screen needed

• Screen dumps taken on device

• Image files had no meaningful names so each file had

to be opened and renamed appropriately

• Process repeated for each language (15+)


Slower than a...

• Process took 6 to 8 weeks

• And then there were the last minute changes to the UI (design freeze – what’s that?)


Discovery Process

• Needed a way to localize screens without involvement

from software and testing teams

• Discovered that, for embedded software, every screen

is created as a layered .PSD by UI designers before

being handed off to software engineers

• This discovery led us to explore using those .PSDs as

“screen captures,” swapping English text for localized

text


Discovery Process

• Researched tools that allow round-tripping of text in

graphics

• The most promising tool was “CopyFlow Gold”

http://youtu.be/22sEKpbkb7o

http://youtu.be/22sEKpbkb7o


Basic Workflow Requires More Work

• CFGold says the basic workflow is to export the text

out of the Illustrator .ai or .eps file into .xml text file,

translate the .xml text file, then re-import into the

Illustrator documents.

• Easy enough – but how to prepare assets to get to that

point?

• With limited info available, embarked on a trial & error

process, which has evolved into an advanced workflow


The Process, 1: Planning

• Writer works with UI designer to determine which

screens need to be illustrated

• Writer submits request to UI designer, detailing what

info each screen should include

• UI designer reviews request, communicates

inaccuracies, works with writer to resolve.


The Process, 1: Planning

• Writer maintains and supplies to UI designer &

Illustrator: spreadsheet of file names, marked-up

documentation indicating file names of graphics


The Process, 2: Preparing for Handoff

• English strings supplied to designer (ideally) or

illustrator; check each against text in files



• All layered graphics files must have:

– All text matches strings exactly: capitalization, spelling,

spacing, returns (do not use any), punctuation, etc.

– Background elements merged into a single background layer

– Text must be text

– Text must be properly aligned left, center, or right as

appropriate for the UI

– Delete all hidden layers

– Sized according to documentation needs, re: height x width,

resolution (300ppi, 72ppi, etc.)



• Layered Photoshop file with all layers visible:



• Same Photoshop file, with background invisible:


Examples of common problems encountered

• If text is rasterized as part of the background, it will not

be translated


Examples of common problems encountered

• “Pulse Rate” in UI does not match “Pulse rate” in strings and

will remain English in localized graphics



• UI designer supplies .PSD files, named according to

Writer’s spreadsheet/notes

• Illustrator checks file names against spreadsheet to

ensure none are missing


The Process, 3: Processing

• Set up empty directories for each

language: one “Illustrator” for .ai files, one

“Export” and one “Import”

• Name parent folders as _xx-xx

(_xx-xx = language code), name the

English folder “English”

• Add empty “PSD” and “TIF” directories to

English (not necessary if already working

with .ai files)

• Place all of the .PSDs into the “PSD” folder



• Convert all .psd files to layered .tif, save them into the

TIF folder

• Convert all the .tif files to .ai



• Open Illustrator, run CopyFlow Gold script



• Point CopyFlow Gold to the English “Illustrator” folder

• Repeat for “Set Text Export Folder” and click “Export”



• CFGold will batch export all of the

text from every Illustrator file in that

folder as XML, saving an XML file for

each Illustrator as the same file

name, with .xml extension

• Copy (copy – not move) all of the

files from the “Export” folder to the

“Import” folder



• CMS Analyst supplies spreadsheet for all strings.



• Make a simple spreadsheet with two columns

• Open ALL of the English .xml files and look for

strings, found between <textRun> tags

• Enter each string in the spreadsheet, close each

.xml file as you complete it

• Alphabetize and discard duplicates.

• Any text flattened into background won’t be

detected because it’s not text



• The “Word List” identifies only active strings

• Compare to strings and hide all rows in strings

spreadsheet that don’t match the Word List

52-81 hidden



• Note anything that could cause problems in the “find &

replace,” such as strings that are part of longer strings,

decide how to handle those



• Copy (copy – not move) the English .ai files & paste into the corresponding Illustrator folder for each language

• Add the name of the language folder to the end of the file name of every file, immediately preceding the file extension


The Process, 4: Translating

• Now you’re ready to make all of your XML files with

CopyFlow Gold.

• Video on the CopyFlow Gold website explains this in

detail

• Basically a repeat of the process outlined earlier, for

each language other than English (Set Illustrator and

Export folders; run Export to generate XML files; copy

those XML files into the Import folder)

https://www.youtube.com/watch?v=22sEKpbkb7o&feature=youtu.be



• Using your XML editor of choice, replace the English text with the equivalent translated string

• I use Dreamweaver, setting up Queries for each English string, running Find & Replace to replace the English strings with the equivalent localized strings, which replaces every instance of the queried string in that specific folder

• Once the XML is translated, point CopyFlowGold to the appropriate Illustrator and Import folders, and click “Import” to batch process



• Open any of the .AI files you just imported the XML

into, you will find that it has been translated!



• Repeat for each language until complete

• Save and/or export your .AI files as whatever final

format you will be using in your documentation (.TIF,

.SVG, .PNG, etc.)

• Get the final files into your CMS and your doc set


Lessons Learned

• Time consuming when there are a lot of strings,

languages & graphics, but results are better than the

old way and can be completed earlier

• More of this can be automated (some is, just not shown

here)

• Is it value-added?


Our questions for you

• How do you handle localized, text-heavy graphics?

• Do you translate the text in the image or do you leave it

in English?


Questions?


Creating and Managing Content-Heavy

Localized Graphics for Multilingual

Documentation

Corrie Baum and Joan Taggart | April 14, 2014

[email protected]

[email protected]

mailto:[email protected]

mailto:[email protected]

Spectrum 2014 welch_allyn

Presentations & Public Speaking