Multilingual interface

Multilingual interface

Abstract

Components for switching a language in a single-page application.

Demo
Mechanism

Demo

In the area below, the language of all labels, tooltips, and texts can be switched:

← Click to show dummy info popup…

Mechanism

Our method replaces text nodes (or the title attribute’s value) inside a parent node by using the HTML data-* attribute data-_.

Mechanism :: HTML tagging

To mark the content of a node, e.g. <span>…text…</span>, as replaceable, we specify a resource id (here: 5), and replace the text node in question with a dummy character (here: ".") to avoid redundancy: <span data-_=5>.</span>

To mark the title (tooltip) text of <button>…</button> as replaceable, we specify a resource id (here: 12) with a leading "t" (for title): <button data-_=t12>…</button>

We could also mark both the text content and the title of <button>…text…</button> as replaceable: <button data-_=13t14>.</button>

Mechanism :: Switch

In the top area of the page, we place a drop-down box with an id (here: 'sL' for 'select Language') to make it accessible for handling its onchange event:

<select id=sL data-_=t4>
  <option value=0 data-_=1>.
  <option value=1 data-_=2>.
  <option value=2 data-_=3>.
</select>

Mechanism :: Language module

Object La encapsulates all relevant components:

s: Switch/select element
d (for 'data'): Array with translations
l (for 'lang'): Current language index
set(): Function for updating all concerned text nodes or title values

La={
  s:$('sL'), // $ = document.getElementById
  d:[…],
  l:0,
  set(){…}
},

Mechanism :: Resource database

Array d contains all recordsets, each of which has in our case 3 entries, one for each language (English, German, and Finnish):

d:[0,
  ['English GB','Englisch GB','Englanti GB'],
  ['German DE','Deutsch DE','Saksa DE'],
  ['Finnish FI','Finnisch FI','Suomi FI'],
  ['Select language','Sprachauswahl','Valitse kieli'],
  …
],

Side note: The entry at index 0 is nullish, because we’re not gonna use a resouce id 0 anyway.

Sometimes, in a case like <div>…text…<br>…text…</div>, it’d be inconvenient to address the 2 text nodes separately as…

<div>
  <span data-_=15>…text…</span><br>
  <span data-_=16>…text…</span>
</div>

… therefor we allow to skip embedded tags by indicating them with '<>' in the recordset:

…
['…text…<>…text…','…text…<>…text…','…text…<>…text…'],
…

Now, HTML can be kept simple: <div data-_=15>…text…<br>…text…</div>

Mechanism :: Updating

Via (La.s.onchange=La.set)() the module’s set-function is called when a user selects another language. An IIFE (immediately invoked function expression) is used to execute an initial update on pageload.

Function set() does basically the following:

Get current language id from switch element by La.l=+La.s.value
Collect all tagged nodes by document.querySelectorAll('*[data-_]')
For each of the nodes in the collection:
- Read resource id info by res_id=node.dataset._
- Get resource string from database by res_str=d[res_id][La.l]
- Update text node by text.data=res_str, or tooltip by node.title=res_str

Left-click / Tap	:	.
Alt + ← ↑ ↓ → Pos1 Pg↑ Pg↓ End	:	.
1 … 9 etc.	:	.
Esc	:	.