For a couple of years, I have been translating Adobe® RoboHelp® help articles from German into American English for a printer and asset management software maker. RoboHelp mostly generates HTML or zipped versions thereof (e.g., EPUB e-books), but for internationalization (#i18n) and localization (#l10n) purposes, it uses the XML-based industry standard, XLIFF (#xl8 being the hashtag of choice for all things translation).
All modern CAT tools can process XLIFF, however, sometimes all you need is a first glance at what that RoboHelp .XLF file is about and how much of it is already translated, or if there are any editor’s or translator’s notes included. This can easily be done by keeping a CSS file ready, and by linking it to the .XLF file. No need to fire up that heavyweight CAT tool of yours.
The good news: HTML and CSS, and also XML (and by extension, XLIFF, too) are, really, all plain old text files which any editor can open. In their uninterpreted, raw form, they are just not easy to read or nice to look at. Consider this example of a RoboHelp XLIFF file:
<?xml version="1.0" encoding="UTF-8"?>
<xliff xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:oasis:names:tc:xliff:document:1.2 xliff-core-1.2-transitional.xsd" xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:rh="http://robohelp.adobe.com" version="1.2">
<file original="contents/assets/docs/00_Examples/SubExamples/example.htm" datatype="plaintext" source-language="de-DE" target-language="en-US">
<header>
<reference><internal-file form="base64">[encoded binary data]</internal-file></reference>
<tool tool-id="1" tool-name="Adobe RoboHelp"/>
<rh:projectid>12345ec0-1234-4321-0000-987a2f6543af</rh:projectid>
</header>
[etc.]
The trained eye will be able to spot what’s of interest, like the original filename of the help file, but it would sure be nicer to immediately see the contents to translate – along with any existing translations and any notes an editor or translator might have attached to them.
When we open the .XLF file in a web browser, it will generally show us the same “tag soup” that we see when using a text editor. But we can at least get Firefox to make it all shiny and pretty and clear by styling it with CSS.
The other browsers, most notably Chrome and Edge, sadly still won’t display XML properly without using an extension like “XML Plus” – I don’t know about Apple’s browser(s), so please drop me a comment if it works or not.
Abbreviations
HTML: the HyperText Markup Language, used to display content on the web.
CSS: Cascading Style Sheets tell web browsers how to display HTML elements and attributes, they are what makes the web so colorful.
XML: the eXtensible Markup Language, used to logically structure content.
XLIFF: the Translation (XL) Interchange File Format is used to exchange translatables as pairs of (often pre-segmented) source-language and target-language content.
XSL: The eXtensible Stylesheet Language is used to style XML and to transform it into other data types, such as HTML.
CAT: Computer-Aided Translation, usually a combination of Translation Memory (TM), Terminology Database (TB) and, these days, Machine Translation (MT) input in some form, e.g., pre-translation or auto-complete features – often also with spelling and style checkers and other quality assurance helpers.
Now, it’s just three easy steps:
- Drop the CSS stylesheet I’ve come up with in the same folder as the RoboHelp XLIFF file
- Add a line of code to the XLIFF file to link the stylesheet, insert this right after the XML declaration, i.e. as the file’s new line 2:
<?xml-stylesheet href="rhxlf-style.css" title="RoboHelp Tri-Column View StyleSheet"?> - Open the XLIFF in Firefox via File > Open or through drag’n’drop. It should look like this now:
I originally wanted to make any <note> appear above the respective element, or at least hover it above the other elements using some z-axis magic, but that didn’t work out well, so for now, comments are showing as a red bar on the right side that will expand and displace the other rows on mouseover.
I hope this will be of use to some of you out there. You can use, edit and redistribute the CSS stylesheet as you wish, provided you keep my contact details and the CC BY-SA 4.0 license info, for example if the colors don’t suit you or if you come up with a better solution for these <note> tags. And, of course, if you’ve got any technical translation to be done between German, English and French, you can also drop me a line.
All the best,
Christopher
DeFrEnT …it’s different!
Leave a Reply