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": {
  }
}