{"id":1881,"date":"2024-12-17T11:43:16","date_gmt":"2024-12-17T10:43:16","guid":{"rendered":"https:\/\/www.defrent.de\/?p=1881"},"modified":"2024-12-17T14:20:55","modified_gmt":"2024-12-17T13:20:55","slug":"how-to-display-robohelp-xliff-nicely-in-firefox-with-css","status":"publish","type":"post","link":"https:\/\/www.defrent.de\/en\/2024\/12\/how-to-display-robohelp-xliff-nicely-in-firefox-with-css\/","title":{"rendered":"How to display RoboHelp XLIFF nicely in Firefox with CSS"},"content":{"rendered":"<div class=\"shariff shariff-align-left shariff-widget-align-left\" style=\"display:none\"><ul class=\"shariff-buttons theme-round orientation-horizontal buttonsize-small\"><li class=\"shariff-button mastodon\" style=\"background-color:#ccc\"><a href=\"https:\/\/s2f.kytta.dev\/?text=How%20to%20display%20RoboHelp%20XLIFF%20nicely%20in%20Firefox%20with%20CSS https%3A%2F%2Fwww.defrent.de%2Fen%2F2024%2F12%2Fhow-to-display-robohelp-xliff-nicely-in-firefox-with-css%2F via @defrentck@hessen.social\" title=\"Share on Mastodon\" aria-label=\"Share on Mastodon\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#79b428; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"75\" height=\"79\" viewBox=\"0 0 75 79\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M37.813-.025C32.462-.058 27.114.13 21.79.598c-8.544.621-17.214 5.58-20.203 13.931C-1.12 23.318.408 32.622.465 41.65c.375 7.316.943 14.78 3.392 21.73 4.365 9.465 14.781 14.537 24.782 15.385 7.64.698 15.761-.213 22.517-4.026a54.1 54.1 0 0 0 .01-6.232c-6.855 1.316-14.101 2.609-21.049 1.074-3.883-.88-6.876-4.237-7.25-8.215-1.53-3.988 3.78-.43 5.584-.883 9.048 1.224 18.282.776 27.303-.462 7.044-.837 14.26-4.788 16.65-11.833 2.263-6.135 1.215-12.79 1.698-19.177.06-3.84.09-7.692-.262-11.52C72.596 7.844 63.223.981 53.834.684a219.453 219.453 0 0 0-16.022-.71zm11.294 12.882c5.5-.067 10.801 4.143 11.67 9.653.338 1.48.471 3 .471 4.515v21.088h-8.357c-.07-7.588.153-15.182-.131-22.765-.587-4.368-7.04-5.747-9.672-2.397-2.422 3.04-1.47 7.155-1.67 10.735v6.392h-8.307c-.146-4.996.359-10.045-.404-15.002-1.108-4.218-7.809-5.565-10.094-1.666-1.685 3.046-.712 6.634-.976 9.936v14.767h-8.354c.109-8.165-.238-16.344.215-24.5.674-5.346 5.095-10.389 10.676-10.627 4.902-.739 10.103 2.038 12.053 6.631.375 1.435 1.76 1.932 1.994.084 1.844-3.704 5.501-6.739 9.785-6.771.367-.044.735-.068 1.101-.073z\"\/><defs><linearGradient id=\"paint0_linear_549_34\" x1=\"37.0692\" y1=\"0\" x2=\"37.0692\" y2=\"79\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#6364FF\"\/><stop offset=\"1\" stop-color=\"#563ACC\"\/><\/linearGradient><\/defs><\/svg><\/span><\/a><\/li><li class=\"shariff-button linkedin\" style=\"background-color:#ccc\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.defrent.de%2Fen%2F2024%2F12%2Fhow-to-display-robohelp-xliff-nicely-in-firefox-with-css%2F\" title=\"Share on LinkedIn\" aria-label=\"Share on LinkedIn\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#79b428; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><\/a><\/li><li class=\"shariff-button xing\" style=\"background-color:#ccc\"><a href=\"https:\/\/www.xing.com\/spi\/shares\/new?url=https%3A%2F%2Fwww.defrent.de%2Fen%2F2024%2F12%2Fhow-to-display-robohelp-xliff-nicely-in-firefox-with-css%2F\" title=\"Share on XING\" aria-label=\"Share on XING\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#79b428; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 25 32\"><path fill=\"#126567\" d=\"M10.7 11.9q-0.2 0.3-4.6 8.2-0.5 0.8-1.2 0.8h-4.3q-0.4 0-0.5-0.3t0-0.6l4.5-8q0 0 0 0l-2.9-5q-0.2-0.4 0-0.7 0.2-0.3 0.5-0.3h4.3q0.7 0 1.2 0.8zM25.1 0.4q0.2 0.3 0 0.7l-9.4 16.7 6 11q0.2 0.4 0 0.6-0.2 0.3-0.6 0.3h-4.3q-0.7 0-1.2-0.8l-6-11.1q0.3-0.6 9.5-16.8 0.4-0.8 1.2-0.8h4.3q0.4 0 0.5 0.3z\"\/><\/svg><\/span><\/a><\/li><li class=\"shariff-button facebook\" style=\"background-color:#ccc\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.defrent.de%2Fen%2F2024%2F12%2Fhow-to-display-robohelp-xliff-nicely-in-firefox-with-css%2F\" title=\"Share on Facebook\" aria-label=\"Share on Facebook\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#79b428; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><\/a><\/li><li class=\"shariff-button twitter\" style=\"background-color:#ccc\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fwww.defrent.de%2Fen%2F2024%2F12%2Fhow-to-display-robohelp-xliff-nicely-in-firefox-with-css%2F&text=How%20to%20display%20RoboHelp%20XLIFF%20nicely%20in%20Firefox%20with%20CSS\" title=\"Share on X\" aria-label=\"Share on X\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#79b428; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><\/a><\/li><\/ul><\/div>\n<p>For a couple of years, I have been translating <em>Adobe\u00ae RoboHelp\u00ae<\/em> help articles from German into American English for a printer and asset management software maker. RoboHelp mostly generates <strong>HTML<\/strong> or zipped versions thereof (e.g., EPUB e-books),  but for internationalization (<em>#i18n<\/em>) and localization (<em>#l10n<\/em>) purposes, it uses the XML-based industry standard, <strong>XLIFF<\/strong> (#xl8 being the hashtag of choice for all things translation). <\/p>\n\n\n\n<p>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&#8217;s or translator&#8217;s notes included. This can easily be done by keeping a <strong>CSS<\/strong> file ready, and by linking it to the .XLF file. No need to fire up that heavyweight CAT tool of yours.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>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:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\n&lt;xliff xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:schemaLocation=&quot;urn:oasis:names:tc:xliff:document:1.2 xliff-core-1.2-transitional.xsd&quot; xmlns=&quot;urn:oasis:names:tc:xliff:document:1.2&quot; xmlns:rh=&quot;http:\/\/robohelp.adobe.com&quot; version=&quot;1.2&quot;&gt;\n&lt;file original=&quot;contents\/assets\/docs\/00_Examples\/SubExamples\/example.htm&quot; datatype=&quot;plaintext&quot; source-language=&quot;de-DE&quot; target-language=&quot;en-US&quot;&gt;\n&lt;header&gt;\n&lt;reference&gt;&lt;internal-file form=&quot;base64&quot;&gt;&#x5B;encoded binary data]&lt;\/internal-file&gt;&lt;\/reference&gt;\n&lt;tool tool-id=&quot;1&quot; tool-name=&quot;Adobe RoboHelp&quot;\/&gt;\n&lt;rh:projectid&gt;12345ec0-1234-4321-0000-987a2f6543af&lt;\/rh:projectid&gt;\n&lt;\/header&gt;\n&#x5B;etc.]\n<\/pre><\/div>\n\n\n<p>The trained eye will be able to spot what&#8217;s of interest, like the original filename of the help file, but it would sure be nicer to immediately see the contents to translate \u2013 along with any existing translations and any notes an editor or translator might have attached to them.<\/p>\n\n\n\n<p>When we open the .XLF file in a web browser, it will generally show us the same &#8220;tag soup&#8221; that we see when using a text editor. But we can at least get <a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/new\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"Get Firefox from Mozilla (en-US version)\">Firefox<\/a> to make it all shiny and pretty and clear by styling it with CSS. <\/p>\n\n\n\n<p class=\"has-white-color has-text-color has-background has-link-color wp-elements-391e9478114072a1eeddc9efcc392e2e\" style=\"background-color:#79b428\">The other browsers, most notably <em>Chrome<\/em> and <em>Edge<\/em>, sadly still won&#8217;t display XML properly without using an extension like &#8220;XML Plus&#8221; \u2013 I don&#8217;t know about Apple&#8217;s browser(s), so please drop me a comment if it works or not.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div style=\"color:#32373c;background-color:#79b428\" class=\"wp-block-genesis-blocks-gb-notice gb-font-size-16 gb-block-notice\" data-id=\"3bb430\"><div class=\"gb-notice-title\" style=\"color:#fff\"><p>Abbreviations<\/p><\/div><div class=\"gb-notice-text\" style=\"border-color:#79b428\">\n<p class=\"has-small-font-size\"><strong>HTML<\/strong>: the <em>HyperText Markup Language<\/em>, used to display content on the web.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>CSS<\/strong>: <em>Cascading Style Sheets<\/em> tell web browsers how to display HTML elements and attributes, they are what makes the web so colorful.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>XML<\/strong>: the <em>eXtensible Markup Language<\/em>, used to logically structure content.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>XLIFF<\/strong>: the <em>Translation (XL) Interchange File Format<\/em> is used to exchange translatables as pairs of (often pre-segmented) source-language and target-language content.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>XSL<\/strong>: The <em>eXtensible Stylesheet Language<\/em> is used to style XML and to transform it into other data types, such as HTML.<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>CAT<\/strong>: <em>Computer-Aided Translation<\/em>, usually a combination of <em>Translation Memory<\/em> (TM), <em>Terminology Database<\/em> (TB) and, these days, <em>Machine Translation<\/em> (MT) input in some form, e.g., pre-translation or auto-complete features \u2013 often also with spelling and style checkers and other quality assurance helpers.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Now, it&#8217;s just <strong>three easy steps<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Drop the <a href=\"https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/rhxlf-style.css\" target=\"_blank\" rel=\"noopener nofollow\" title=\"Right-click to download CSS file\"><strong>CSS stylesheet<\/strong> I&#8217;ve come up with<\/a> <strong>in the same folder<\/strong> as the <a href=\"https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example.xlf\" target=\"_blank\" rel=\"noopener nofollow\" title=\"Download example RoboHelp XLIFF file\">RoboHelp XLIFF file<\/a><\/li>\n\n\n\n<li><strong>Add a line of code to the XLIFF<\/strong> file to link the stylesheet, insert this right after the XML declaration, i.e. as the file&#8217;s new line 2: <br><code>&lt;?xml-stylesheet href=\"rhxlf-style.css\" title=\"RoboHelp Tri-Column View StyleSheet\"?><\/code><\/li>\n\n\n\n<li><strong>Open the XLIFF in Firefox<\/strong> via File > Open or through drag&#8217;n&#8217;drop. It should look like this now:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"420\" src=\"https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example_xlf.png\" alt=\"\" class=\"wp-image-1884\" srcset=\"https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example_xlf.png 800w, https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example_xlf-300x158.png 300w, https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example_xlf-768x403.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>I originally wanted to make any <code>&lt;note><\/code> appear above the respective element, or at least hover it above the other elements using some z-axis magic, but that didn&#8217;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.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\" target=\"_blank\" rel=\"noopener\" title=\"Creative Commons BY-SA 4.0 license\">CC BY-SA 4.0 license<\/a> info, for example if the colors don&#8217;t suit you or if you come up with a better solution for these <code>&lt;note><\/code> tags. And, of course, if you&#8217;ve got any technical translation to be done between German, English and French, you can also <a href=\"https:\/\/www.defrent.de\/en\/contact\/\" title=\"Contact me!\">drop me a line<\/a>.<\/p>\n\n\n\n<p>All the best,<br>Christopher<br>DeFrEnT <sub><em>\u2026it&#8217;s different!<\/em><\/sub><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article shows how to style RoboHelp XLIFF files (.xlf) with CSS to nicely display them in Firefox as Type, Source, Segmented Source, Seg. Target, Notes.<\/p>\n","protected":false},"author":1,"featured_media":1884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federate","footnotes":""},"categories":[22,24,1],"tags":[95,93,81,82],"class_list":["post-1881","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-en","category-howto-en","category-unkategorisiert","tag-for-clients","tag-for-colleagues","tag-xliff","tag-xml"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example_xlf-600x400.png","featured_image_src_square":"https:\/\/www.defrent.de\/wp-content\/uploads\/2024\/12\/contents_example_xlf-600x420.png","author_info":{"display_name":"Christopher K\u00f6bel","author_link":"https:\/\/www.defrent.de\/en\/author\/defrenter\/"},"_links":{"self":[{"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/posts\/1881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/comments?post=1881"}],"version-history":[{"count":7,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/posts\/1881\/revisions"}],"predecessor-version":[{"id":1891,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/posts\/1881\/revisions\/1891"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/media\/1884"}],"wp:attachment":[{"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/media?parent=1881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/categories?post=1881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.defrent.de\/en\/wp-json\/wp\/v2\/tags?post=1881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}