rosetta

latest release

warning

An alternative to Google Translate’s Website Translator widget that can work with any HTTP backend.

Demo

Here are some example pages:

Premise

On December 4, 2019 Google discontinued its popular Google Translate Widget. The widget can no longer be added to new sites. It is currently still available for websites that already have it installed.

screenshot

Technically, their widget stills works if you have the code for it, but there’s no telling when it will stop working. As of June 23, 2021, their embeddable snippet is still working, even though the widget was discontinued in 2019.

History

Goal

The goal of this project is to revive the simple “plug and play” usage of the legacy Google Translate Widget, but to make its functionality future-proof and transferable to other translation API providers.

Features

Limitations

Back-end not included

The code available in this widget details the UI portion of the widget. However, a separate API server must be implemented and maintained by those who wish to utilitze this widget.

Translation APIs aren’t free, but a sample API server is available for prototyping. I make no guarantees that this API server will remain active. Don’t rely on this API server in production.

Sample API server:

The schema/model that a separate API server must implement is detailed below.

Browser support

Only ES6 (ECMAScript 2015) is supported. This is because esbuild support for ES5 is only partial. To see which browsers this affects, see caniuse.com/es6. In our TypeScript codebase, we utilize core-js and whatwg-fetch to polyfill newer JavaScript features to older browsers. However, not all of the other features we take advantage of are IE11 compatible. sessionStorage and MutationObserver are IE11 compatible, but IntersectionObserver is not. There is nothing we can do about this.

Usage

Front-end

For a complete list of options and what they do, see options.ts. Their default values can be seen as they are initialized in widget.tsx.

  <!-- Whereever you want the widget to appear -->
  <div id="translate_widget_element"></div>

  <!-- ... -->

  <!-- Somewhere in your <body> -->
  <script type="text/javascript">
    function widgetTranslateElementInit() {
      au5ton.translateWidget({
        pageLanguage: 'en',
        chunkSize: 10,
        // For Microsoft Translator API
        // attributionImageUrl: 'https://cdn.jsdelivr.net/gh/au5ton/rosetta@0.5.1/dist/msft-translator.svg',
        // For Google Cloud Translation API
        attributionImageUrl: 'https://cdn.jsdelivr.net/gh/au5ton/rosetta@0.5.1/dist/google-translate.svg',
        // To include a custom logo in the banner
        // logoImageUrl: 'https://via.placeholder.com/120x20',
        preferredSupportedLanguages: ['en', 'es', 'zh', 'de', 'fr'], // or [] to include everything
        // List of CSS classes to ignore when translating
        // Example: Ignore Google Place Autocomplete popovers
        // ignoreClasses: ['pac-container', 'pac-logo'],
        endpoints: {
          supportedLanguages: 'https://rosetta-demo-server.vercel.app/api/v3/supportedLanguages',
          translate: 'https://rosetta-demo-server.vercel.app/api/v3/translate'
        }
      }, 'translate_widget_element');
    }
  </script>
  <script src="https://cdn.jsdelivr.net/gh/au5ton/rosetta@0.5.1/dist/index.js" onload="widgetTranslateElementInit()"></script>

Back-end

Your own back-end server that implements 2 endpoints with the format detailed in openapi.yaml using the OpenAPI 3.0 spec.

To preview this OpenAPI 3.0 spec, open petstore.swagger.io. At the top right, enter the following URL and press “Explore”:

It should look like this:

swagger ui