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.
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 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.
<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.-->
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.
You can choose an IBM Watson or Weglot provider to translate your site by specifying the provider parameter in data-ibm-tw-opts. "provider": "wg" for Weglot, empty or omitted for IBM Watson.
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'.
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.
selector_table_class will change the style of
the outer tabletitle_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 pulldowncorrection_row_class will assign CSS class to
the bottom row, where the correction checkbox is located.
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;
}