CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta name='viewport' content='initial-scale=1,width=device-width' /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Alchemy Software Development | Translating XML & HTML</title> <meta name="description" content="Read about Alchemy CATALYST support for translating XML, HTML and other markup languages"> <meta name="robots" content="INDEX, FOLLOW, NOODP"> <script type="text/javascript" src="/scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/scripts/jquery-ui-1.9.2.custom.min.js"></script>  <script type="text/javascript" src="/scripts/main.js"></script> <script type="text/javascript" src="/scripts/css3-mediaqueries.js"></script> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-24348633-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="page"> <div id="pre-header"><a href="/index.html"><img src="/images/logo_alchemy_light_50.png" alt="Alchemy Software Development homepage" name="logo" id="logo"></a><div id="secondary-links-container"><ul id="secondary-links"><li><a class="pre-nav-link" href="/estore/order.html">buy</a></li><li><a class="pre-nav-link" href="/downloads/downloads.html">downloads</a></li><li><a class="pre-nav-link " href="/support/support_center.jsp">support</a></li><li><a class="pre-nav-link" href="/company/contacts.html">contacts</a></li></ul></div><div id="menu-icon"><a href="#" class="image-effect small-nav-link"><span>menu</span><img src="/images/threelines.png" alt="Menu icon"/></a></div></div>  <script> /*$(document).ready(function () { $('#win-width').html('w: ' + $(window).width().toString()); $(window).resize(function() { $('#win-width').html('w: ' + $(window).width().toString()); }); });*/ </script> <div id="header"><img class="header-pic-solutions" src="/images/solutions2.jpg" /> <div id="section-name-solutions">XML & HTML</div> <div id="block-header1"><div class="block-header-content" id="block1"></div></div> <div id="block-header4"><div class="block-header-content" id="block4"></div></div> <div id="block-header2"><div class="block-header-content2 block2-font" id="block2"><ul id="primary-links"><li style="list-style:none"><a class="main-link nav-link nav-main-link-default" href="#" id="products-link" >catalyst</a></li><li style="list-style:none"><a class="main-link nav-link nav-main-link-default" id="solutions-link" href="#" >solutions</a></li><li style="list-style:none"><a class="main-link nav-link nav-main-link-default" id="resources-link" href="#" >resources</a></li><l style="list-style:none"i><a class="main-link nav-link nav-main-link-default" id="support-link" href="#" >support</a></li><li style="list-style:none"><a class="main-link nav-link nav-main-link-default" href="#" id="about-link">company</a></li></ul> </div></div> <div id="block-header3"><div class="block-header-content" id="block3"><div id="nav-about" class="nav-content nav-content-font" ><ul id="nav-about-links"><li><a class="nav-link" href="/company/about_us.html">Company Information</a></li><li><a class="nav-link" href="/company/our_network.html">Our Network</a></li><li><a class="nav-link" href="/company/events.html">Events</a></li><li><a class="nav-link" href="/company/careers.html">Careers</a></li><li><a class="nav-link" href="/company/contacts.html">Contacts</a></li></ul></div><div id="nav-products" class="nav-content nav-content-font" ><ul id="nav-products-links"><li><a class="nav-link" href="/products/alchemy_catalyst.html">CATALYST 2023</a></li><li><a class="nav-link" href="/products/network_license.html">Desktop/Network Licenses</a></li><li><a class="nav-link" href="/downloads/downloads.html">Downloads</a></li><li><a class="nav-link" href="/estore/order.html">Store</a></li></ul> </div> <div id="nav-solutions" class="nav-content nav-content-font" ><ul id="nav-solutions-links"><li><a class="nav-link" href="/solutions/software_applications.html">Software Applications</a></li><li><a class="nav-link" href="/solutions/html_xml.html">XML & HTML</a></li><li><a class="nav-link" href="/solutions/mobile_devices.html">Mobile Devices</a></li><li><a class="nav-link" href="/solutions/help_content.html">Help Content</a></li></ul></div> <div id="nav-resources" class="nav-content nav-content-font" ><ul id="nav-resources-links"><li><a class="nav-link" href="/resources/catalyst_primer.html">CATALYST Introduction</a></li><li><a class="nav-link" href="/resources/resources.html">Resources</a></li><li><a class="nav-link" href="/resources/tutorials.html">Video Tutorials</a></li><li><a class="nav-link" href="/resources/knowledgebase.html">Knowledge Base</a></li><li><a class="nav-link" href="/coffee/index.html">Coffee Break videos</a></li></ul></div> <div id="nav-support" class="nav-content nav-content-font" ><ul id="nav-support-links"><li><a class="nav-link" href="/support/support_center.jsp">Support Center</a></li><li><a class="nav-link" href="/support/support_evaluation.html">Product Evaluation</a></li><li><a class="nav-link" href="/support/support_services.html">Support Services</a></li><li><a class="nav-link" href="/downloads/downloads.html">Downloads</a></li></ul></div> </div></div>  <div id="small-nav-container"> <a href="/index.html"><img src="/images/logo_alchemy_icon.png" id="small-nav-icon" alt="Alchemy Software Development homepage" /></a><a href="#" class="small-nav-link"><img src="/images/threelines_white.png" alt="Menu icon" id="small-nav-nav" /></a> <div id="small-nav"> <p class="small-nav-section">catalyst</p> <ul> <li><a href="/products/alchemy_catalyst.html">CATALYST 2023</a></li>  <li><a href="/products/network_license.html">Desktop/Network Licenses</a></li> <li><a href="/downloads/downloads.html">Downloads</a></li> <li><a href="/estore/order.html">Store</a></li> </ul> <p class="small-nav-section">solutions</p> <ul> <li><a href="/solutions/software_applications.html">Software Applications</a></li> <li><a href="/solutions/html_xml.html">XML & HTML</a></li> <li><a href="/solutions/mobile_devices.html">Mobile Devices</a></li> <li><a href="/solutions/help_content.html">Help Content</a></li>   </ul> <p class="small-nav-section">resources</p> <ul> <li><a href="/resources/catalyst_primer.html">CATALYST Introduction</a></li> <li><a href="/resources/resources.html">Resources</a></li> <li><a href="/resources/tutorials.html">Video Tutorials</a></li> <li><a href="/resources/knowledgebase.html">Knowledge Base</a></li> <li><a href="/coffee/index.html">Coffee Break videos</a></li> </ul> <p class="small-nav-section">support</p> <ul> <li><a href="/support/support_center.jsp">Support Center</a></li> <li><a href="/support/support_evaluation.html">Product Evaluation</a></li> <li><a href="/support/support_services.html">Support Services</a></li> <li><a href="/downloads/downloads.html">Downloads</a></li> </ul> <p class="small-nav-section">company</p> <ul> <li><a href="/company/about_us.html">Company Information</a></li> <li><a href="/company/our_network.html">Our Network</a></li>  <li><a href="/company/events.html">Events</a></li> <li><a href="/company/careers.html">Careers</a></li> <li><a href="/company/contacts.html">Contacts</a></li> </ul> </div> </div> </div> <div id="current-locatio-bar"><a href="/index.html">Home</a>  >  Solutions  >  XML & HTML</div> <div id="main-content" > <div id="main-content-common-wrapper" class="box-padding"> <h3>Translating XML & HTML content</h3> <p>As types of mark-up language, XML and HTML are text files containing a mixture of content and information about the content (annotations or mark-up). HTML will typically be viewed in a browser and so has a mixture of text and formatting information to best present that text. XML is intended as a storage format or as a transfer format for data, and is made up of logical units of information.</p> <p>Both formats are used extensively and need careful translation to ensure the translated versions still behave as intended.</p> <h4>Mark-up</h4> <p>XML and HTML are similar from a translation point of view in that they both have mark-up (whose special syntax must be protected) and text, some of which needs to be translated. Consider the following html example. <table id="xml-t1"> <tr> <td class="tbl-head">Syntax</td> <td class="tbl-syntax"><span class="red"><td></span>The quick brown <span class="red"><i></span>fox<span class="red"></i></span> jumps over the lazy <span class="red"><i></span>dog<span class="red"></i></span>.<span class="red"></td></span></td> </tr> <tr> <td class="tbl-head">Browser View</td> <td class="tbl-table"><table><tr><td>The quick brown <i>fox</i> jumps over the lazy <i>dog</i>.</td></tr></table></td> </tr> </table> The red characters in the syntax are mark-up information, while the black characters represent the text for translation. When displayed in a browser, the <td></td> markup indicates that this is table data and will appear in a cell, while the names of the animals will appear in italics, indicated by the <i></i> syntax.</p> <h4>Inline Tags</h4> <p>The <td></td> syntax is less important for the translation because these markers sit at either end of the sentence; surrounding but not affecting the text. The <i></i> construct however, is referred to as a tag and in this case it is considered 'inline' because it appears within the body of a sentence. <table id="xml-t2"> <tr> <td class="tbl-head">Syntax</td> <td class="tbl-syntax"><span class="red"><td></span>Le <span class="red"><i></span>renard<span class="red"></i></span> brun rapide saute par dessus le <span class="red"><i></span>chien<span class="red"></i></span> paresseux.<span class="red"></td></span></td> </tr> <tr> <td class="tbl-head">Browser View</td> <td class="tbl-table"><table><tr><td>Le <i>renard</i> brun rapide saute par dessus le <i>chien</i> paresseux.</td></tr></table></td> </tr> </table> Inline tags must be carefully managed during the translation process as the translations of those high-lighted words (fox and dog) should also appear in italics in the translation. Thus the <i></i> syntax should be maintained by the linguist. For example in French this would translate to</p> <h4>The difference between XML and HTML</h4> <p>HTML syntax is predefined. It is a known language for presenting data in a browser. The meaning of all elements and attributes is understood by both developers and browsers. If a developer wants a word to appear in italics, they would surround that word with an <i> </i> pair. If they want it to appear as bold, they would surround it with a <b> </b> pair.</p> <p>This is not the case with XML. The browsers do not attribute meaning to the content in xml. Information is stored in xml as logical, self-explanatory units of data. It is not intended for display in a browser, so the markup does not define how text appears in a browser. Considering the following example, it seems to represent a person called A. Diamond who was born on the 6th Nov. 2000. </p> <p class="format-xml"> <person><br /> <span><name>A Diamond</name></span><br /> <span><date-of-birth>6th November 2000</ date-of-birth ></span><br /> </person> </p> <p>It was clear how to translate the html example earlier once we understood the meaning of <td> and <i>. The same is true here, if we understand what <person>, <name>, and <date-of-birth> are, then we can proceed.</p> <p>Because XML is not a predefined format, a rule is needed to instruct Catalyst how to handle the different elements. Without instruction, the following translations would be likely</p> <table id="xml-t3"> <thead> <tr> <td>Source</td> <td>Target</td> </tr> </thead> <tbody> <tr> <td>A Diamond</td> <td>Un Diamant</td> </tr> <tr> <td>6th November 2000</td> <td>6th Novembre 2000</td> </tr> </tbody> </table> <p>Of course, that is not what should happen. Instead, we need to indicate that the <name> element should be displayed for reference only. It should be protected, or locked somehow. In Catalyst, this is done using the <strong>ezParse feature</strong>. The user sees a flat structural representation of the document and can mark when pieces should be displayed, locked, treated as inline, etc. </p> <p>A rule is created once and all xml documents following that format can be translated using that rule.</p> <br /><br /> <h3>Alchemy CATALYST</h3> <h4>HTML</h4><img src="/images/solutions/raw_html.png" alt="Raw html view" id="xml-p1" /> <p>HTML syntax is predefined and understood by CATALYST, so no special handling needed. HTML is a native format in Catalyst. Like a browser understands what pieces to format and how, Catalyst understands what pieces of text to translate and what not to. The following html is displayed in CATALYST below. It is evident that editing the html code would be a very error prone task, while editing in CATALYST offers a secure translation environment.</p> <img src="/images/solutions/nativehtml.png" alt="CATALYST Html split view" id="xml-p2"/> <h4>Customisable XML</h4> <p>From a translation point of view XML is different from HTML in that the syntax is not predefined. Each different type of xml needs a different rule. Depending on how a developer stores data, different units within the XML should be exposed for translation. The ezParse feature of CATALYST is used to <strong>create rules and define which pieces should be localized</strong>. </p> <img src="/images/solutions/parsingxml.png" alt="CATALYST XML parser settings" id="xml-p3" /> <h4>Inline Tags</h4> <p>We have seen already how inline tags are defined in code, how they are parsed and then displayed in Catalyst. The power of this solution comes from how simple it is to parse files but also in the security during editing of syntax as well as inline tag management.</p> <p>Linguists translate the text segments with full access to translation memory, terminology, machine translation and validation features as well as full tag management capabilities.</p><img src="/images/solutions/translatortoolbar.png" alt="CATALYST Translator Toolbar" id="xml-p4" /> <p>If tags are inadvertently removed or incorrectly edited, automatic validation indicates that to the user so the problem can be instantly corrected. Prevention is better than cure and while the <strong>Validation Expert</strong> is designed to identify problems after the fact, the <strong>Automatic Validation</strong> feature prevents errors being entered in the first place and saves time and money in the process. </p> <h4>Encodings & Entities</h4> <p>There are many ways to create the text files that make up XML and HTML files. Though there are many, popular encodings are utf-8 and utf-16. Other aspects that need special handling in a localization application are how special characters such as &copy, ® & ™ are coded. These are known as entities and like inline tags need special handling. CATALYST ensures all of these more advanced topics are covered. The user need simply insert the file and translate - Catalyst looks after the separation of text and syntax.</p> <h4>Conclusion</h4> <p>Alchemy CATALYST provides a unified process for all file formats to be localized. Be they executable files, text files, source code, .net binaries, etc. or XML/HTML, a full feature set is provided to cater for all phases of the localization process. CATALYST support for XML & HTML is second to none in the industry and is a must in your arsenal if you deal with these file formats.</p> </div> </div> <div id="footer"><script> var thisHost = window.location.host; </script> <div id="footer-wrapper"> <div id="footer-social"><a href="https://www.youtube.com/user/AlchemySoftware" target="win-youtube"><img id="footer-yt" src="/images/yt-brand-standard-logo-95x40.png" title="Alchemy Software Development's YouTube Channel" alt="Alchemy Software Developmet YouTube Channel" /></a><a href="https://www.linkedin.com/groups?gid=1579497" target="win-youtube"><img id="footer-linkedin" src="/images/linkedin_logo60px.png" title="Join us on LinkedIn" alt="Alchemy Software Developmet LinkedIn" /></a></div> <div id="footer-content"> <div class="footer-section"> <span class="footer-section-header">CATALYST</span> <a href="/software_localization_tools/alchemy_catalyst.html">CATALYST 2023</a>   <a href="/products/network_license.html">Desktop/Network Licenses</a> <a href="/downloads/downloads.html">Downloads</a> <a href="/estore/order.html">Store</a></div> <div class="footer-section"> <span class="footer-section-header">SOLUTIONS</span> <a href="/solutions/software_applications.html">Software Applications</a> <a href="/solutions/html_xml.html">XML & HTML</a> <a href="/solutions/mobile_devices.html">Mobile Devices</a> <a href="/solutions/help_content.html">Help Content</a>  </div> <div class="footer-section"> <span class="footer-section-header">RESOURCES</span> <a href="/resources/catalyst_primer.html">CATALYST Introduction</a> <a href="/resources/resources.html">Resources</a> <a href="/resources/tutorials.html">Video Tutorials</a> <a href="/resources/knowledgebase.html">Knowledge Base</a> <a href="/coffee/index.html">Coffee Break videos</a></div> <div class="footer-section"> <span class="footer-section-header">SUPPORT</span> <a href="/support/support_center.jsp" >Support Center</a> <a href="/support/support_evaluation.html">Product Evaluation</a> <a href="/support/support_services.html">Support Services</a> <a href="/downloads/downloads.html">Downloads</a></div> <div class="footer-section"> <span class="footer-section-header">COMPANY</span> <a href="/company/about_us.html">Company Information</a> <a href="/company/our_network.html">Our Network</a>  <a href="/company/events.html">Events</a> <a href="/company/careers.html">Careers</a> <a href="/company/contacts.html">Contacts</a></div> </div> <div id="footer-logo"><a href="/"><img src="/images/logo_alchemy_icon.png" alt="Alchemy Software Development homepage"/></a><span>Copyright © <span id="year"></span> Alchemy Software Development Ltd.</span> - <a href="/company/privacy.html">PRIVACY</a> - <a href="/company/sitemap.html">Sitemap</a></div> </div> <script> $(document).ready(initNavigationLinks); $(document).ready(initSupportLinks); document.getElementById("year").innerHTML = new Date().getFullYear(); </script></div> </div> <script>$("#solutions-link").addClass('nav-link-section-selected');</script> </body> </html>