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”

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)

• 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
corrie.baum@welchallyn.com
joan.taggart@welchallyn.com

Spectrum 2014 welch_allyn

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (7)

Similar to Spectrum 2014 welch_allyn

Similar to Spectrum 2014 welch_allyn (20)

Recently uploaded

Recently uploaded (20)

Spectrum 2014 welch_allyn