1. 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

2. 2014 Welch Allyn All rights reserved Agenda Introductions Background Problem Solution Questions 3. 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 4. 2014 Welch Allyn All rights reserved Illustration examples 5. 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 6. 2014 Welch Allyn All rights reserved Illustration example 7. 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 8. 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 9. 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+) 10. 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 whats that?) 11. 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 12. 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 13. 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 14. 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. 15. 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 16. 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 17. 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.) 18. 2014 Welch Allyn All rights reserved The Process, 2: Preparing for Handoff Layered Photoshop file with all layers visible: 19. 2014 Welch Allyn All rights reserved The Process, 2: Preparing for Handoff Same Photoshop file, with background invisible: 20. 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 21. 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 22. 2014 Welch Allyn All rights reserved The Process, 2: Preparing for Handoff UI designer supplies .PSD files, named according to Writers spreadsheet/notes Illustrator checks file names against spreadsheet to ensure none are missing 23. 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 24. 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 25. 2014 Welch Allyn All rights reserved The Process, 3: Processing Open Illustrator, run CopyFlow Gold script 26. 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 27. 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 28. 2014 Welch Allyn All rights reserved The Process, 3: Processing CMS Analyst supplies spreadsheet for all strings. 29. 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 tags Enter each string in the spreadsheet, close each .xml file as you complete it Alphabetize and discard duplicates. Any text flattened into background wont be detected because its not text 30. 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 dont match the Word List 52-81 hidden 31. 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 32. 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 33. 2014 Welch Allyn All rights reserved The Process, 4: Translating Now youre 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) 34. 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 35. 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! 36. 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 37. 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? 38. 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? 39. 2014 Welch Allyn All rights reserved Questions? 40. 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