1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Traduction de texte

Traduction de texte

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 526 fois - Téléchargée 16 fois

Commenter

Contenu du snippet

Bonjour a tous, tout d'abord, je précise que c'est la première source que je dépose ici.
Entrons dans le vifs du sujet.Ce que je vous propose, c'est un système permettant de traduire une div grâce à l'API de Google translate. Vous pouvez utilisez toutes les langues traduites par google, ce script est assez simple, mais efficace (enfin je pense ^^,). L'avantage, par rapport à l'exemple fournis par google, c'est que si l'on décide de revenir à la langue d'origine, il n'y a pas de double traduction. Assez de blabla, place au code :

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		google.load("language", "1");
		function translate(lang)
		{
			var text = document.getElementById("text").innerHTML; //on récupère le texte d'origine
			var org = document.getElementById("lang_origin").value;// on récupère la langue d'origine
			var trans = document.getElementById("translation");// Nom de la div où afficher le texte
			if (lang == org) // Si te texte choisis est le même que celui d'origine
			{
				trans.innerHTML = text;//aucune modification
			}
			else //Sinon on le traduit
			{
				google.language.translate(text, org, lang, function(result) { //tiré de l'API Google translate
					if (!result.error) {
						trans.innerHTML = result.translation;
					}
				});
			}
		}
		function chargertxt() //On affiche le texte dans sa langue d'origine au chargement de la page
		{
			document.getElementById('translation').innerHTML = document.getElementById('text').innerHTML;
		}
		</script>
		<style type="text/css"> <!-- On n'affiche pas le texte d'origine étant donné qu'il seras affiché dans le div translation-->
			#text
			{
				display:none;
			}
		</style>
	</head>
	
	<body onload="chargertxt();">
		 <form action="#" method="post">
			<select  onchange="translate(this.value)"> <!-- Choix des langue, bien sur, ou peu faire la même chose en mettant des liens(avec les drapeaux des pays par exemple) -->
				<option value="fr">Francais</option>
				<option value="en">English</option>
				<option value="es">Español</option>
				<option value="el">Greek</option>
				<option value="de">German</option>
			</select>
			<input type="hidden" id="lang_origin" value="fr"/>
		 </form>
		 <div id="text">Ici, vous mettez votre texte.</div><!-- on écrit le texte d'origine, normalement, les balises HTML sont prisent en compte par l'API google, donc aucun problème pour mettre des liens ou des images -->
		 <div id="translation"></div><!-- C'est le div qui sera affiché à l'écran -->
	</body>
</html>

Conclusion :


Ça, c'est fait ! Maintenant, libre à vous de le customiser comme bon il vous semble. J'ai décidé d'utiliser <style></style> car je ne trouvais pas nécessaire de créer un CSS juste pour une ligne. N'hésitez pas à laisser vos commentaires.

A voir également

Ajouter un commentaire

Commentaires

Signaler

describe('FactureComponent', () => {
let component: FactureComponent;
let fixture: ComponentFixture<FactureComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FactureComponent ]
})
.compileComponents();
}));
Signaler
Messages postés
37
Date d'inscription
vendredi 20 février 2004
Statut
Membre
Dernière intervention
25 mars 2013
Question ? est ce que cet API est limitée en nombre de caractères ?
J'ai essayé des textes courts, pas de problème, excellent.
Aux environ de 1000 carcatères ou plus, la traduction ne se fait plus.
sans erreur JavaScript.

Voici le texte essayé : (les br ne gènent pas).
===============================================
Marina à vivre, en pleine ville, moderne et bien gérée,

elle offre toutes les garanties de sécurité. A terre, comme en mer.

C’est le meilleur endroit pour laisser son bateau et visiter la Crète. Nous y avons passé un hiver complet en 2001, et en gardons un excellent souvenir. Nous y sommes repassé, il y a deux ans, et y avons retrouvé le même charme.

Les crétois diffèrent des grecs, et sont faciles et agréables à côtoyer. La France et les français bénéficient d’une cote d’amour. 7 ans après, beaucoup de gens nous ont reconnus et salués.

Loin de tout, les tarifs de la marina sont raisonnables, pour un voilier de 12 mètres :
Pour 1 an : 2.670 euros à flot

Pour 1 journée : 29 euros

Pour 6 mois d’hiver : 1.320 euros

Lift et nettoyage : 500 euros.

L’un des problèmes de cette marina, est que si il est assez facile d’y arriver, il se peut que l’on ait à attendre pour repartir....

C’est un coin ou çà souffle fort. Or, vers l’Est, avec le vent portant, c’est le détroit de Rhodes et Karpathos, un coin pourri de chez pourri...

Et vers le Nord, c’est route sur Santorin : 90 miles à faire au prés, contre le clapot...

On l’a fait avec un Fantasia... Il y a comme çà, des souvenirs qui marquent....
==========================================================================

Merci pour toute réponse,
Pierre.
Signaler
Messages postés
817
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
7 avril 2010
Ba c'est du javascript, donc le mieux, c'est de le mettre dans le <head/>. Après, si dans le js le champs à modifier est bien renseigné, je ne pense pas qu'il y ai de soucis pour la détection. Par contre, attention, si le texte est trop long, la traduction ne ce feras pas, il y à une limitation au niveau du nombre de caractère (je ne sais pas de combien). Peut-être qu'avec cette api ( http://code.google.com/p/gtranslate-api-php/ ) on peut résoudre ce problème.
Sinon, hésite pas à lire la doc, les exemples sont pas mal pour comprendre.
Signaler
Messages postés
6
Date d'inscription
lundi 6 décembre 2004
Statut
Membre
Dernière intervention
26 août 2009
Je vais l'intégrer dans une div (include file='xxxxx') penses tu que ça ira aussi au niveau détection?
Signaler
Messages postés
817
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
7 avril 2010
Salut. A mon avis, c'est possible. Google propose une détection de langage. Il faut aller faire un tour au niveau de l'api : http://code.google.com/intl/fr/apis/ajaxlanguage/documentation/#Detect
Je n'ai pas testé, mais ca ne doit pas être très compliquer à mettre en place.
Afficher les 15 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (zoby44)