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

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

• selector_table_class will change the style of the outer table
• title_row_class will change the style of the title row (exactly td with colspan 2)
• language_row_class will change the style of the language selection pulldown
• correction_row_class will assign CSS class to the bottom row, where the correction checkbox is located.

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:

• dedicated to one customer--LT credentials are set in static configuration
• shared--LT credentials have to be included in each request as Authorization header or in query as parameters 'username' and 'password' (header has higher priority if both are present)

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>

IBM Translation Team