Post on 06-May-2015
description
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
© 2014 Welch Allyn® All rights reserved
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
© 2014 Welch Allyn® All rights reserved
Illustration examples
© 2014 Welch Allyn® All rights reserved
Implementation of structured authoring
• One option:
– Separate graphics and text
– Graphic with numbered or lettered callouts
– Table with callout content in body of text
© 2014 Welch Allyn® All rights reserved
Illustration example
© 2014 Welch Allyn® All rights reserved
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
© 2014 Welch Allyn® All rights reserved
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
© 2014 Welch Allyn® All rights reserved
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+)
© 2014 Welch Allyn® All rights reserved
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?)
© 2014 Welch Allyn® All rights reserved
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
© 2014 Welch Allyn® All rights reserved
Discovery Process
• Researched tools that allow round-tripping of text in
graphics
• The most promising tool was “CopyFlow Gold”
© 2014 Welch Allyn® All rights reserved
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
© 2014 Welch Allyn® All rights reserved
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.
© 2014 Welch Allyn® All rights reserved
The Process, 1: Planning
• Writer maintains and supplies to UI designer &
Illustrator: spreadsheet of file names, marked-up
documentation indicating file names of graphics
© 2014 Welch Allyn® All rights reserved
The Process, 2: Preparing for Handoff
• English strings supplied to designer (ideally) or
illustrator; check each against text in files
© 2014 Welch Allyn® All rights reserved
The Process, 2: Preparing for Handoff
• 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.)
© 2014 Welch Allyn® All rights reserved
The Process, 2: Preparing for Handoff
• Layered Photoshop file with all layers visible:
© 2014 Welch Allyn® All rights reserved
The Process, 2: Preparing for Handoff
• Same Photoshop file, with background invisible:
© 2014 Welch Allyn® All rights reserved
Examples of common problems encountered
• If text is rasterized as part of the background, it will not
be translated
© 2014 Welch Allyn® All rights reserved
Examples of common problems encountered
• “Pulse Rate” in UI does not match “Pulse rate” in strings and
will remain English in localized graphics
© 2014 Welch Allyn® All rights reserved
The Process, 2: Preparing for Handoff
• UI designer supplies .PSD files, named according to
Writer’s spreadsheet/notes
• Illustrator checks file names against spreadsheet to
ensure none are missing
© 2014 Welch Allyn® All rights reserved
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
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• Convert all .psd files to layered .tif, save them into the
TIF folder
• Convert all the .tif files to .ai
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• Open Illustrator, run CopyFlow Gold script
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• Point CopyFlow Gold to the English “Illustrator” folder
• Repeat for “Set Text Export Folder” and click “Export”
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• 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
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• CMS Analyst supplies spreadsheet for all strings.
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• 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
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• 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
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• Note anything that could cause problems in the “find &
replace,” such as strings that are part of longer strings,
decide how to handle those
© 2014 Welch Allyn® All rights reserved
The Process, 3: Processing
• 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
© 2014 Welch Allyn® All rights reserved
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)
© 2014 Welch Allyn® All rights reserved
The Process, 4: Translating
• 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
© 2014 Welch Allyn® All rights reserved
The Process, 4: Translating
• Open any of the .AI files you just imported the XML
into, you will find that it has been translated!
© 2014 Welch Allyn® All rights reserved
The Process, 4: Translating
• 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
© 2014 Welch Allyn® All rights reserved
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?
© 2014 Welch Allyn® All rights reserved
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?
© 2014 Welch Allyn® All rights reserved
Questions?
© 2014 Welch Allyn® All rights reserved
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