{"id":2386,"date":"2012-04-16T08:46:42","date_gmt":"2012-04-16T06:46:42","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2386"},"modified":"2015-01-18T16:08:53","modified_gmt":"2015-01-18T15:08:53","slug":"html5-attribut-translate","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-attribut-translate","title":{"rendered":"HTML5 – Attribut translate"},"content":{"rendered":"

HTML5 nous apporte l’attribut translate<\/code>. Cet attribut permet de limiter l’impact d’une traduction par des outils tels que Google Translate en interdisant la traduction de certains contenus.
\nAinsi le contenu de votre site web est compos\u00e9 avec davantage de pr\u00e9cision. Voyons comment agir et sur quoi appliquer cet attribut.<\/p>\n

D\u00e9finition<\/h2>\n

Le W3C d\u00e9finit cet attribut translate<\/a> comme \u00e9tant :<\/p>\n

[…] un attribut \u00e0 valeurs \u00e9num\u00e9r\u00e9es* utilis\u00e9 pour sp\u00e9cifier si les valeurs d’attribut d’un \u00e9l\u00e9ment et les valeurs textuelles de ses enfants doivent \u00eatre traduits lorsque la page est localis\u00e9e, ou si elles doivent rester inchang\u00e9es.<\/p>\n

*c’est \u00e0 dire qu’il a des valeurs pr\u00e9vues bien pr\u00e9cises<\/small><\/p><\/blockquote>\n

Je l’ai r\u00e9sum\u00e9 dans l’intro, en somme cela vous permet de d\u00e9finir quelles parties de votre document sont traduisibles.<\/p>\n

Utilisation<\/h2>\n

Cet attribut attend des valeurs pr\u00e9cises que sont \u00ab\u00a0no<\/code> », \u00ab\u00a0yes<\/code>\u00a0\u00bb ou encore une chaine vide (valeur par d\u00e9faut). La chaine vide ou le \u00ab\u00a0yes<\/code>\u00a0\u00bb ont valeur \u00e9quivalente : le contenu sera traduit.
\nPour d\u00e9finir un \u00e9l\u00e9ment comme n’\u00e9tant pas sujet \u00e0 traduction, voici comment proc\u00e9der.<\/p>\n

<span translate=\"no\" class=\"author\">Hope<\/span><\/code><\/pre>\n
Sur un document d\u00e9finit originellement en anglais et traduit ponctuellement en fran\u00e7ais, \u00ab\u00a0Hope<\/em>\u00a0\u00bb ne sera ainsi pas traduit par \u00ab\u00a0Esp\u00e9rer\u00a0\u00bb. Cela permet \u00e0 l’auteur de conserver son vrai pseudonyme \ud83d\ude42<\/p>\n
Si l’ancre de l’exemple avait \u00e9t\u00e9 porteuse d’un attribut title<\/code> ou alt<\/code>, son contenu n’aurait \u00e9galement pas \u00e9t\u00e9 traduit, d’apr\u00e8s la d\u00e9finition donn\u00e9e par le W3C.<\/p>\n
Quelques exemples<\/h2>\n
Le pseudo, le nom, le pr\u00e9nom …<\/h3>\n
C’est le cas de l’exemple pr\u00e9c\u00e9dent : le nom ou pseudonyme d’un auteur, ou le nom d’un programme, par exemple, n’ont a priori pas \u00e0 \u00eatre traduits.
\nDans les classiques espaces \u00ab\u00a0Auteur\u00a0\u00bb des blogs, il conviendrait d’utiliser syst\u00e9matiquement la valeur no<\/code> de translate<\/code> sur l’\u00e9l\u00e9ment balisant le pseudo de l’auteur.<\/p>\n
Article \u00e9crit par <a translate=\"no\" class=\"author\" href=\"\/auteur\/pierre\">Pierre<\/a><\/code><\/pre>\n
Ici on part du principe que notre page est en fran\u00e7ais, le pr\u00e9nom Pierre ne sera pas traduit par Peter lors d’une traduction du fran\u00e7ais vers l’anglais, gr\u00e2ce \u00e0 notre intervention.<\/p>\n
Cheat mode, transcription, ligne de commande …<\/h3>\n
Imaginions que vous lisiez des articles en anglais sur un cheat mode pour un jeu, mais que l’article vous semble trop obscure dans sa langue originelle. Hop, un coup de Google translate, et l\u00e0, c’est le drame, vos codes sont aussi traduits !
\nJe prends l’exemple d’un code d’un jeu auquel j’ai jou\u00e9 de nombreuses heures (je vous laisse trouver son nom) :<\/p>\n
You can also use this code to get a car for the game :<br>\r\n<kbd>HOW DO YOU TURN THIS ON<\/kbd><\/code><\/pre>\n
Ceci serait alors traduit par :
\nVous pouvez \u00e9galement utiliser ce code pour obtenir une voiture pour le jeu : COMMENT vous activez cette fonction<\/samp><\/p>\n
Nous aurions pu sauver le code simplement en pr\u00e9voyant le coup :<\/p>\n
You can also use this code to get a car for the game :<br>\r\n<kbd translate=\"no\">HOW DO YOU TURN THIS ON<\/kbd><\/code><\/pre>\n
Celui-ci n’aurait alors pas \u00e9t\u00e9 vulgairement traduit.<\/p>\n
Attention \u00e0 l’h\u00e9ritage<\/h2>\n
Lorsque vous d\u00e9finissez un \u00e9l\u00e9ment comme n’\u00e9tant pas traduisible, ses enfants h\u00e9ritent de cet aspect et ne sont eux-m\u00eames pas traduisibles.
\nPour corriger le tir il suffit de re-d\u00e9finir la valeur yes<\/code> de translate<\/code> sur les enfants.<\/p>\n
<p translate=\"no\">Texte qui ne doit pas \u00eatre traduit \u00e0 part\r\n<span translate=\"yes\">cette partie<\/span> qui peut l'\u00eatre.<\/p><\/code><\/pre>\n
\"Barre<\/p>\n
Pour rappel, Google Chrome, qui est de plus en plus utilis\u00e9, int\u00e8gre cet outil de traduction et le propose d\u00e8s que vous \u00eates sur une page de langue \u00e9trang\u00e8re (pour votre navigateur).
\nLa traduction de contenu est donc chose courante, je le vois sur mes outils d’analyse sur ce blog, mais bien entendu tout d\u00e9pend de la cible de votre site internet.<\/p>\n
N’h\u00e9sitez pas \u00e0 venir me corriger si vous voyez une b\u00eatise \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5 nous apporte l’attribut translate. Cet attribut permet de limiter l’impact d’une traduction par des outils tels que Google Translate en interdisant la traduction de certains contenus. Ainsi le contenu de votre site web est compos\u00e9 avec davantage de pr\u00e9cision. Voyons comment agir et sur quoi appliquer cet attribut.<\/p>\n","protected":false},"author":4,"featured_media":2395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[416,16,453,452],"coauthors":[597],"class_list":["post-2386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-attribut","tag-html5","tag-i18n","tag-translate"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/2386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=2386"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/2386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/2395"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=2386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=2386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=2386"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=2386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}