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