qLabel

qLabel is a JavaScript library that helps you create multilingual websites. qLabel is Open Source and developed on GitHub. qLabel looks up and displays labels for entities marked up in a Website. In the next paragraph, click one of the languages, and you will see the display change accordingly.


English - German - Uzbek - Croatian - Chinese - Korean - Arabic - Japanese - Hindi - Russian


How do I use it?

See the usage guide.

qLabel is really easy to use: you need to load qLabel, a jQuery plug-in, annotate all elements to be translated with their identifier, e.g. from Wikidata, like this:

<span class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q7553">translation</span>

This will give you the following result: translation.

Admitted, this doesn't look too exciting. But click now again on one of the languages provided above. The text here changes, automatically, displaying you the translation in the selected language. This allows to easily create specific types of content. Take a look at the examples below, and especially at the source code of the simple example.

qLabel is available here. A more detailed usage guide is available.

What is annotation?

Annotations are (often invisible) notes about the content of a website.

In our case, we annotate text that mentions something with that thing's unique identifier. This way, when a text mentions Vienna, we know if the text is speaking about Vienna in Austria or Vienna in Virginia, and qLabel will know to display the first one as Wien in German and leave the second as Vienna.

Annotations can be useful well beyond of the service that qLabel offers, e.g. for a better search. You can read more on annotation here.

How does it work?

See the technical description.

qLabel uses the identifier in the annotation in order to find the name of the annotated thing in the requested language and then displays that name.

qLabel does not translate the name from one language to the other. Instead the author of the website explicitly disambiguates what they mean, and qLabel looks up the name of that on the Web. Thus, qLabel is completely different than a service like Google Translate.

qLabel uses web standards in order to figure out the names in the different languages. The technical description offers more details.

Examples

Click on Select language on the top left of the page, then select a language, and see the content of the page change (The language selector widget is Wikimedia's awesome ULS).