Traduction en contexte

Ce billet fait suite à un article dans lequel Hugo a présenté notre travail sur l’internationalisation, la localisation, ainsi que notre stratégie de déploiement à l’international.

La traduction

La traduction n’est pas un exercice simple. Dans d’autres domaines comme le cinéma ou la musique on parle d’adaptation plutôt que de traduction. On trouve de bons exemples d’adaptations réussies dans l’univers Disney, où le passage de la version originale à la version française se passe généralement bien.

Les équipes de professionnels de l’adaptation qui ont travaillé sur les chansons des films Disney ont eu de nombreux choix à faire : privilégier les rimes ou la construction de phrases au détriment du sens original par exemple. Si vous souhaitez en apprendre davantage, je vous invite à découvrir la vidéo d’analyse de LinksTheSun sur le sujet : Les chansons Disney (critique).

Parfois les traductions ne sont pas d’aussi bonne qualité…

Source photo : E. (via TDM)
Source photo : Loïc Bourigault (via TDM)

Même si pour la traduction du site Malt, la difficulté n’est pas aussi élevée qu’une chanson d’un film Disney, les challenges ne manquent pas.

Il n’y a souvent pas d’équivalent direct pour traduire une phrase dans une langue donnée. Le plus souvent, il en existe plusieurs variantes et c’est la connaissance du domaine fonctionnel et du métier qui permettra de décider quelle version choisir plutôt qu’une autre.

Exemple : si l’on prend la clé de traduction suivante qui identifie de manière unique un texte traduit sur le site Malt : page.jobs.summary.title. A priori, sans plus d’informations, on pourrait croire que cette clé est une référence vers une traduction du titre d’une de nos pages mission. Alors qu’en fait il s’agit du titre d’une section de notre page d’offres de postes pour le recrutement.

Autre subtilité, sur le site un texte peut avoir un sens différent selon l’emplacement dans lequel il se trouve. Ce qui n’est pas évident pour un traducteur lorsqu’il a uniquement pour information une phrase dans une langue “source” ainsi qu’un nom de clé de traduction.

Une équipe de choc

source : armageddon

Cette démarche de recherche d’un site de qualité dans toutes les déclinaisons linguistiques s’est traduite par la constitution d’une task force de traducteurs.trices freelances.

On a choisi des référents dans chaque domaine, qui encadrent les traducteurs, répondent à leurs questions et leur permettent d’avancer sereinement. Ainsi au fil du temps notre équipe de traduction a acquis une connaissance métier, certes limitée, mais souvent suffisante pour être autonome. La qualité des textes proposés s’est vue croître naturellement avec le temps.

La communication est une composante clé de notre organisation. Slack est le lieu d’échange privilégié avec un channel dédié, qui laisse place à des discussions entre traducteurs et avec le reste de l’équipe.

Exemple d’échange à propos de la traduction sur notre channel slack

PhraseApp comme outil de traduction

Suite à une phase de benchmark de plusieurs outils, on a choisi le SAAS le plus adapté à notre manière de travailler et à notre stack techno, à savoir PhraseApp.

PhraseApp : interface d’édition des traductions

Pour résumer, PhraseApp, c’est un service avec une interface web qui offre une gestion des locales et des traductions cohérente avec des outils de validation et de commentaire.

Des stratégies d’export et de synchronisation qui supportent plusieurs formats de données et de fichiers de traduction : .properties, icu, …

PhraseApp : Administration des locales et synchronisation

Une API est offerte pour interagir avec les différentes ressources : projets, utilisateurs, clés de traduction et messages, etc.

Finalement cette interface, du point de vue du traducteur, est une forme de document excel enrichi, sur lequel viennent se greffer des outils collaboratifs visant à apporter le plus d’informations utiles. Ce qui crée ainsi un contexte riche favorisant des traductions qui ont du sens.

Ces outils présentent toutefois plusieurs inconvénients :

  1. le temps de mise en place est relativement important : la création d’un glossaire, ou d’une base de captures d’écrans s’avère chronophage.
  2. les données vont devenir obsolètes à la suite des mises à jour successives du site à moins de fournir un effort conséquent.

On peut mieux faire

C’est dans ce cadre que l’on a souhaité améliorer l’expérience de nos traducteurs en leur proposant une nouvelle option : la traduction en direct sur le site.

L’idée étant non pas de remplacer tout ce que l’on avait mis en place jusqu’à maintenant mais de proposer un outil supplémentaire qui apporterait le contexte nécessaire pour à la fois vérifier et corriger si nécessaire.

Spécifications

Nos besoins étaient les suivants :

  • Un outil à destination des traducteurs, ou des personnes qui souhaitent participer à l’effort de traduction.
  • Sur un environnement dédié, différent du site en production.
  • À jour avec la base de traduction existante dans PhraseApp.

Les outils existants

On a testé des outils dont la promesse était de s’intégrer au site et de pouvoir éditer les traductions en direct à partir du navigateur. Ils ont échoué dans nos phases de test pour diverses raisons : intégration inexistante avec un système de clés valeurs standards, les outils étant fait pour traduire des documents complets, ergonomie pas terrible, traductions automatiques approximatives, etc.

Il était temps de développer une application sur mesure !

source : https://memegenerator.net/instance/55256315/fist-pump-baby-lets-do-this

Notre solution : “On site translation”

Comment ça marche ?

On-site translation : activation de la fonctionnalité sur une page du site

Sur notre site en intégration, pour les personnes autorisées, une icône apparaît dans la partie droite en bas de l’écran. Lorsque l’on clique sur cette icône, l’outil de traduction en ligne s’active, et les textes qui peuvent être traduits sont mis en valeur.

Edition d’une traduction en direct sur le site

La sélection du texte donne accès à l’interface d’édition de la traduction. Le texte s’affiche d’abord dans la langue de référence, suivi en dessous de la traduction actuelle, dans une zone éditable, dans la langue du site en cours de visite.

A la sauvegarde, le nouveau texte est envoyé à PhraseApp et il sera disponible pour tous sur le site en intégration lors d’un prochain déploiement.

Sous le capot

source : pinterest, geek humour : https://www.pinterest.fr/pin/727472146028282231/

Back

Côté serveur, lorsque la fonctionnalité est activée, les textes traduits sont instrumentés à l’aide de notre implémentation de la taglib JSP “message”.

L’ajout des informations nécessaires à la récupération des données à partir de PhraseApp se fait en transformant le texte en un élément HTML. On viendra décorer le texte avec une balise <span> contenant les métadonnées nécessaires sous forme d’attributs. On a choisi l’élément span qui a un display de type inline afin de ne pas trop casser le rendu du site en s’insérant dans le flux des autres éléments de la page.

Ce qui donne avec Spring message :

Voici un exemple de balise générée pour les besoins de la traduction sur le site :

<span class=”i18n i18n-enabled i18n-selected” data-i18n-resource=”2322465c82e0dcfd775ecf12a205f017" data-i18n-id=”home.jobs.main.title”>Skills in the spotlight</span>

L’attribut data-i18n-resource contient l’identifiant du projet dans PhraseApp dans lequel la clé de traduction est présente, alors que l’attribut data-i18n-id est le nom de la clé de traduction et également son identifiant unique.

Front

Au niveau du navigateur cette fois-ci, à l’activation de la fonctionnalité par un traducteur, du code javascript va lire le contenu du DOM à la recherche des balises soigneusement préparées côté serveur, décorer les textes traduits, et capturer les clics pour ouvrir le panneau de traduction.

Lors de la sauvegarde, on fait un appel à l’api de PhraseApp pour l’enregistrer les nouvelles informations de traduction.

Une fois l’enregistrement validé, la traduction est immédiatement visible dans PhraseApp. Le nouveau message sera pris en compte et affiché en intégration lors du prochain déploiement suite à une synchronisation des messages de traduction.

Informations complémentaires

La fonctionnalité de traduction “on site” a été activée uniquement sur notre environnement d’intégration grâce à un feature flag, ce qui présente deux avantages. D’une part, l’accès à l’outil de traduction est activé pour des personnes qui ont un compte avec un rôle spécifique uniquement présent sur cet environnement. D’autre part les traducteurs peuvent travailler sur des fonctionnalités en cours de développement avant leur sortie en production.

Limitations

Il n’y a pas de solution parfaite, et notre première implémentation souffre de deux limitations qui impactent l’expérience utilisateur et que l’on aimerait améliorer rapidement.

  • Il y a certains emplacements sur le site pour lesquels on ne peut pas ajouter l’élément HTML pour la traduction en direct sur le site. C’est le cas par exemple des balises <title>, des placeholder des champs de saisie, des traductions utilisées par du javascript, etc.
Exemple de titre de page cassé lorsque l’outil de traduction sur site est activé

Sont concernées toutes les traductions avec lesquelles un utilisateur ne peut pas interagir directement.

On a réussi à détecter la plupart de ces cas grâce à la stratégie d’escaping demandée pour l’affichage de la traduction. On a également ajouté un attribut à la taglib message pour exclure explicitement certaines traductions sur le site.

Par exemple :

<title><spring:message code="dashboard.links.recommendations" inline="false"/></title>

Il reste néanmoins un effort à faire pour parcourir l’ensemble des pages du site, détecter et corriger les cas problématiques.

  • Les nouvelles traductions saisies ne sont pas immédiatement visibles sur le site. Une fois qu’un traducteur a entré un nouveau texte, il est bien sauvegardé dans la base de traduction, en revanche il n’est pas modifié en direct sur le site.
    C’est assez perturbant pour un traducteur et l’expérience sur le site peut être assez déceptive. (La traduction à jour apparaît toutefois une fois le panneau de traduction ouvert, ce qui évite tout conflit)

Les axes d’amélioration

Comme on pu le voir précédemment, les messages à traduire qui ne sont pas directement cliquables depuis les zones surlignées sur la page ne sont pas accessibles. Ils ne sont même pas visibles à partir de l’interface web.

On aimerait proposer une vue alternative avec l’ensemble des clés de traductions présentes sur la page, une navigation facilitée entre les différentes clés, ainsi que la saisie des traductions de la page en série sans avoir à lâcher le clavier.

Une implémentation possible serait de précharger, côté serveur, l’ensemble des clés utilisées sur une page, de stocker cette information, puis d’aller récupérer les traductions lors de l’activation de la fonctionnalité sur le site côté client.

Une bonne stratégie de cache serait la bienvenue, à la fois pour réduire le nombre d’appels à l’api de PhraseApp et également pour accélérer le chargement des traductions et de ce fait avoir une navigation plus fluide sur le site.

Enfin, l’ergonomie de l’interface n’est pas exceptionnelle et mérite d’être repensée, en travaillant avec un designer de l’équipe.

Vers la traduction coopérative ?

source: disney / pixar : toy story 3

Des sociétés telles que Facebook ou Atlassian ont un programme de traduction coopérative “crowd translation” ouvert à tous les utilisateurs de leurs solutions afin de contribuer à améliorer la qualité leurs outils.

Avec le nouvel outil de traduction en direct sur le site, nous avons une opportunité de proposer une offre similaire aux utilisateurs de Malt.

Qu’est-ce que vous en pensez, est-ce que vous aimeriez l’utiliser pour participer à la traduction sur Malt ?