About WOVN Library

Using WOVN.io Library

This document gives a general explanation of the WOVN.io Library’s operation.

Benefits of using the WOVN.io Library

WOVN.io provides 2 methods for translation; Via the code snippet or WOVN.io Library.To install via the script method, all you need to do is insert a script into your page’s HTML. However, the script method has a few drawbacks.

<script src="//j.wovn.io/1" data-wovnio="key=2DXsR" async></script>

The page before and after translating have the same URL; to a search engine, this looks like the same page. As the translation is done via JavaScript, a search engine is unable to properly index the page’s contents. To solve this issue, WOVN.io has provided the WOVN.io Library.

How each method works

Via the WOVN.io Script Method:

Via the WOVN.io Library Method:

What Processes WOVN.io Performs

Adding new routes to the application.

The WOVN.io Library adds new routes to the Application for use when translating a page. There are 3 URL Routing types that can be added. This can be changed by the WOVN.io Library’s url_pattern parameter.

The URL of the page before translation:

https://wovn.io/content

If the url_pattern parameter is set to “path”, the translated URL becomes the following. This is the default value for url_pattern.

https://wovn.io/en/content

If the url_pattern parameter is set to “subdomain”, the translated URL becomes the following. The DNS needs to be configured in this case.

https://en.wovn.io/content

If the url_pattern parameter is set to “query”, the translated URL becomes the following. This setting has the least effect on the server’s routing.

https://wovn.io/content?wovn=en

The HTML’s Translation Process.

Here we explain how the WOVN.io Library modifies and translates the HTML.

Rewriting an a tag’s URL

An a tag’s href attribute can be rewritten. There are 3 different URL types that the href can be rewritten into.
Before rewriting:

<a href="https://wovn.io/contact">link</a>

If the WOVN.io Library’s url_pattern parameter is set to “path”, the rewritten URL is:

<a href="https://wovn.io/ja/contact">link</a>

If the WOVN.io Library’s url_pattern parameter is set to “subdomain”, the rewritten URL is:

<a href="https://ja.wovn.io/contact">link</a>

If the WOVN.io Library’s url_pattern parameter is set to “query”, the rewritten URL is:

<a href="https://wovn.io/contact?wovn=ja">link</a>

If the page’s language is the same as the WOVN.io Library’s default_lang parameter, the a tag will not be rewritten.

Rewriting a form tag’s URL

A form tag’s action attribute’s URL can be rewritten. Rewriting is split into 2 scenarios. If the WOVN.io Library url_pattern paramater is set to “query” and the form tag’s method attribute is set to “GET” or is unspecified,

<form action="https://wovn.io/contact">
    ...
</form>

A hidden input is added to the form.

<form action="https://wovn.io/contact">
    <input type="hidden" name="wovn" value="en"/>
    ...
</form>

If the WOVN.io Library’s url_pattern parameter is not set to “query”, or the form tag’s method attribute is not set to “GET”,

<form action="https://wovn.io/contact" method="POST">
    ...
</form>

The form tag’s action attribute can be rewritten. The rewrite pattern will change depending on the url_pattern parameter. The following is an example where url_pattern is set to “path”.

<form action="https://wovn.io/en/contact" method="POST">
    ...
</form>

If the page’s language is the same as the WOVN.io Library’s default_lang parameter, the form tag will not be rewritten.

Adding a Widget

In order for the Widget to be displayed, a script is added to the HTML. The untranslated HTML’s old widget script is removed.

<head>
    ...
    <script src="//j.wovn.io/1" async="true" data-wovnio="key=2DXsR&backend=true&currentLang=en&defaultLang
    =ja &urlPattern=query&version=0.2"></script>
    ...
</head>

The following 2 processes occur on the Widget:

  • The page is translated via JavaScript. Text within JavaScript or Image’s are then replaced.
  • If the page’s content has changed, newly added text and images are reported to WOVN.io’s server.

Adding Language Information

Language information is added to the page to help improve SEO.

Adding a link tag.

In order to identify that a page has a translation, a link tag is added to the HTML.

<head>
    ...
    <link rel="alternate" hreflang="en" href="https://wovn.io/en/">
    ...
</head>

Adding a Lang Attribute to the HTML Tag.

A lang attribute is added to the HTML tag (“ja”, “en”, etc.)

The lang attribute describes the current language being displayed.

<html lang="en">
      ...
</html>

Translation Data Structure

Sample translation data taken from the API.

{
    // the page's texts' translations
      "text_vals": {
        "Orders": { // The original text before translation.
            "ja": [ // The destination language. The text cannot be translated, if this is left empty.
                {
                    "xpath": "/html/body/div/div/ul/li[4]/ul/li[5]/a/text()", // the text element's XPath
                    "data": "オーダー" // the translated text
                }
          ],
         ...
      },
      ...
  },

  // the page's images' translations
  "img_vals": {
      "https://wovn.io/assets/header_logo.png": { // the image's original URL
          "": [ // The destination language. The image cannot be replaced, if this is left empty.
              {
                  "xpath": "/html/body/div/a/img", // the image element's XPath
                  "data": "https://s3-us-west-1.amazonaws.com/st.wovn.io/" // the replacement image's URL
              }
          ]
      },
      ...
  },

  // Unused data. Always an empty object.
  "layout_vals": {
  }
}