IBM Translation Widget

This page demonstrates IBM Translation Widget--a web application which enables to translate web content into other languages. Choose a language from the Select language pulldown to read a translation of this page.


Quick Start

To add translation to your English web page add to it the following code snippet:

<script id='ibm-transwidget-script-id' type='text/javascript' src='TRANSWIDGET_HOST/tw.js'>
</script>


Transwidget Options

Transwidget behavior and look can be customized by overriding the default configuration through data stored in <script> element used to fetch the tw.js script. The above code snippet is equivalent to specifying all options with their default values. Create customized version by filling the form below

The form below provides a way to preview impact of behavioral options. Just select desired combination, click 'Apply' and then exercise the demo frame (most options manifest themselves after the demo page is translated).

Behavioral options

Generated Code


<script id='ibm-transwidget-script-id' type='text/javascript' src='TRANSWIDGET_HOST/tw.js' data-ibm-tw-opts='{"enable_corrections": false, "enable_hover": false, "monitor_page": false, "remember_language": true, "show_banner": true, "show_disclaimer": true, "show_hover": false, "source_language": "en"}'></script>
<!--Omitting a value is equivalent to setting it to the default value.-->


Advanced

1. Preventing Translation of Selected Area

Transwidget will skip translation of any element (and all its children) which contains the attribute translate=0. Did you notice how the top title IBM Translation Widget never gets translated? That is achieved by adding translate=0 to the <b> tag, like this:

<b translate=0>IBM Translation Widget</b>

This attribute can be added to any tag including <div> such that any text within these tags will not be translated.

2. Language Selector Location

The way the widget draws itself is by calling insertBefore(selector, document.body.childNodes[0]). One can control location of the selection widget by creating a

<div id='ibm-tw-selector-div-id'>

The language selector will be inserted as a child of this div. The id itself can be changed by setting 'selector-div-id' tag in json supplied in 'data-ibm-tw-opts' attribute of the script element used to load tw.js. The default value used if tag is omitted is 'ibm-tw-selector-div-id'.

3. Language Selector Styling

If you would like to change the style of panel, you can assign pre-existing CSS classnames to the 4 different components in the widget. You do this by appending to 'data-ibm-tw-opts' json the classname for each component you want to override.

The language selector has structure <table> <tr> ... title ... <tr> .. <select ... <tr> ... show correction...

The defaults are:
ibm-tw-selector-table-default { float: left; margin: 3px; border: 1px solid #4477bb; padding: 0px; }
ibm-tw-title-row-default { background-repeat: repeat; color: 4675c3; font-family: sans-serif,arial; font-size: 10pt; text-align: center; font-weight: normal; padding: 1px; }
ibm-tw-language-row-default { font-family: verdana; font-size: 8pt; }
ibm-tw-correction-row-default { background-color: 4477bb; color: white; cursor: pointer; font-weight: bold; font-size: 8pt; font-weight: bold; padding: 4px; }
4. Language Translator credentials
Transwidget can be configured in two ways:
5. Retrieving Corrections
TBD

Custom Translate Widget

Custom Translate Widget provides the ability to control the translation of content using attributes "translate" and "lang" in your DOM structure.
“lang” and “translate” attributes should be added to containers where known language elements are inserted on to the page.
“lang” attribute should always set the known/source language of the content on the highest relevant element.
In some cases, elements will be children of otherelements with lang attribute.
“translate” attribute should be set to "yes" or "no" based on if the lang of the source content is the same as preferred/selected language

The example bellow shows how to create a custom translate widget in React.
1. Set in your main index.html in the body element attributes lang and translate <body lang ="en" translate ="yes" > <div id="root"></div> </body>

2. Add in your index.html file the script element like this


<script id='ibm-transwidget-script-id' type='text/javascript' src='https://ibmorg-transwidget.us-east.mybluemix.net/tw_spa.js' data-ibm-tw-opts='{"enable_corrections": false, "enable_hover": false, "monitor_page": false, "remember_language": true, "show_banner": false, "show_hover": false, "source_language": "en"}'></script>


3. Create a new one or use an existing jsx file where you will start the Translate Widget.(Click to see an example)

4. Create a new folder 'tw' in your project and file tw.jsx in this folder.(Click to see an example)

Thank you,

IBM Translation Team