Utiliser l’attribut HTML translate

Question

À quoi sert l’attribut translate et comment dois-je l’utiliser ?

Réponse courte

L’attribut translate en HTML5 indique que le contenu de l’élément doit ou ne doit pas être traduit. Il n’y a aucune conséquence sur l’impression (vous pouvez bien sûr la paramétrer si vous le voulez). Par exemple,

<h1>Utiliser l’attribut HTML <span class="kw" translate="no">translate</span></h1>

L’attribut peut apparaître sur tout élément et n’accepte que deux valeurs : yes ou no. Si la valeur est no, les outils de traduction doivent empêcher que le texte de l’élément soit traduit. L’outil de traduction en question peut être un moteur de traduction automatique, à l’image de ceux utilisés dans les services en ligne offerts par Google, Microsoft et Yandex. Il peut aussi s’agir d’un traducteur utilisant un outil d’aide à la traduction, ce qui éviterait que le traducteur modifie le texte par inadvertance.

Appliquer l’indicateur de traduction sur un élément renvoie la valeur à l’ensemble des éléments du contenu. HTML 5 est composé d’une liste d’attributs qui doivent être traduits par défaut et qui ne doivent pas être traduits s’ils sont rattachés à un élément pour lequel translate est paramétré avec no. Sinon, les attributs ne doivent pas être traduits.

Si une page n’a pas l’attribut translate, un système de traduction ou un traducteur doit supposer que tout le texte est à traduire. Il est donc probable que la valeur yes soit très peu utilisée, bien qu’elle puisse être très utile si vous devez forcer un indicateur de traduction sur un élément parent et préciser que quelques caractères doivent être traduits. Vous voudrez peut-être traduire le langage naturel du texte dans des exemples de code source, mais ne pas traduire le code.

Details

Pourquoi est-ce nécessaire ?

Ajouter l’attribut translate à votre page peut aider les lecteurs à bien comprendre votre contenu lorsqu’ils le soumettent à un système de traduction automatique. Cela représente un gain important de temps et d’argent et évite un travail pénible pour des fournisseurs de traductions aux cadences élevées de production en plusieurs langues.

Vous vous trouverez confrontés à cette situation assez souvent. Il existe un exemple en HTML5 pour le jeu Bee Game. Voici un exemple similaire, mais réel dans lequel la documentation qui doit être traduite fait référence à une machine dont le texte anglais sur le panneau du matériel n’était pas traduit.

<p>Click the Resume button on the Status Display or the
<span class="panelmsg" translate="no">CONTINUE</span> button
on the printer panel.</p>

La traduction en allemand se présentera ainsi :

<p>Drücken Sie Fortsetzen in der Statusanzeige oder die
Taste <span class="panelmsg" translate="no">CONTINUE</span>
an Ihrem Drucker.</p>

Voici d’autres exemples de la vie quotidienne qui illustrent l’avantage de l’utilisation de l’attribut translate. Le premier provient d’un ouvrage dans lequel est citée une œuvre dont le titre doit rester dans sa langue d’origine.

<p>La question dans le titre <cite translate="no">How Far Can You Go?</cite> s’applique à la fois au sapement d’une croyance religieuse traditionnelle par la théologie radicale et au sapement de la convention littéraire par la technique du « cadre brisé »...</p>

L’exemple suivant est issu d’une page en anglais au sujet du pain français. Le code ne contient pas l’attribut translate pour le mot pain. Comme l’original est en anglais, une traduction automatique traduira le terme anglais pain comme une sensation physique très désagréable, plutôt que comme un aliment.

<p>Welcome to <strong>french pain</strong> on Facebook. Join now to write reviews and connect with <strong>french pain</strong>. Help your friends discover great places to visit by recommending <strong>french pain</strong>.</p>

Il serait préférable d’ajouter translate="no" aux éléments strong (il serait également utile pour des fonctionnalités telles que les navigateurs vocaux, d’encadrer le terme pain par <span lang="fr">...</span>.)

Vous voudrez peut-être aussi l’utiliser pour éviter que des mots-clés, des éléments de codes ou des exemples ne soient traduits. Dans le premier paragraphe de l’exemple ci-dessous, le balisage qui ressemble à du texte anglais ordinaire est protégé contre la traduction automatique. Le code source du deuxième paragraphe garantit que le paragraphe reste intégralement en anglais.

<p>Here is an example of the <span class="kw" translate="no">label<span> element using the <span class="kw" translate="no">for</span> attribute:</p>

<code translate="no">&lt;label for="postcode"&gt;Enter your postcode to find the nearest store:&lt;/label&gt; &lt;input id="postcode" type="text"&gt;</code>

Quand utiliser la valeur="yes"

La valeur yes de l’attribut translate est principalement utilisée pour forcer le résultat du paramétrage de l’attribut avec no. Par exemple, vous voudrez peut-être que le texte du code source en langage naturel ci-dessus soit traduit tout en protégeant le code lui-même (c’est-à-dire les mots-clés tels que label, for, postcode, input, etc.). Il serait possible de procéder ainsi en entourant le texte du langage naturel avec des éléments qui comportent l’attribut translate.

<p>Here is an example of the <span class="kw" translate="no">label<span> element using the <span class="kw" translate="no">for</span> attribute:</p>

<code translate="no">&lt;label for="postcode"&gt;<span translate="yes">Enter your postcode to find the nearest store</span>:&lt;/label&gt; &lt;input id="postcode" type="text"&gt;</code>

Travailler avec les attributs

Travailler avec des valeurs d’attribut en traduction peut poser des problèmes. En général, les valeurs d’attribut font partie de la syntaxe de la page et ne doivent donc pas être traduites. Si elles le sont, la page sera interrompue. Dans certains cas cependant, les valeurs contiennent du texte lisible (par exemple celles des attributs title, alt, and placeholder en HTML), bien que cela ne soit pas recommandé.*

Par exemple, il est impossible d’utiliser une balise pour des valeurs d’attribut afin de gérer du texte bidirectionnel dans des langues telles que l’arabe ou l’hébreu, ou de baliser de tels éléments comme des changements de langues. Bien sûr, il peut être difficile de déterminer quelles sont les valeurs d’attribut qui doivent être traduites et celles qui ne le doivent pas. Il est également difficile d’identifier une partie d’une valeur d’attribut qui ne doit pas être traduite ou une valeur d’attribut qui ne doit pas être traduit, mais dont le contenu de l’élément est traduit.

La spécification HTML liste les attributs qui doivent être considérés comme traduisibles. Les valeurs d’attribut qui n’apparaissent pas dans la liste ne doivent pas être traduites.

Si une valeur d’attribut « traduisible » apparaît sur un élément pour lequel translate est réglé sur no, la valeur d’attribut ne sera pas traduite.

Cela peut bien sûr poser un problème dans les cas où vous voulez vraiment que les valeurs d’attribut soient traduites, mais pas le contenu de l’élément, ou inversement. Dans certains cas, il est possible que cela soit facilité en insérant la balise concernée. Par exemple, vous pouvez avoir un élément extérieur span avec translate réglé sur yes attaché à l’attribut title que vous voulez traduire. Vous pouvez insérer à l’intérieur de l’attribut span un autre attribut span pour lequel translate est réglé sur no et qui possède le contenu de l’élément. C’est ainsi que les articles comme celui que vous lisez comportent des liens vers des versions traduites d’une page – l’attribut title de l’élément extérieur contient le nom de la langue cible et l’élément intérieur contient le nom de cette langue dans le langage lui-même (qui ne doit pas être modifié). Cela facilite également l’étiquetage de la langue en utilisant l’attribut lang.

L’exemple suivant montre comment vous pouvez isoler le mot « Anglais » lorsqu’il s’agit d’un lien vers la version anglaise du document et que vous traduisez une page en allemand dans une autre langue. L’attribut informatif title sera traduit. Sans l’indicateur de traduction, les services en ligne traduisent généralement le mot « Anglais » par l’équivalent en langue cible ou par « Allemand ».

<span title="Englisch"><a href="article.en.html" translate="no" lang="en">English</a></span>

Cependant, parce qu’il s’agit de valeurs d’attribut, il est impossible de préciser si certaines parties du texte de la valeur d’attribut peuvent être exclues de toute traduction.

(N’oubliez pas qu’au moment d’écrire cet article, les spécifications HTML5 ne sont pas encore stables et que des opérations peuvent s’exécuter sans respecter les spécifications.)

Cette approche diffère de l’approche générale recommandée par les normes d’ITS pour les langages XML. ITS (voir ci-dessous) préconise que les valeurs d’attribut ne soient pas traduites par défaut. Il fournit aussi un moyen d’indiquer que des attributs précis doivent être traduits, indépendamment de leur contexte.

Ajouter des indicateurs de traduction à une page

Bien entendu, un auteur soucieux de la présentation de la page traduite peut ajouter l’attribut translate au contenu d’une page. Cela est particulièrement utile pour protéger le contenu lorsque le lecteur soumet la page à un outil de traduction automatique tel que ceux proposés par Google, Microsoft ou Yandex.

Dans les scénarios types de traductions, les localisateurs peuvent ajouter des attributs au cours de l’étape de préparation de la traduction, une façon d’éviter les effets répétitifs des mauvaises traductions dans de nombreuses langues. Cela peut être effectué au moyen de procédures automatisées, telles que des outils de reconnaissance d’entité, qui reconnaissent automatiquement les noms propres.

Il est également possible d’utiliser des fichiers externes pour entre autres signaler quelle balise ne doit pas être traduite. Vous pouvez par exemple vouloir signaler que tous les éléments span rattachés à un type de nom ne doivent pas être traduits. Une façon d’y parvenir est décrite par la spécification Internationalization Tag Set (ITS). Un ensemble de ces règles peut être valable pour une ou plusieurs pages en même temps. Les développeurs et localisateurs de contenu peuvent travailler conjointement en paramétrant ces règles pour faciliter et améliorer la procédure de localisation.

Aide pour l’exécution de l’indicateur de traduction

Le code translate="no" n’est pas pris en charge par les outils de traduction en ligne de Google, de Microsoft et de Yandex au moment de la rédaction du présent article. L’utilisation de translate="yes" pour traduire à l’intérieur d’une partie du document où la traduction est refusée n’est pas pris en charge par l’outil de Microsoft, mais l’est par les deux autres outils.

Voir les derniers résultats des tests.

Le groupe de travail MultilingualWeb-LT, qui travaille sur la spécification Internationalization Tag Set, a rédigé un document, Metadata for the Multilingual Web – Usage Scenarios and Implementations, qui décrit d’autres exemples d’applications et d’utilisations dans lesquels l’indicateur de traduction est reconnu.

Approches traditionnelles pour les services de traduction en ligne

Avant que l’attribut translate ne soit défini, les services de traduction en ligne de Google et Microsoft acceptaient beaucoup d’autres façons non traditionnelles pour exprimer des idées semblables.

Google et Microsoft prennent en charge l’attribut class="notranslate", mais substituer une valeur d’attribut class par un attribut qui est une partie officielle de la langue rend cette fonction plus fiable, particulièrement en contexte substantiel. Un outil de préparation de traduction sera par exemple capable de reconnaître la signification de l’attribut translate en HTML5 en connaissant toujours le résultat d’avance. Il devient aussi facile de transposer ce concept à d’autres scénarios, tels que d’autres API de traduction ou à des normes de localisation telles que XLIFF.

Apparemment, Microsoft prend en charge style="notranslate". Cette option ne se retrouve pas dans les listes d’options du service en ligne de Google. Cependant, Google offre d’autres options que le service de Microsoft ne propose pas.

Si par exemple vous avez une page entière qui ne doit pas être traduite, vous pouvez ajouter <meta name="google" value="notranslate"> à l’intérieur de l’élément head de votre page et Google ne traduira aucun contenu de la page. (Google prend cependant en charge <meta name="google" content="notranslate">.) Cela ne doit pas être propre à Google et la seule façon de procéder ainsi en insérant translate="no" sur l’étiquette html est la solution idéale.

Les moteurs de traduction de Google et de Microsoft ne traduisent pas le contenu des éléments code non plus. Cependant, il semble que vous n’ayez pas le choix pour cela. Il n’y a aucune instruction quant à la façon de contourner ce problème si vous souhaitez vraiment traduire l’élément code.

Comme il a déjà été indiqué, le nouvel attribut translate en HTML5 fournit une caractéristique simple et traditionnelle de HTML qui peut remplacer et simplifier toutes ces différentes méthodes. Cela aidera aussi les auteurs à développer des contenus qui seront compatibles avec d’autres systèmes.