Parmi les sites que je gère il y en a qui sont bilingues (Arabe/Français). et l’une des problématique que j’ai rencontré pour la mise en page correcte des contenus de ces sites est l’alignement à droite ou à gauche des textes dans certains cas.

Quand on sait qu’un contenu est arabe, il suffit d’ajouter une classe de style pour changer la direction du texte (direction:rtl), c’est le cas des articles ou de sections du site qui sont définies à l’avance dans une langue ou une autre ; mais quand il s’agit de contenu saisi par l’utilisateur, la situation est différente…

En effet, pour un article posté en Français sur un site Marocain, certains commentaires sont posté en arabe d’autre en Français, mais puisque la plupart du temps les mêmes styles sont appliqués à tous les commentaires, ces derniers se retrouve tous aligné à droite ou à gauche ce qui donne un aspect pas terrible pour la mise en page, et une lisibilité réduite.

même chose quand il s’agit d’un forum de discussion bilingue…

pour palier à celà, j’ai fais un petit script en jQuery qui détecte et aligne les textes correctement, le script n’est pas parfait, il doit être ajusté en fonction de vos besoins

Le code

$(document).ready(function(){
	ratio = 2;
	$('div.comment').each(function(){
		txt1 = $(this).text();
		txt2 = txt1.replace(new RegExp('[^a-zA-Z0-9]', 'g'),'');
		if (txt2.length*ratio < txt1.length) $(this).css('text-align', 'right');
	})
});

Explication

Ce code utilise une astuce très simple :

• Dans la ligne 4 on récupère le texte que l’on souhaite ajuster dans la variable txt1
• Dans la ligne 5 on récupère les caractères non latin de la variable txt1 dans une variable txt2 (en fait ce n’est pas tout à fait ca car les caractère accentués ne sont pas retirés ni la ponctuation, mais c’est suffisant pour notre utilisation et l’expression régulière est simple ainsi)
• On compare la longueur du texte non latin (txt2) à la longueur totale du texte, si la longueur du texte non latin multiplié par un ratio (ici égale à 2) est supérieure à la taille totale du texte alors on ajuste l’alignement.

Utilisation du script

Dans la grande majorité des cas, il suffit de modifier la ligne 3 en remplaçant le sélecteur ‘div.comment’ par celui correspondant aux contenus que vous souhaitez ajuster.

si celà ne marche pas ou que tous les textes ne sont pas ajustés augmenter le ratio jusqu’a obtention du bon résultat.

Améliorer le script.

Comme je l’ai dis, ceci est juste une astuce, je n’ai pas eu le temps d’en créer un plugin jQuery ni de le perfectionner, ca fonctionne bien avec mes sites et j’en suis content 😉
mais si ca vous dit, vous pouvez améliorer le script en améliorant par exemple l’expression régulière et encapsuler le tout dans un plugin jQuery applicable directement au sélecteur 😉

N’hésitez pas à poser vos questions si vous ne parvenez pas à utiliser correctement ce script, ou si vous souhaitez proposer des améliorations.