Using LangTag you can have a quick, simple, elegant multilingual localization for a website you are designing. This will allow you to set a lang attribute in any HTML element in the page, like this:

<p lang="it">Nel mezzo del cammin di nostra vita, mi ritrovai per una selva oscura.</p>

Such elements will be displayed only when the corresponding language is picked. Languages can be picked via any clickable element belonging to the lang-pick class and marked with a data-lang attribute, like this:

<input type="button" class="lang-pick" data-lang="fr" value="Français">

When the language is changed, a "curtain" will fade in and cover the page for a very short time, then it will fade out and the same page with the new localization will appear. The curtain's color can be easily set in the HTML (I recommend white or gray), or the whole thing can be removed altogether. Its purpose is to prevent the user from noticing an annoying flickering effect while the webpage is being rendered anew with the new localization. For the same reason, the webpage starts with curtain down.

There is also a "negative-localization" tagging system. If you wish something to be displayed always except when the language is, e.g., English, you can do like this (notice the dash before the language code):

<p lang="-en">(An English version of this page is available by clicking on the Union Jack icon.)</p>

The code is self-explanatory. This project consists of:

• an example webpage called index.html
• a langtag subdirectory containing a CSS called langtag_none.css and a few example CSSs called langtag_en.css, langtag_it.css etc.

The webpage is heavily commented to make the workings of LangTag easier to understand. The webpage statically loads langtag_none.css and dynamically loads one of the language-specific CSSs via some JavaScript placed at the end of the page. Such JavaScript can also be put in an external .js file and loaded via a script tag as usual, it was embedded in the HTML just to have everything but the CSSs in one place.

langtag_none.css should not be modified, it manages the curtain and the hiding of alternate localizations.

For each language used in the website, a langtag_*.css file must be created in the langtag subdirectory (e.g., if you create a Russian localization, you have to create a langtag_ru.css file). It should have the same content as the language-specific CSSs you can already find in the example, just replace the language code in the CSS selectors with the new language code (e.g. "ru"). If you wish to add custom behavior to the localized elements (e.g. all text in Gaelic should be displayed in green, buttons in Latin should be larger etc.), this is where you can do it.

LangTag is based on jQuery.

Please link this page every time you use the LangTag solution in a project of yours, so that other developers might come here, understand how it works, use it themselves and perhaps improve it. Thank you.