Multilingual Javascript Library Preview
Dimanche 16 décembre 2007***Domingo, 16 de Diciembre de 2007***Sunday, 16 December 2007***2007年12月16日 (日曜日)
Juste un petit post pour dire que dernierement:
- je n’ai plus d’ordinateur digne de ce nom (j’ecris en ce moment avec un tres vieux portable, qui lui au moins marche…)
- je n’ai pas de temps libre pour developper a la maison, ce qui veut dire que je ne peux pas toucher beaucoup au blog non plus.
Ceci-dit, pour quelques personnes qui etaient interessees, j’explique brievement dans ce post comment utiliser la librairie javascript que j’ai developpe pour ce site (je lui ai donne un nom, il fallait bien, et c’est MSJL - Multilingual Support Javascript Library). Elle fonctionne en principe sur Firefox 2, IE 6 et 7, et la plupart des navigateurs supportes par JQuery 1.2.1, et sur les blogs de Blogsome, Wordpress (non teste) et Blogger.
Pour utilisateurs de Blogsome et Wordpress:
1. Telechargez la librairie depuis ici et renommez-la en enlevant l’extension .jpg (j’ajoute l’extension jpg pour pouvoir uploader le fichier sur blogsome). Uploadez-la sur votre site.
Telechargez aussi la librairie JQuery et uploadez-la aussi sur votre site. J’utilise actuellement la version 1.2.1 .
2. Dans votre template “index.html” (section “head”), inserez les lignes suivantes pour charger la librairie et aussi JQuery:
<script src='/path/jquery.js' type='text/javascript'></script>
<script src='/path/msjl.js' type='text/javascript'></script>
Ensuite, definissez les langues que vous voulez utiliser et initialiser la librairie:
<script type='text/javascript'>
var msjl = new MSJL();
$(document).ready(function() {ldelim}
msjl.addLanguage('fr');
msjl.addLanguage('es');
msjl.addLanguage('en');
msjl.addLanguage('jp');
msjl.init();
{rdelim}
</script>
3. Definissez ensuite des liens ou des boutons pour permettre a l’utilisateur de choisir la langue. J’utilise des liens javascript:
<a href="javascript:msjl.setLanguage('fr',1000);msjl.setLanguageCookie('fr',365)">
La methode setLanguage permet de selectionner la langue en cours. Le premier parametre indique la langue, et le second parametre (optionnel) indique la duree de l’animation de changement de langue. Si aucune animation n’est souhaitee, on peut omettre ce parametre.
4. Dans le template post.html, entourer la balise {the_content} par un div ayant comme titre “multilingual” et dont la visibilite soit cachee:
<div title='multilingual' style='display: none' class='storycontent'>
{the_content}
</div>
5. Ensuite il ne reste plus qu’a ecrire chaque post en plusieurs langues. Pour cela, ecrire le post comme d’habitude dans la premiere langue, ajouter le separateur * * * (3 asterisques consecuitifs, sans espaces), et ecrire le post dans la langue suivante. Quand il y a plus de 2 langues, le processus reste le meme, on separe chaque version par * * *.
Voila !
Le principe de fonctionnement est simple: quand la page est chargee, je recherche les elements “div” ayant le titre multilingual, je scanne le contenu et separe les differentes versions. Pour chaque version, je cree un nouvel element “div” ayant comme attribut “LANG” la langue de la version. Ensuite, selon le choix de l’utilisateur, je change le style des balises “div” pour ne montrer que celles qui ont comme attribut “LANG” la langue actuellement selectionnee.
De ce fait, on peut aussi ajouter dans les templates des contenus multilingues en leur attribuant tout simplement l’attribut “LANG” correctement.
Par exemple, on peut preparer les titres des menus en plusieurs langues egalement:
<div title='multilingual' style='display:none;'>Entrées les + populaires
* * *Entradas más populares* * *Most Popular Posts* * *興味があるポスト</div>
ou bien directement:
<div LANG='fr'>Entrées les + populaires</div>
<div LANG='es'>Entradas más populares</div>
<div LANG='en'>Most Popular Posts</div>
<div LANG='jp'>興味があるポスト</div>
Le probleme avec la deuxieme approche est que jusqu’a ce que la page soit chargee entierement, les differentes versions sont visibles en meme temps, ce qui n’est pas souhaitable. Une fois que la page est chargee, la librairie javascript cache les langues qui ne doivent pas apparaitre.
La librairie peut-etre egalement utilisee dans d’autres blogs, par exemple sur Blogger (de Google). Le processus est globalement le meme.
Pour l’etape 2, editer le template en html (Template > Edit HTML), et remplacez {ldelim} par {, et {rdelim} par }.
Pour l’etape 4, vous pouvez preparer un template de post (Settings > Formatting > Post Template) avec le contenu suivant:
<div title='multilingual' style='display: none' class=''>
</div>
Ensuite, quand vous ecrivez le post, vous inserez le contenu a l’interieur du div.
Il est aussi possible d’ecrire les titres multilingues, mais cette fonction est uniquement disponible pour les utilisateurs de Wordpress. Envoyez-moi un mail ou un commentaire et je vous explique la marche a suivre.
***Version en castellano pronto, cuando tenga un teclado con el que pueda esribir las enyes !!
***Just some words to say that:
-I don’t have a “real” computer at home anymore (I am writing now using a very old notebook. At least it works…)
-I don’t have time to develop at home, so it means also no time to modify the blog.
Anyway, for some people who were interested, I explain briefly (I hope) in this post how to use the javascript library that I developed for this page (I gave it a name, I had to… it’s MSJL - Multilingual Support Javascript Library ). It should work on Firefox 2, IE6 and 7, and other navigators supported by JQuery 1.2.1 I think, and on Wordpress blogs (Blogsome, Wordpress,etc) and Blogger also.
For users of Blogsome and Wordpress:
1. Download the library from here and rename it removing the .jpg extension (I add the jpg extension in order to upload it onto Blogsome).
Download also the JQuery library (I use version 1.2.1) and upload both libraries to your site.
2. In your template “index.html” (section “head”), insert the following lines to load the library and also JQuery:
<script src='/path/jquery.js' type='text/javascript'></script>
<script src='/path/msjl.js' type='text/javascript'></script>
Just after that, define the languages you would like to use and initialize the library:
<script type='text/javascript'>
var msjl = new MSJL();
$(document).ready(function() {ldelim}
msjl.addLanguage('fr');
msjl.addLanguage('es');
msjl.addLanguage('en');
msjl.addLanguage('jp');
msjl.init();
{rdelim}
</script>
3. Define then some links or some buttons on your page to allow the user to change the language. I use links with javascript code:
<a href="javascript:msjl.setLanguage('fr',1000);msjl.setLanguageCookie('fr',365)">
<a href="javascript:msjl.setLanguage('es',1000);msjl.setLanguageCookie('fr',365)">
<a href="javascript:msjl.setLanguage('en',1000);msjl.setLanguageCookie('fr',365)">
<a href="javascript:msjl.setLanguage('jp',1000);msjl.setLanguageCookie('fr',365)">
The “setLanguage” method selects the new current language. The first parameter specifies hte language, and the second and optional parameter specifies how long should last the animation when changing languages. If you would like no animation, just omit this parameter.
4. In the post.html template, wrap the {the_content} with a div element as follows:
<div title='multilingual' style='display: none' class='storycontent'>
{the_content}
</div>
(The title must be “multilingual” and the style should be hidden.)
5. From now, you just have to write your posts in various languages. In order to do that, you write as always your post, and when you finish the first language, you add the special separator * * * (3 consecutives asterisk, without spaces), and writes the post in the next language. When there are more than 2 languages, you add another separator each time.
Voila !
How it works ? It’s quite simple: when the page is loaded, I look for all the elements with title “multilingual”, and parse their content to separate the different languages. For each language, I create a new div element with the “LANG” attribute set to the actual language of the content. Then, depending on the user’s choice, the visibility of the div elements is changed to let only the selected language visible.
That’s why you can also add in your templates multilingual contents using the “LANG” attribute:
For example, you can prepare the title of some menu in various languages as well:
<div title='multilingual' style='display:none;'>Entrées les + populaires
* * *Entradas más populares* * *Most Popular Posts* * *興味があるポスト</div>
(remember that there’s no space in the separator, I put a space just to be able to show the example correctly here)
or directly:
<div LANG='fr'>Entrées les + populaires</div>
<div LANG='es'>Entradas más populares</div>
<div LANG='en'>Most Popular Posts</div>
<div LANG='jp'>興味があるポスト</div>
The problem with the second method is that all the different versions of the same menu element are visible while the page is being loaded, and we don’t want that. When the page is finally loaded, the library hides the elements that mustn’t be displayed.
The library can also be used in other blogs, like Blogger (Google). The process is the same, only small details change.
For step 2, edit the template in html mode(Template > Edit HTML), and replace {ldelim} with {, and {rdelim} with }.
For step 4, you could prepare a post template (Settings > Formatting > Post Template) with the following content:
<div title='multilingual' style='display: none' class=''>
</div>
Finally, when you write the post, insert the content inside the div, and choose the style of the div if necessary.
It’s also possible to write multilingual titles, but this feature is only available for Wordpress and Blogsome users (it makes use of the “meta” information). Please send me a mail or post a comment if you would like that I explain how it can be done.
***日本語版はまだです。英語版に参考して下さい.


Wow! genial, muy bien hecho! Gracias por explicar tan bien el blog bilingue, cuando lo tenga implementado en una web te la comentare! ahora estoy en sinpaliativos.com (estamos con el diseno del blog pero ya hay bastante contenido) , pero esta libreria la quiero implementar en otro blog que tengo en mente. Felicidades! y Felices Fiestas!
Comment by Tremole — 22 December 2007 @ 5:44 pm
Again: This is really cool, I can recommend this to anyone. The little effort to install the codes is well worth it, since from then on it is soooo quick and easy. Just bookmarked this post to delicious, diigo and stumbleupon.
Gerald, I’d appreciate if you could also explain how to change the post title. If you find the time….
Comment by robg — 24 December 2007 @ 11:26 am
Hi there ! Thank you for the comments, and merry christmas !!
I am on holidays now, so indeed I do have some time, this is cool. I will update the post to explain also the title thing. See you soon !
Comment by Geraldo — 25 December 2007 @ 11:26 am
Igualmente! Felices Fiestas, hoy es el cumple de un miembro del grupo ,es curioso, pues nada decirte lo bien que lo has explicado para traducciones, pero, cuando puedas claro, si lo puedes traducir al castellano mejor. Es que en algunos puntos nos quedamos un poco atascados, pasate cuando quieras por nuestra web GRACIAS!
Comment by sinpaliativos — 25 December 2007 @ 4:26 pm