Glocalization

Méthode frugale d'internationalisation de sites Internet

Glocalization

Simple is clever.

 

 

Glocalization est une solution simple et universelle pour afficher un site Internet en plusieurs langues.

 

Glocalization

  • Requires the jQuery library
  • Requires only basic knowledge of Html.
  • Works with any Cms.
  • Has a WordPress plugin.
  • Can works locally.
  • Support languages ​​written in right to left.
  • Is quick to load. The minified script weighs only 2867 bytes. The text of the translations is not expensive in terms of bandwidth.
  • Avoid the headache of maintaining a separate page for each language.
  • Is valid Html5.
  • Has a JavaScript code validated by JSHint.
  • Is abbreviated to the numeronyms G11n, where 11 stands for the number of letters between the first g and last n in Glocalisation.

Rather than a long theoretical development, we offer several examples discussed. You can also view the source code of this page.

Glocalization

  • Nécessite la librairie jQuery.
  • Requiert uniquement des notions de Html.
  • Fonctionne avec n’importe quel Sgc.
  • Possède un plugiciel pour WordPress.
  • Peut fonctionner en local.
  • Supporte les langues qui s’écrivent de droite à gauche.
  • Est rapide à charger. Le script compressé ne pèse que 2867 octets. Le texte des traductions n'est pas coûteux en terme de bande passante.
  • Évite le casse-tête de la maintenance d’une page différente pour chaque langue.
  • Est valide Html 5.
  • A un code JavaScript validé par JSHint.
  • Est abrégé en G11n, car onze lettres séparent le g du n dans Glocalization.

Plutôt qu’un long développement théorique, nous vous proposons plusieurs exemples commentés. Vous pouvez aussi analyser le code-source de cette page.

 

 

Exemples avec Hello World!

<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
	</head>
	<body>
		<div id="hello">
			<p class="g11n-lang-fr g11n-content g11n-hidden">Bonjour tout le monde !</p>
			<p class="g11n-lang-fallback g11n-content g11n-show">Hello world!</p>
		</div>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
		<!-- Block method (for long texts)-->
	</head>
	<body>
		<div id="hello">
			<p class="g11n-lang-fr g11n-content g11n-hidden">Bonjour tout le monde !</p>
			<p class="g11n-lang-fallback g11n-content g11n-show">Hello world!</p>
		</div>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title> 
		<!-- Méthode par bloc (pour les textes longs) -->
	</head>
	<body>
		<div id="hello">
			<p class="g11n-lang-fr g11n-content g11n-hidden">Bonjour tout le monde !</p>
			<p class="g11n-lang-fallback g11n-content g11n-show">Hello world!</p>
		</div>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
	</body>
</html>

Try it yourself

Essayer

<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
	</head>
	<body>
		<p id="hello" class="translate-g11n" data-g11n-fr="Bonjour tout le monde !">Hello world!</p>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
		<!-- In-line method (for short texts) -->
	</head>
	<body>
		<p id="hello" class="translate-g11n" data-g11n-fr="Bonjour tout le monde !">Hello world!</p>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
		<!-- Méthode en ligne (pour les textes courts) -->
	</head>
	<body>
		<p id="hello" class="translate-g11n" data-g11n-fr="Bonjour tout le monde !">Hello world!</p>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
	</body>
</html>

Try it yourself

Essayer

Exemple avec des blocs

<!DOCTYPE html>
<html>
	<head>
		 <title>Exemple</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>	
			<div id="days">
				<p class="g11n-lang-es g11n-content g11n-hidden">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
			</div>
			<div id="months">
				<p class="g11n-lang-fr g11n-content g11n-hidden">janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">January, February, March, April, May, June, July, August, September, October, November, December</p>
			</div>
			<p id="enumeration"><span class="g11n-lang-fr g11n-content g11n-hidden">un, deux, trois</span><span class="g11n-lang-fallback g11n-content g11n-show">One, two, three</span></p>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		 <title>Exemple</title>
		 <style>
			/* These two rules of style are required. They must be integrated into your project. */
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<!-- The script detects the language of the browser to load the page and show the translation without user intervention. -->			
			<div id="days">
			<!-- An "id" parent is required by "information unit". -->
				<p class="g11n-lang-es g11n-content g11n-hidden">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
				<!-- "es", "fr" corresponds to the target languages. The code of a target language must correspond to ISO 639-1, http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes. "fallback" is the default language: it appears if the content of the target language is not available. -->
				<!-- Each "id" (parent) must include one and only one child element with class "g11n-lang-fallback g11n-content g11n show." Other childs must have the classes "g11n + g11n-content-language g11n-hidden." -->
			</div>
			<div id="months">
				<!-- Here, a Spanish-speaker will see the names of the days in Spanish but the names of the months in English. -->
				<p class="g11n-lang-fr g11n-content g11n-hidden">janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">January, February, March, April, May, June, July, August, September, October, November, December</p>
			</div>
			<p id="enumeration"><span class="g11n-lang-fr g11n-content g11n-hidden">un, deux, trois</span><span class="g11n-lang-fallback g11n-content g11n-show">One, two, three</span></p>
			<!-- Any parent and child tags can be used. -->
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		 <title>Exemple</title>
		 <style>
			/* Ces deux règles de style sont indispensables. Elles doivent être intégrées à votre projet. */
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<!-- Le script détecte la langue du navigateur au chargement de la page et affiche la traduction correspondante sans intervention de l'utilisateur. -->			
			<div id="days">
			<!-- Une "id" parente est nécessaire par "unité d'information". -->
				<p class="g11n-lang-es g11n-content g11n-hidden">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
				<!-- "es", "fr" correspond aux langues cibles. Le code d'une langue cible doit correspondre à la norme Iso 639-1, http://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1. "fallback" correspond à la langue par défaut : elle s'affiche si le contenu de la langue cible n'est pas disponible. -->
				<!-- Chaque "id" (parent) doit comprendre un et un seul élément enfant avec les classes "g11n-lang-fallback g11n-content g11n-show". Les autres enfants doivent posséder les classes "g11n-+langue g11n-content g11n-hidden." -->
			</div>
			<div id="months">
				<!-- Ici, un hispanophone verra les noms des jours en espagnol mais les noms des mois en anglais. -->
				<p class="g11n-lang-fr g11n-content g11n-hidden">janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">January, February, March, April, May, June, July, August, September, October, November, December</p>
			</div>
			<p id="enumeration"><span class="g11n-lang-fr g11n-content g11n-hidden">un, deux, trois</span><span class="g11n-lang-fallback g11n-content g11n-show">One, two, three</span></p> 
			<!-- N'importe quelles balises parente et enfants peuvent être utilisées. -->
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>

Try it yourself

Essayer

Exemple des boutons de prise en charge de la langue

<!DOCTYPE html>
<html lang="en">
	<head>
		 <title>Exemple</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<div id="human-rights">
				<p class="g11n-lang-ar g11n-content g11n-hidden">لما كان الاعتراف بالكرامة المتأصلة في جميع أعضاء الأسرة البشرية وبحقوقهم المتساوية الثابتة هو أساس الحرية والعدل والسلام في العالم.</p>
				<p class="g11n-lang-es g11n-content g11n-hidden">Todos los seres humanos nacen libres e iguales en dignidad y derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité.</p>
				<p class="g11n-lang-ru g11n-content g11n-hidden">Все люди рождаются свободными и равными в своем достоинстве и правах. Они наделены разумом и совестью и должны поступать в отношении друг друга в духе братства.</p>
				<p class="g11n-lang-zh g11n-content g11n-hidden">人 人 生 而 自 由, 在 尊 严 和 权 利 上 一 律 平 等。 他 们 赋 有 理 性 和 良 心, 并 应 以 兄 弟 关 系 的 精 神 相 对 待。</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p>
			</div>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<!-- The document must be encoded in UTF-8 with BOM Unicode. -->
<html lang="en">
<!-- The "lang" attribute is updated when the script is loading the page or when user click. -->
	<head>
		 <title>Exemple</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<!-- When JavaScript is disabled, this message appears. -->
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			/* "language" class associated with language identifier ("ar", "sv"...) is required. It must be integrated into your language selector. */
			<!-- The user can specify the language to be displayed, if the language detection by browser does not suit him. -->
			<!-- If a translation is not available for selected language, the default text will be displayed. -->
			<!-- If you are a Bootstrap user, you can use "bootstrap-framework" class with "language" class, i.e. <button id="zh" class="language bootstrap-framework">ZH</button>. Colors buttons are then supported. -->
			<!-- When a button is selected, it is disabled to be more readable. -->
			<!-- The language buttons do not appear if JavaScript is disabled. -->
			<!-- Do not use flags to symbolize a language: http://www.w3.org/TR/i18n-html-tech-lang/#ri20040808.173208643. -->
			<div id="human-rights">
				<p class="g11n-lang-ar g11n-content g11n-hidden">لما كان الاعتراف بالكرامة المتأصلة في جميع أعضاء الأسرة البشرية وبحقوقهم المتساوية الثابتة هو أساس الحرية والعدل والسلام في العالم.</p>
				<p class="g11n-lang-es g11n-content g11n-hidden">Todos los seres humanos nacen libres e iguales en dignidad y derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité.</p>
				<p class="g11n-lang-ru g11n-content g11n-hidden">Все люди рождаются свободными и равными в своем достоинстве и правах. Они наделены разумом и совестью и должны поступать в отношении друг друга в духе братства.</p>
				<p class="g11n-lang-zh g11n-content g11n-hidden">人 人 生 而 自 由, 在 尊 严 和 权 利 上 一 律 平 等。 他 们 赋 有 理 性 和 良 心, 并 应 以 兄 弟 关 系 的 精 神 相 对 待。</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p>
				<!-- The script supports languages ​​written from right to left: Arabic, Hebrew, Pashto, Urdu. -->
			</div>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<!-- Le document doit être encodé en utf-8 avec le Bom Unicode. -->
<html lang="en">
<!-- L'attribut "lang" est mis à jour par le script lors du chargement de la page ou du clic de l'utilisateur. -->
	<head>
		 <title>Exemple</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<!-- Quand JavaScript est désactivé, ce message s'affiche. -->
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			/* La classe "language" associée à l'identifiant de la langue ("ar", "sv"...) est indispensable. Elle doit être intégrée à votre sélecteur de langue. */
			<!-- L'utilisateur peut préciser la langue à afficher, si la détection de la langue par le navigateur ne lui convient pas. -->
			<!-- Si la traduction n'est pas disponible pour une langue choisie, les textes par défaut s'affichent. -->
			<!-- Si vous utilisez Bootstrap, la classe "bootstrap-framework" peut être ajoutée à la classe "language". Par exemple, <button id="zh" class="language bootstrap-framework">ZH</button>. Dans ce cas, la colorisation des boutons est prise en charge. -->
			<!-- Quand un bouton est sélectionné, il est désactivé pour être plus lisible. -->
			<!-- Les boutons de langue n'apparaissent pas si JavaScript est désactivé. -->
			<!-- Le W3c déconseille l'emploi des drapeaux pour symboliser une langue : http://www.w3.org/TR/i18n-html-tech-lang/#ri20040808.173208643. -->
			<div id="human-rights">
				<p class="g11n-lang-ar g11n-content g11n-hidden">لما كان الاعتراف بالكرامة المتأصلة في جميع أعضاء الأسرة البشرية وبحقوقهم المتساوية الثابتة هو أساس الحرية والعدل والسلام في العالم.</p>
				<p class="g11n-lang-es g11n-content g11n-hidden">Todos los seres humanos nacen libres e iguales en dignidad y derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité.</p>
				<p class="g11n-lang-ru g11n-content g11n-hidden">Все люди рождаются свободными и равными в своем достоинстве и правах. Они наделены разумом и совестью и должны поступать в отношении друг друга в духе братства.</p>
				<p class="g11n-lang-zh g11n-content g11n-hidden">人 人 生 而 自 由, 在 尊 严 和 权 利 上 一 律 平 等。 他 们 赋 有 理 性 和 良 心, 并 应 以 兄 弟 关 系 的 精 神 相 对 待。</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p>
				<!-- Le script prend en charge les langues qui s'écrivent de droite à gauche : arabe, hébreu, pachtoun, ourdou. -->
			</div>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>

Try it yourself

Essayer

Example avec traduction du titre de la page

<!DOCTYPE html>
<html lang="en">
	<head>
		<title id="title" class="translate-g11n" data-g11n-fr="Exemple">Example</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<div id="days">
				<p class="g11n-lang-es g11n-content g11n-hidden">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
			</div>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html lang="en">
	<head>
		 <title id="title" class="translate-g11n" data-g11n-fr="Exemple">Example</title>
		 <!-- The title page can not be internationalized with the block method. -->
		 <!-- The title of the page can be translated. This solution is valid in HTML5. -->
		 <!-- Here we use the custom data-attribute "data-g11n-fr" in conjunction with a specific id and "translate-g11n" class. No parent element is required. -->
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<div id="days">
				<p class="g11n-lang-es g11n-content g11n-hidden">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
			</div>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>
<!DOCTYPE html>
<html lang="en">
	<head>
		 <title id="title" class="translate-g11n" data-g11n-fr="Exemple">Example</title>
		 <!-- Le titre des pages ne peut être internationalisé avec la méthode par blocs. -->
		 <!-- Le titre de la page peut être internationalisé. Cette solution est valide en Html 5. -->
		 <!-- Ici, nous utilisons l'attribut de donnée personnalisé "data-g11n-fr" conjointement à un "id" spécifique et à la classe "translate-g11n". Aucune balise parente n'est nécessaire. -->
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<div id="days">
				<p class="g11n-lang-es g11n-content g11n-hidden">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>				
				<p class="g11n-lang-fr g11n-content g11n-hidden">Dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi</p>
				<p class="g11n-lang-fallback g11n-content g11n-show">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
			</div>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
	</body>
</html>

Try it yourself

Essayer

Exemple avec des éléments en ligne

<!DOCTYPE html>
<html>
	<head>
		<title id="title" class="translate-g11n">Example</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<p id="ajax" class="translate-g11n" data-g11n-fr="<abbr title=&quot;Asynchronous JavaScript And Xml&quot;>Ajax</abbr> est une méthode de développement de sites web."><abbr title="Asynchronous JavaScript And Xml">Ajax</abbr> is a technique used in web application development.</p>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
			<script>				
				$('#title').attr('data-g11n-ar', 'مثال');
				$('#title').attr('data-g11n-es', 'ejemplo'); 
				$('#title').attr('data-g11n-fr', 'Exemple');
				$('#title').attr('data-g11n-ru', 'пример');
				$('#title').attr('data-g11n-zh', '例子');
			</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		 <title id="title" class="translate-g11n">Example</title>
		 <!-- Translations of "#title" is stored in JavaScript. -->
		 <!-- On the other hand, blocks method does not allow to store translations in JavaScript. -->
		 <!-- With in-line method, code is shorter. -->	 	 
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			 <p id="ajax" class="translate-g11n" data-g11n-fr="<abbr title=&quot;Asynchronous JavaScript And Xml&quot;>Ajax</abbr> est une méthode de développement de sites web."><abbr title="Asynchronous JavaScript And Xml">AJAX</abbr> is a technique used in web application development.</p>
			<!-- data-g11n-xx can contain any string, such as HTML code. To a correct parsing, you can not use double quotes inside the string. So we replace doubles quotes with entity "&quot;". In these cases, however, it may be easier to use "Glocalization" with blocks method. If you have to deal with a unique "id", you can use "span" tag, <span> </span>. -->
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
			<script>				
				$('#title').attr('data-g11n-ar', 'مثال');
				$('#title').attr('data-g11n-es', 'ejemplo'); 
				$('#title').attr('data-g11n-fr', 'Exemple');
				$('#title').attr('data-g11n-ru', 'пример');
				$('#title').attr('data-g11n-zh', '例子');
				/* We store translations with $('#identifier').attr('data-g11n-+lang', 'text'); The default text is in HTML code. */
			</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		 <title id="title" class="translate-g11n">Example</title>
		 <!-- Les traductions de "#title" sont stockées dans le JavaScript. -->
		 <!-- En revanche, la méthode par blocs ne permet pas d'enregistrer les traductions dans le JavaScript-->
		 <!-- Avec la méthode en ligne, le code est plus concis. -->
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			 <p id="ajax" class="translate-g11n" data-g11n-fr="<abbr title=&quot;Asynchronous JavaScript And Xml&quot;>Ajax</abbr> est une méthode de développement de sites web."><abbr title="Asynchronous JavaScript And Xml">AJAX</abbr> is a technique used in web application development.</p>
			 <!-- data-g11n-xx peut contenir n'importe quelle chaîne, comme du code Html. Pour que le document soit correctement analysé, on ne peut pas utiliser des guillemets à l'intérieur de la chaîne. Nous remplaçons donc les guillemets par l'entité "&quot;". Dans ces cas, il peut être plus simple d'utiliser "Glocalization" avec la méthode des blocs. Si l'on doit recourir à une "id" unique, on peut utiliser la balise "span", <span> </span>. -->
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
			<script>				
				$('#title').attr('data-g11n-ar', 'مثال');
				$('#title').attr('data-g11n-es', 'ejemplo'); 
				$('#title').attr('data-g11n-fr', 'Exemple');
				$('#title').attr('data-g11n-ru', 'пример');
				$('#title').attr('data-g11n-zh', '例子');
				/* Nous enregistrons les traductions, sous la forme $('#identifiant').attr('data-g11n-+langue', 'texte'); Le texte par défaut est dans le code Html. */
			</script>
	</body>
</html>

Try it yourself

Essayer

Example avec des éléments en ligne gérés par JavaScript

<!DOCTYPE html>
<html>
	<head>
		<title id="title" class="translate-g11n">Example</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<p id="ajax" class="translate-g11n" data-g11n-fr="<abbr title=&quot;Asynchronous JavaScript And Xml&quot;>Ajax</abbr> est une méthode de développement de sites web."><abbr title="Asynchronous JavaScript And Xml">Ajax</abbr> is a technique used in web application development.</p>
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
			<script>				
				$('#title').attr('data-g11n-ar', 'مثال');
				$('#title').attr('data-g11n-es', 'ejemplo'); 
				$('#title').attr('data-g11n-fr', 'Exemple');
				$('#title').attr('data-g11n-ru', 'пример');
				$('#title').attr('data-g11n-zh', '例子');
			</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		<!-- "#title" id, "translate-g11n" class and translations of "title" are managed in JavaScript. -->
		<!-- This trick is useful when you can not alter the markup of a page. -->
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<p id="ajax"><abbr title="Asynchronous JavaScript And Xml">Ajax</abbr> is a technique used in web application development.</p>
			<!-- "translate-g11n" class is managed in jQuery. -->
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
			<script>			
				$("title").attr("id", "title").addClass("translate-g11n");	
				$("#ajax").addClass("translate-g11n");	
				$('#title').attr('data-g11n-ar', 'مثال');
				$('#title').attr('data-g11n-es', 'ejemplo'); 
				$('#title').attr('data-g11n-fr', 'Exemple');
				$('#title').attr('data-g11n-ru', 'пример');
				$('#title').attr('data-g11n-zh', '例子');
				$('#ajax').attr('data-g11n-fr', '<abbr title="Asynchronous JavaScript And Xml">Ajax</abbr> est une méthode de développement de sites web.');
			</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		<!-- L'id "#title", la classe "translate-g11n" et la traduction sont gérées par jQuery. -->
		<!-- Cette astuce est pratique quand on ne peut modifier la structure d'une page. -->
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
			<p id="ajax"><abbr title="Asynchronous JavaScript And Xml">Ajax</abbr> is a technique used in web application development.</p>
			<!-- La classe "translate-g11n" et la traduction sont gérées par jQuery. -->
			<script src="http://code.jquery.com/jquery-latest.min.js"></script>
			<script src="js/g11n.js"></script>
			<script>			
				$("title").attr("id", "title").addClass("translate-g11n");	
				$("#ajax").addClass("translate-g11n");	
				$('#title').attr('data-g11n-ar', 'مثال');
				$('#title').attr('data-g11n-es', 'ejemplo'); 
				$('#title').attr('data-g11n-fr', 'Exemple');
				$('#title').attr('data-g11n-ru', 'пример');
				$('#title').attr('data-g11n-zh', '例子');
				$('#ajax').attr('data-g11n-fr', '<abbr title="Asynchronous JavaScript And Xml">Ajax</abbr> est une méthode de développement de sites web.');
			</script>
	</body>
</html>

Try it yourself

Essayer

Example avec des images

<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
		<div id="g11n0">
			<div class="g11n-lang-ar g11n-content g11n-hidden"><img src="picture.jpg" alt="برج" title="برج" /></div>		
			<div class="g11n-lang-es g11n-content g11n-hidden"><img src="picture.jpg" alt="Torre Eiffel" title="Torre Eiffel" /></div>			
			<div class="g11n-lang-fr g11n-content g11n-hidden"><img src="picture.jpg" alt="Tour Eiffel" title="Tour Eiffel" /></div>
			<div class="g11n-lang-ru g11n-content g11n-hidden"><img src="picture.jpg" alt="Эйфелева" title="Эйфелева" /></div>
			<div class="g11n-lang-zh g11n-content g11n-hidden"><img src="picture.jpg" alt="艾菲尔铁塔" title="艾菲尔铁塔" /></div>
			<div class="g11n-lang-fallback g11n-content g11n-show"><img src="picture.jpg" alt="Eiffel Tower" title="Eiffel Tower" /></div>			
		</div>
		<div id="g11n1" class="translate-g11n">
			<img src="picture.jpg" alt="Eiffel Tower" title="Eiffel Tower" />
		</div>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			var imgSrc = "picture.jpg";
			$('#g11n1').attr('data-g11n-ar', '<img src="' + imgSrc + '" alt="برج" title="برج" />');
			$('#g11n1').attr('data-g11n-es', '<img src="' + imgSrc + '" alt="Torre Eiffel" title="Torre Eiffel" />');
			$('#g11n1').attr('data-g11n-fr', '<img src="'  + imgSrc + '" alt="Tour Eiffel" title="Tour Eiffel" />');
			$('#g11n1').attr('data-g11n-ru', '<img src="'  + imgSrc + '" alt=\'Эйфелева\' title="Эйфелева" />');
			$('#g11n1').attr('data-g11n-zh', '<img src="' + imgSrc + '" alt="艾菲尔铁塔" title="艾菲尔铁塔" />');
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
		<div id="g11n0">
			<div class="g11n-lang-ar g11n-content g11n-hidden"><img src="picture.jpg" alt="برج" title="برج" /></div>		
			<div class="g11n-lang-es g11n-content g11n-hidden"><img src="picture.jpg" alt="Torre Eiffel" title="Torre Eiffel" /></div>			
			<div class="g11n-lang-fr g11n-content g11n-hidden"><img src="picture.jpg" alt="Tour Eiffel" title="Tour Eiffel" /></div>
			<div class="g11n-lang-ru g11n-content g11n-hidden"><img src="picture.jpg" alt="Эйфелева" title="Эйфелева" /></div>
			<div class="g11n-lang-zh g11n-content g11n-hidden"><img src="picture.jpg" alt="艾菲尔铁塔" title="艾菲尔铁塔" /></div>
			<div class="g11n-lang-fallback g11n-content g11n-show"><img src="picture.jpg" alt="Eiffel Tower" title="Eiffel Tower" /></div>			
		</div>
		<!-- Block method. When there is more than one element to be translated into a container, this method is better and simpler, unless if you have to deal with a unique "id". -->
		<div id="g11n1" class="translate-g11n">
			<img src="picture.jpg" alt="Eiffel Tower" title="Eiffel Tower" />
		</div>		
		<!-- In-line method with JavaScript storage -->
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			var imgSrc = "picture.jpg";
			$('#g11n1').attr('data-g11n-ar', '<img src="' + imgSrc + '" alt="برج" title="برج" />');
			$('#g11n1').attr('data-g11n-es', '<img src="' + imgSrc + '" alt="Torre Eiffel" title="Torre Eiffel" />');
			$('#g11n1').attr('data-g11n-fr', '<img src="'  + imgSrc + '" alt="Tour Eiffel" title="Tour Eiffel" />');
			$('#g11n1').attr('data-g11n-ru', '<img src="'  + imgSrc + '" alt=\'Эйфелева\' title="Эйфелева" />');
			$('#g11n1').attr('data-g11n-zh', '<img src="' + imgSrc + '" alt="艾菲尔铁塔" title="艾菲尔铁塔" />');
			<!-- We store translations here. -->
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		 <style>
			.g11n-show {
			  display: block !important;
			}
			.g11n-hidden {
			  display: none !important;
			  visibility: hidden !important;
			}
		 </style>
	</head>
	<body>
			<p class="g11n-nojs g11n-show"><strong>JavaScript is disabled on your browser. Please enable JavaScript to display translations.</strong></p>
			<div id="language-switcher" class="g11n-js g11n-hidden">
				<button id="ar" class="language">AR</button>
				<button id="en" class="language">EN</button>
				<button id="es" class="language">ES</button>
				<button id="fr" class="language">FR</button>
				<button id="ru" class="language">RU</button>
				<button id="zh" class="language">ZH</button>
			</div>
		<div id="g11n0">
			<div class="g11n-lang-ar g11n-content g11n-hidden"><img src="picture.jpg" alt="برج" title="برج" /></div>		
			<div class="g11n-lang-es g11n-content g11n-hidden"><img src="picture.jpg" alt="Torre Eiffel" title="Torre Eiffel" /></div>			
			<div class="g11n-lang-fr g11n-content g11n-hidden"><img src="picture.jpg" alt="Tour Eiffel" title="Tour Eiffel" /></div>
			<div class="g11n-lang-ru g11n-content g11n-hidden"><img src="picture.jpg" alt="Эйфелева" title="Эйфелева" /></div>
			<div class="g11n-lang-zh g11n-content g11n-hidden"><img src="picture.jpg" alt="艾菲尔铁塔" title="艾菲尔铁塔" /></div>
			<div class="g11n-lang-fallback g11n-content g11n-show"><img src="picture.jpg" alt="Eiffel Tower" title="Eiffel Tower" /></div>			
		</div>
		<!-- Méthode par bloc. Quand il y a plus d'un élément à traduire dans un conteneur, cette méthode est préférable et plus simple, sauf si l'on doit recourir à une "id" unique. -->
		<div id="g11n1" class="translate-g11n">
			<img src="picture.jpg" alt="Eiffel Tower" title="Eiffel Tower" />
		</div>
		<!-- Méthode en ligne avec stockage avec JavaScript -->
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			var imgSrc = "picture.jpg";
			$('#g11n1').attr('data-g11n-ar', '<img src="' + imgSrc + '" alt="برج" title="برج" />');
			$('#g11n1').attr('data-g11n-es', '<img src="' + imgSrc + '" alt="Torre Eiffel" title="Torre Eiffel" />');
			$('#g11n1').attr('data-g11n-fr', '<img src="'  + imgSrc + '" alt="Tour Eiffel" title="Tour Eiffel" />');
			$('#g11n1').attr('data-g11n-ru', '<img src="'  + imgSrc + '" alt=\'Эйфелева\' title="Эйфелева" />');
			$('#g11n1').attr('data-g11n-zh', '<img src="' + imgSrc + '" alt="艾菲尔铁塔" title="艾菲尔铁塔" />');
			<!-- Nous enregistrons les traductions ici. -->
		</script>
	</body>
</html>

Try it yourself

Essayer

Example avec des alertes

<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			var alertspeak = [];
			alertspeak.fr = 'Parlez-vous français ?';
			alertspeak.fallback = 'Do you speak English?';
			$(document).ready(function() {
				if (languageTarget == 'fr') {
					alert(languageAlertG11n(languageTarget, alertspeak));
				} else {
					alert(languageAlertG11n(languageTarget, alertspeak));
				}
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			var alertspeak = [];
			/* The string must be initialized. */
			alertspeak.fr = 'Parlez-vous français ?';
			/* When a translation is available, it is necessary to declare it with a dot followed by its ISO 639-1 code. Then, assign the text value. */
			alertspeak.fallback = 'Do you speak English?';
			/* There should be a default text. */
			$(document).ready(function() {
				if (languageTarget == 'fr') {
					alert(languageAlertG11n(languageTarget, alertspeak));
				} else {
					alert(languageAlertG11n(languageTarget, alertspeak));
				}
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			var alertspeak = [];
			/* La chaîne doit être initialisée. */
			alertspeak.fr = 'Parlez-vous français ?';
			/* Quand une traduction est disponible, il faut la déclarer avec un point suivi de son code ISO 639-1, puis affecter le texte à la valeur. */
			alertspeak.fallback = 'Do you speak English?';
			/* Il convient de prévoir un texte par défaut. */
			$(document).ready(function() {
				if (languageTarget == 'fr') {
					alert(languageAlertG11n(languageTarget, alertspeak));
				} else {
					alert(languageAlertG11n(languageTarget, alertspeak));
				}
			});
		</script>
	</body>
</html>

Try it yourself

Essayer

Exemple avec Ajax

<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			$(document).ready(function() {
			$('#apply').click(function() {
				var formData = $('#custom').serialize();
				formData += '&lang=' + languageTarget;
				$.ajax({
				...
				});
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			$(document).ready(function() {
			$('#apply').click(function() {
				var formData = $('#custom').serialize();
				formData += '&lang=' + languageTarget;
				/* We add value "languageTarget" defined when loading the page or click the user to the seralized form values. Then, with Php, we use "$_POST['lang']" value to customize the response text. */
					$.ajax({
					...
					});
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/g11n.js"></script>
		<script>
			$(document).ready(function() {
				$('#apply').click(function() {
					var formData = $('#custom').serialize();
					formData += '&lang=' + languageTarget;
					/* Nous ajoutons la valeur "languageTarget", définie lors du chargement de la page ou du clic de l'utilisateur, aux valeurs sérialisées du formulaire. Ensuite, en Php, nous utilisons la variable "$_POST['lang']" pour personnaliser le texte de la réponse. */
					$.ajax({
					...
					});
			});
		</script>
	</body>
</html>

Usage avec WordPress

<?php if ( ! function_exists( 'glocalization_js' ) ) :
	function glocalization_js() {
	?>
		<script>
		jQuery(document).ready(function($) {
			$("#g11n0").attr("data-g11n-ar", "مثال");
			$("#g11n0").attr("data-g11n-es", "ejemplo"); 
			$("#g11n0").attr("data-g11n-fr", "Exemple");
			$("#g11n0").attr("data-g11n-ru", "пример");
			$("#g11n0").attr("data-g11n-zh", "例子");
		});
		</script>
	<?php
	}
	add_action( 'wp_footer', 'glocalization_js', 99 );
endif;
?>
<?php if ( ! function_exists( 'glocalization_js' ) ) :
	function glocalization_js() {
	/* We enqueue in footer translations strings, if we want to display them with JavaScript. */
	?>
		<script>
		jQuery(document).ready(function($) {
			$("#g11n0").attr("data-g11n-ar", "مثال");
			$("#g11n0").attr("data-g11n-es", "ejemplo"); 
			$("#g11n0").attr("data-g11n-fr", "Exemple");
			$("#g11n0").attr("data-g11n-ru", "пример");
			$("#g11n0").attr("data-g11n-zh", "例子");
		});
		</script>
	<?php
	}
	add_action( 'wp_footer', 'glocalization_js', 99 );
endif;
?>
<?php if ( ! function_exists( 'glocalization_js' ) ) :
	function glocalization_js() {
	/* Nous plaçons en file d'attente ("enqueue") dans le pied de page les chaînes de traduction, si nous souhaitons les afficher avec JavaScript. */
	?>
		<script>
		jQuery(document).ready(function($) {
			$("#g11n0").attr("data-g11n-ar", "مثال");
			$("#g11n0").attr("data-g11n-es", "ejemplo"); 
			$("#g11n0").attr("data-g11n-fr", "Exemple");
			$("#g11n0").attr("data-g11n-ru", "пример");
			$("#g11n0").attr("data-g11n-zh", "例子");
		});
		</script>
	<?php
	}
	add_action( 'wp_footer', 'glocalization_js', 99 );
endif;
?>
<?php if ( ! function_exists( 'init_glocalization' ) ) {
	function init_glocalization() {
		wp_enqueue_style( 'g11n-css', get_stylesheet_directory_uri().'/css/g11n.css');
		wp_register_script( 'g11n-script', get_stylesheet_directory_uri().'/js/g11n.js', array( 'jquery' ), '2014-01-01', true );
		wp_enqueue_script( 'g11n-script' );
	}
	add_action( 'wp_enqueue_scripts', 'init_glocalization' );
}
?>
<?php if ( ! function_exists( 'init_glocalization' ) ) {
	/* This example is purely didactic. We have developed a plugin for WordPress! */
	function init_glocalization() {
		wp_enqueue_style( 'g11n-css', get_stylesheet_directory_uri().'/css/g11n.css');
		wp_register_script( 'g11n-script', get_stylesheet_directory_uri().'/js/g11n.js', array( 'jquery' ), '2014-01-01', true );
		wp_enqueue_script( 'g11n-script' );
	}
	add_action( 'wp_enqueue_scripts', 'init_glocalization' );
}
?>
<?php if ( ! function_exists( 'init_glocalization' ) ) {
	/* Cet exemple est purement didactique. Nous avons conçu un plugiciel pour WordPress ! */
	function init_glocalization() {
		wp_enqueue_style( 'g11n-css', get_stylesheet_directory_uri().'/css/g11n.css');
		wp_register_script( 'g11n-script', get_stylesheet_directory_uri().'/js/g11n.js', array( 'jquery' ), '2014-01-01', true );
		wp_enqueue_script( 'g11n-script' );
	}
	add_action( 'wp_enqueue_scripts', 'init_glocalization' );
}
?>
 

 

About JavaScript support…
À propos du support de JavaScript…

It is interesting to detect JavaScript support when its use is required.

The simplest method for a progressive enhancement is conducted in two steps. First, we hide the contents with a Css rule. Then we display the contents with a JavaScript instruction.

In other words, some sites use JavaScript to hide paid content, for example. There must be a mistake. Just disable JavaScript to view the content! It is smarter to hide the default content, then display or hide with a script.

Thus, in the example with the buttons supported language, we declared two styles: g11n show and g11n-hidden. Blocks of text to display and hide receive two classes: g11n-nojs and g11n-js. These two classes works with jQuery with two instructions:

$('.g11n-nojs').removeClass('g11n-show').addClass('g11n-hidden');
$('.g11n-js').removeClass('g11n-hidden').addClass('g11n-show');

If JavaScript is disabled, these instructions will not be interpreted by the browser. Only blocks with g11n-nojs class will be displayed. This solution is universal.

Few people know this trick: Google crawls henceforth JavaScript content.

As JavaScript is deactivated in less than 2% of browsers, most often by tech users, the subject of accessibility is secondary.

Il est intéressant de détecter le support de JavaScript quand son utilisation est indispensable.

Pour une amélioration progressive, la méthode la plus simple s’effectue en deux temps : d’abord, on cache le contenu avec une règle Css ; ensuite, on affiche le contenu avec une instruction en JavaScript.

Autrement posé, certains sites utilisent JavaScript pour cacher du contenu payant, par exemple. C’est une erreur : il suffit de désactiver JavaScript pour afficher le contenu ! Il est plus astucieux de cacher le contenu par défaut, puis de l’afficher ou de le cacher avec un script.

Ainsi, dans l’exemple avec les boutons de prise en charge de la langue, avons-nous déclaré les styles g11n-show et g11n-hidden. Les blocs de texte à afficher et à cacher reçoivent deux classes : g11n-nojs et g11n-js. Ces deux classes sont gérées avec jQuery grâce à deux instructions :

$('.g11n-nojs').removeClass('g11n-show').addClass('g11n-hidden');
$('.g11n-js').removeClass('g11n-hidden').addClass('g11n-show');

Si JavaScript est désactivé, ces instructions ne seront pas interprétées par le navigateur et seuls les blocs munis de la classe g11n-nojs seront affichés. Cette solution est universelle.

La caractéristique est méconnue : Google référence désormais le contenu accessible avec JavaScript.

Comme JavaScript est désactivé dans moins de 2 % des navigateurs, le plus souvent par des utilisateurs technophiles, la question de l’accessibilité est secondaire.