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
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).
<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.
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.
The language selector has structure <table> <tr> ... title ... <tr> .. <select ... <tr> ... show correction...
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;
}
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>