Project Status

Use case

A WebComponent to replace alternate version of text for client side internationalization.

Installation

You can install via package manager, simply download the compiled version as zip file here and inject or request via CDN in HTML:

npm install web-component-wrapper

Example

To add two versions of a text string you can simply add your translation directly in markup. See how easy it is:

<p>
    Your englisch version.
    <!--deDE:Ihre deutsche Variante.-->
    <!--frFR:
        Sa version française.
    -->
</p>

Sometimes you need to explicit mark a text node as text to replace with next translation node. In this case you can simply wrap a self defined dom node.

<lang-replace>
    Your englisch version with <strong>dom nodes</strong> inside.
</lang-replace>
<!--deDE:
    Ihre deutsche Variante mit eingebetteten <strong>dom Knoten</strong>.
-->
<!--frFR:Votre version français <strong>dom nodes</strong> à l'intérieur.-->

It is also possible to use an alternative replacement node.

<lang-replace>
    Your englisch version with <strong>dom nodes</strong> inside.
</lang-replace>
<lang-replacement>deDE:
    Ihre deutsche Variante mit eingebetteten <strong>dom Knoten</strong>.
</lang-replacement>
<lang-replacement>frFR:
    Votre version français <strong>dom nodes</strong> à l'intérieur.
</lang-replacement>

Usually the language dom node precedes the text node to translate. It is possible to write a special syntax to use a replacement for the next dom node containing text.

<!--|deDE:Ihre deutsche Variante.--><!--|frFR:Votre version français.-->
<p>Your englisch version.</p>

It's possible to save one translation once if you specify the area with known translations.

<!--The "div.toc" selector defines the default known language area.-->
<div class="toc">
  <ul>
    <li><a href="title-1">title 1</a></li>
      <ul>
        <li><a href="title-2">title 2</a></li>
      </ul>
  </ul>
</div>
<h1 id="title-1">title 1<!--deDE:Titel 1--><!--frFR:titre 1--></h1>
<h2 id="title-2">title 2<!--deDE:Titel 2--><!--frFR:titre 2--></h2>

With the below initialization you can simply add this links everywhere in your page to switch language. On click, you will switch the current language interactively. Try it by yourself:

<a href="#lang-deDE">de</a>
<a href="#lang-enUS">en</a>
<a href="#lang-frFR">fr</a>

Detect example language buttons as well...

document.querySelector('web-internationalization')
    .refreshLanguageButtonDomNodesBinding()

Here you can see a complete initialization example.

import {
    api
} from 'https://unpkg.com/web-internationalization@latest/dist/bundle/index.js'

api.register()