HTML Language Translation

I know this may be wishful thinking but is there any way that OSX’s Safari language translation function can be extended into HTML viewer?

Reason: I currently use Help Files generated in Help Crafter, but translating languages is a long and labour intensive process, even when using Google Translate. Especially as users rarely look at the help file. It would be great if Apple could do the translation for me.

Why not embed the google translate javascript API into your pages, Then a user can select a language once, and pages will auto-translate on each load?

I have demo and code if you need it - be back in about 30 minutes (client calling! :-))

That sounds a good idea. Does it require a google account and appropriate charging for translations?

No google account is needed. See attached demo. The subclassed HTMLViewer will load and translate pages as such (see the pushbutton code)

HTMLTranslator1.LoadandTranslatePage(TextArea1.Text, "en", "ja")

//The first parameter is the HTML to be displayed.
//The 2nd is the default initial language (will auto detect if omitted)
//and the 3rd parameter is the target language to translate the HTML to...

TranslatingHTMLViewer

Demo Code:

Let me know if you need any help modifying the code. :slight_smile:

1 Like

Excellent. Much obliged.

1 Like

Is it possible to use an external CSS to format the result as well?

Sure is possible :slight_smile: , try adding a class or some CSS to the example code (screenshot below)

CSS

Yes, that is inline - but it doesn’t seem to work with an external CSS.

Check your CSS embed code - works fine here :slight_smile:

cssnew

**It’s an HTMLViewer, so anything that is possible with it under normal circumstances will still apply always. We’re merely loading the page in a separate method vs calling the native method.

I am using a local html and css. Does it need to be web based for Google to use it?

You say that me.LoadPage(PageContents, nil) is broken in 2021r1+. That’s a little harsh as it continues to work in Mac/Lin. For Windows you have to write the content to a file and load it from there. AIUI, this relates to the change in renderer which gives us the amusingly large .dlls etc for Windows app versions.

Does the JavaScript code fire if you use LoadPage method on Mac or Linux? On Windows it stopped working with 2021 r1+ …I’m using 2021r3.1 for the demo. Curious to track the issue…

Unfortunately native renderer on Windows does not work with modern JavaScript - see attached Webkit & IExporer 11 (the same ‘missing renderer’ from the current release of Xojo) versions of AutoTranslate here. - Both in the current release of Xojo.

@James_Pitchford - looking in the attached demo, the updated HTMLViewer subclass has been updated to demonstrate using local CSS files, in lieu of remote/hosted CSS. :slight_smile: Have a great evening!

Which may be because it’s not rendering in IE11 mode.

See here:

http://documentation.xojo.com/api/deprecated/htmlviewer.html

and read the section on “Windows IE Version”. It took me quite a while to figure out what one had to do and so I submitted those notes for the docs page.

The script seems to work OK for individual page loads, but not if that page then links to another. Is it possible to add the script to HTMLViewer’s.executeJavaScript so that it works on all loaded pages? I can’t seem to get that to work.

PS I note that inclusion of the <div for the google translate button is unnecessary as the subsequent code adds the button itself.

Let me tinker and work on an “injection method” this evening - What will need to happen in this case is, the JavaScript will need to be executed on the page DocumentComplete event, so that it fires and translates a page once loaded…and on each consecutive loading of a page. :slight_smile:

See screenshot - I made sure to subclass the IE11 control directly and set the oleContainer to use most current IE11 rending engine available on a Windows system, in the Windows registry per the app itself (happens on Open event). Unfortunately, IE11 only processes JavaScript ES6 - 2015 or lower - most modern code found is ES6 ECMAScript 2016 or newer (ECMAScript 2018 covering a majority of any new current libraries issued.). So any modern JavaScript will render scripting errors in the IE11 control unfortunately and not execute. I imagine the JavaScripts could be revised to use older syntax or use older libraries if IE11 was still needed.

I’ve tried to tinker too, but my javascript is almost non-existent, so have failed. I’ve tried leaving a div for the google_translate_element in the HTML and then executing the scrip>telements after the DocumentLoaded event - but I don’t seem to able to get the ExecuteJavascript function to work.

My web page includes:
<div id="google_translate_element" style="display:none;"></div>

My script constant looks like this:

<script type="text/javascript">

function myge() {
document.getElementById('google_translate_element')
}

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
  pageLanguage:'en',
  includedLanguages:'$targetLang'
  }, myge());
  setTimeout(function(){
  var select = document.querySelector('select.goog-te-combo');
  select.value    = '$targetLang'; 
    select.dispatchEvent(new Event('change'));         
      },500)
      setTimeout(function(){
      document.querySelector('[id=":1.container"]').remove()
      },500)
      }
      
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">

</script>

and my HTMLViewer.DocumentCompleted event code looks like this:

Dim s As String = kNewScript.ReplaceAll("$targetLang", toLang) 
//where toLang is a string like "de"

HTMLView.ExecuteJavaScript(s)

OK, finally there, ish, though it is a bit clunky as it flashes up the original language before re-presenting the local language.

I embed this in each web page:

<div id="google_translate_element" style="display:none;" hidden></div>

<script type="text/javascript">

function googleTranslateElementInit() {
  var lang = executeInXojoSync("getLanguage") ;
  new google.translate.TranslateElement({
  pageLanguage: 'en',
  includedLanguages:lang
  }, 'google_translate_element');
  setTimeout(function(){
  var select = document.querySelector('select.goog-te-combo');
  select.value    = lang; 
    select.dispatchEvent(new Event('change'));         
      },1000)
      setTimeout(function(){
      document.querySelector('[id=":1.container"]').remove()
      },2000)
      }
      </script>
      
      <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

This in the HTMLViewer.javaScriptRequestMethod

Select Case method
Case "getLanguage"
  Return puLang.SelectedRowValue
Else
End Select

And this in the popup.changed - as example to change language:

Dim s As String = "window.location.reload()"
HTMLView.ExecuteJavaScript(s)

Now the online documentation can be translated into the app’s language and I only have to create an English original.