Traduction de texte
Soyez le premier à donner votre avis sur cette source.
Snippet vu 20 206 fois - Téléchargée 16 fois
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 :
Ç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.
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
- Traduction javascript
- Javascript traduction automatique - Meilleures réponses
- Javascript traduction - Meilleures réponses
- Javascript : Traduction en trois langues et changements graphique - CodeS SourceS - Guide
- C# / .NET : Quoted printable decoder (traduction csharp du code javascript de 2ni) - CodeS SourceS - Guide
- Javascript : Api google traduction - CodeS SourceS - Guide
- Javascript traduction automatique - Guide
- Récupérer données json (javascript) - Conseils pratiques - Javascript
let component: FactureComponent;
let fixture: ComponentFixture<FactureComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FactureComponent ]
})
.compileComponents();
}));
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.
Sinon, hésite pas à lire la doc, les exemples sont pas mal pour comprendre.
Je n'ai pas testé, mais ca ne doit pas être très compliquer à mettre en place.
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.