Pour commencer, Il est important de comprendre que lorsqu\u2019on parle de contenu statique, nous parlons de texte qui est d\u00e9fini \u00e0 l\u2019avance \u00e0 l\u2019int\u00e9rieur du code de l\u2019application et non pas de texte qui ne change jamais. Un exemple pourrait \u00eatre un libell\u00e9 qui indique le nombre de r\u00e9sultats d\u2019une requ\u00eate:<\/p>\n\n\n\n Aussi simple ces deux mots puissent para\u00eetre, ils ont \u00e9norm\u00e9ment de subtilit\u00e9s et les voici. <\/p>\n\n\n\n L\u2019un des aspects qui varie le plus d\u2019une langue \u00e0 l\u2019autre est la mani\u00e8re de g\u00e9rer le pluriel. Il est dangereux de supposer que les r\u00e8gles sont identiques, m\u00eame au sein d\u2019une m\u00eame famille linguistique.<\/p>\n\n\n\n Un pi\u00e8ge par lequel \u00e9norm\u00e9ment de personnes se font prendre est de simplement ajouter un s lorsqu\u2019il y a plus d\u2019un r\u00e9sultat. Par exemple, en JavaScript, on pourrait l\u2019\u00e9crire ainsi:<\/p>\n\n\n\n Malgr\u00e9 sa simplicit\u00e9, ce code comporte plusieurs erreurs :<\/p>\n\n\n\n D\u2019abord, en fran\u00e7ais comme en anglais, tous les mots ne prennent pas un \u00ab s \u00bb au pluriel. Il existe de nombreux mots irr\u00e9guliers, comme \u00ab cheval \u00bb qui devient \u00ab chevaux \u00bb en fran\u00e7ais, ou \u00ab octopus \u00bb qui peut devenir \u00ab octopi \u00bb ou \u00ab octopuses \u00bb en anglais. M\u00eame en codant une logique pour g\u00e9rer les exceptions, ces r\u00e8gles varient d\u2019une langue \u00e0 l\u2019autre.<\/p>\n\n\n\n Ensuite, la r\u00e8gle grammaticale diff\u00e8re pour le cas du z\u00e9ro. En anglais, on accorde g\u00e9n\u00e9ralement le nom au pluriel m\u00eame en l\u2019absence d\u2019objet, comme dans \u00ab There are no results \u00bb. Il faut donc afficher \u00ab 0 results \u00bb, alors qu\u2019en fran\u00e7ais, on \u00e9crit \u00ab 0 r\u00e9sultat \u00bb, au singulier.<\/p>\n\n\n\n La meilleure solution consiste \u00e0 utiliser les fonctions de gestion du pluriel fournies par les biblioth\u00e8ques d\u2019internationalisation. Chaque langue traduite aura donc ses propres d\u00e9clinaisons de chaque cha\u00eene de caract\u00e8res accord\u00e9es selon le nombre d\u2019entr\u00e9es.<\/p>\n\n\n\n Voici un exemple avec la librairie JavaScript i18n-js:<\/p>\n\n\n\n M\u00eame si les r\u00e8gles sont similaires pour le fran\u00e7ais et l\u2019anglais, d\u2019autres langues pr\u00e9sentent bien plus de complexit\u00e9. Les biblioth\u00e8ques modernes permettent g\u00e9n\u00e9ralement de les g\u00e9rer correctement.<\/p>\n\n\n\n Il est crucial de reconna\u00eetre que les r\u00e8gles grammaticales de comptage varient consid\u00e9rablement d’une langue \u00e0 l’autre. Avant de se lancer dans la traduction, il est imp\u00e9ratif de mener une recherche approfondie sur les r\u00e8gles sp\u00e9cifiques de la langue cible. Une compr\u00e9hension solide de ces r\u00e8gles est essentielle pour \u00e9viter des erreurs co\u00fbteuses et garantir une communication claire et pr\u00e9cise. Vous pouvez trouver un article (en anglais) qui explique diff\u00e9rentes r\u00e8gles de pluriel ici<\/a>.<\/p>\n\n\n\n Il est facile de tomber dans le pi\u00e8ge qui consiste \u00e0 croire que toutes les langues suivent le m\u00eame ordre de mots que le fran\u00e7ais ou l\u2019anglais.<\/p>\n\n\n\n Chez Rum&Code, m\u00eame si nos applications sont principalement traduites en anglais et en fran\u00e7ais, nous pr\u00e9parons d\u00e8s le d\u00e9part nos interfaces pour qu\u2019elles puissent s\u2019adapter facilement \u00e0 d\u2019autres langues, sans n\u00e9cessiter de modifications majeures du code.<\/p>\n\n\n\n En japonais, par exemple, l’ordre des mots diff\u00e8re de celui du fran\u00e7ais. Le nombre suit g\u00e9n\u00e9ralement le nom. Ainsi, l’expression \u00ab 5 r\u00e9sultats \u00bb se traduirait par \u7d50\u679c\u304c5\u4ef6 (kekka ga 5 ken). Dans cette formulation, \u7d50\u679c (kekka) signifie r\u00e9sultats, \u304c (ga) est une particule grammaticale, 5 repr\u00e9sente le nombre et \u4ef6 (ken) est un classificateur num\u00e9rique utilis\u00e9 pour d\u00e9signer des objets physiques ou des documents.<\/p>\n\n\n\n C\u2019est pour cette raison qu\u2019il est crucial de toujours traduire des phrases compl\u00e8tes et non des mots isol\u00e9s. Chaque langue a sa propre structure, et il faut en tenir compte pour que le r\u00e9sultat soit naturel et correct.<\/p>\n\n\n\n Voici comment utiliser la librairie de notre exemple pr\u00e9c\u00e9dent avec l\u2019ajout du Japonais:<\/p>\n\n\n\n Certaines langues, comme l\u2019arabe ou l\u2019h\u00e9breu, s\u2019\u00e9crivent de droite \u00e0 gauche. Cette diff\u00e9rence fondamentale de direction modifie profond\u00e9ment la fa\u00e7on dont une interface doit \u00eatre con\u00e7ue.<\/p>\n\n\n\n Traduire une application pour ces langues demande d\u2019adapter l\u2019ensemble de l\u2019interface, et pas seulement les textes. Il faut repenser l\u2019emplacement des \u00e9l\u00e9ments visuels, les formulaires, les ic\u00f4nes directionnelles et l\u2019ordre de navigation.<\/p>\n\n\n\n Par exemple, sur la version arabe de la page d\u2019accueil de YouTube, tous les \u00e9l\u00e9ments qui apparaissent \u00e0 gauche dans la version anglaise se retrouvent \u00e0 droite. Cela correspond au sens de lecture naturel de l\u2019utilisateur.<\/p>\n\n\n\n Une telle transformation n\u00e9cessite souvent une refonte compl\u00e8te de l\u2019interface. Cela peut devenir tr\u00e8s complexe, surtout si la logique applicative est \u00e9troitement li\u00e9e \u00e0 l\u2019interface, comme c\u2019est souvent le cas avec des librairies telles que React <\/a>ou Vue.JS<\/a>.<\/p>\n\n\n\n Heureusement, CSS contient plusieurs outils tels que les propri\u00e9t\u00e9s logiques comme padding-inline-end pour remplacer les propri\u00e9t\u00e9s physiques comme padding-right. padding-inline-end ajuste le padding \u00e0 la fin de la direction en ligne, s’adaptant automatiquement aux langues allant de gauche \u00e0 droite et de droite \u00e0 gauche. Prenez par exemple la propri\u00e9t\u00e9 padding-inline-end: 20px cette derni\u00e8re fonctionne de mani\u00e8re fluide et se positionne donc automatiquement \u00e0 la fin de la ligne selon la direction du texte, contrairement \u00e0 padding-right: 20px qui sera toujours \u00e0 droite des \u00e9l\u00e9ments. Cette approche r\u00e9duit la quantit\u00e9 de code \u00e0 \u00e9crire pour am\u00e9liorer l’adaptabilit\u00e9.<\/p>\n\n\n\n Pour en apprendre plus sur la directionnalit\u00e9 du texte, vous pouvez vous r\u00e9f\u00e9rer \u00e0 cet article sur\u00a0 MDN (Mozilla Developer Network): G\u00e9rer la directionnalit\u00e9 du texte – Apprendre le d\u00e9veloppement web | MDN<\/a><\/p>\n\n\n\n Les textes d\u2019une application ne sont pas tous \u00e9quivalents au niveau de la traduction. Le contenu dynamique est sans doute l\u2019\u00e9l\u00e9ment le plus complexe \u00e0 traduire. Il s\u2019agit de texte qui \u00e9volue au fil de l\u2019utilisation de l\u2019application, g\u00e9n\u00e9r\u00e9 par les utilisateurs eux-m\u00eames ou par des syst\u00e8mes externes. Contrairement au contenu statique, ce texte n\u2019est pas d\u00e9fini dans le code.<\/p>\n\n\n\n Un bon exemple de contenu dynamique est l\u2019article que vous lisez actuellement. Aucun code n\u2019a \u00e9t\u00e9 \u00e9crit pour l\u2019ajouter \u00e0 notre site. La traduction de contenu dynamique est complexe, car elle doit s\u2019adapter \u00e0 la logique d\u2019affaire de l\u2019application. Chaque type de contenu peut n\u00e9cessiter une strat\u00e9gie de traduction diff\u00e9rente. Explorons trois approches, \u00e0 travers le cas d\u2019un blogue.<\/p>\n\n\n\n Une premi\u00e8re approche consiste \u00e0 ajouter un identifiant sur chaque article pour indiquer la langue dans laquelle il a \u00e9t\u00e9 r\u00e9dig\u00e9. Ainsi, chaque article est associ\u00e9 \u00e0 une langue.<\/p>\n\n\n\n Cette m\u00e9thode pr\u00e9sente l\u2019avantage d\u2019\u00eatre simple \u00e0 mettre en \u0153uvre. Il suffit d\u2019ajouter une colonne dans la base de donn\u00e9es et de filtrer les articles affich\u00e9s en fonction de la langue de l\u2019interface utilisateur.<\/p>\n\n\n\n Cependant, cette simplicit\u00e9 a un co\u00fbt. Il faut appliquer des filtres sur chaque page o\u00f9 les articles sont affich\u00e9s, ce qui peut devenir fastidieux selon la taille de l\u2019application. De plus, les articles ne sont pas r\u00e9ellement traduits, mais existent en plusieurs versions parall\u00e8les. Si un article est partag\u00e9, rien ne garantit que le lecteur sera redirig\u00e9 vers la version dans sa langue, ce qui peut n\u00e9cessiter une logique suppl\u00e9mentaire assez lourde \u00e0 maintenir.<\/p>\n\n\n\n Une deuxi\u00e8me approche pour r\u00e9gler le probl\u00e8me du contenu dynamique, peut \u00eatre d’ajouter des colonnes avec un identifiant de langue. En d’autres mots, si notre mod\u00e8le ressemblait \u00e0 ceci:<\/p>\n\n\n\n Nous pourrions le modifier pour ajouter des colonnes traduites et indiquer la langue du contenu dans le nom de chaque colonne, par exemple, comme ceci:<\/p>\n\n\n\n L\u2019avantage ici, est que la gestion des articles sera significativement plus simple. Il suffit d\u2019ajuster notre code pour lire la bonne colonne selon la langue de l\u2019utilisateur.<\/p>\n\n\n\n Cependant, cette solution implique plusieurs contraintes:<\/strong><\/p>\n\n\n\n Cette m\u00e9thode est efficace si l\u2019on ne pr\u00e9voit que deux langues, mais elle devient difficilement viable d\u00e8s que le nombre de langues augmente.<\/p>\n\n\n\n Une troisi\u00e8me approche serait de cr\u00e9er une table de traductions qui sera utilis\u00e9e par toutes nos tables en base de donn\u00e9es. Une table de ce genre contient typiquement cinq colonnes:<\/strong><\/p>\n\n\n\n Cette m\u00e9thode offre une grande flexibilit\u00e9. Elle \u00e9vite de modifier le sch\u00e9ma de base de donn\u00e9es \u00e0 chaque nouvelle langue, et centralise la gestion de la traduction.<\/p>\n\n\n\n Toutefois, cette flexibilit\u00e9 a un prix. Si la table devient trop volumineuse, elle peut ralentir l\u2019ensemble de l\u2019application. Il est donc essentiel de mettre en place des m\u00e9canismes de surveillance des performances et d\u2019optimisation pour garantir la stabilit\u00e9 de l\u2019application.<\/p>\n\n\n\n Une fois votre architecture de traduction mise en place, la question devient : comment obtenir les traductions ? Collaborer avec des traducteurs externes n\u00e9cessite de choisir la bonne approche selon vos besoins et votre budget.<\/p>\n\n\n\n L’approche la plus directe consiste \u00e0 fournir les fichiers de traduction aux traducteurs. Le format de ces fichiers va varier selon la librairie utilis\u00e9e. Voici quelques exemples de formats:<\/p>\n\n\n\n Les fichiers .po de gettext, utilis\u00e9s par Elixir Phoenix:<\/p>\n\n\n\n Cette m\u00e9thode est simple et gratuite, mais pr\u00e9sente certains d\u00e9fis : les traducteurs doivent comprendre la syntaxe technique, il n’y a pas de validation automatique, et la gestion des versions devient complexe avec plusieurs collaborateurs.<\/p>\n\n\n\n Pour une approche plus professionnelle, particuli\u00e8rement quand il y a beaucoup de contenu \u00e0 traduire, plusieurs langues cibles, ou une cadence de d\u00e9veloppement n\u00e9cessitant des traductions fr\u00e9quentes, des outils comme Accent<\/a> (open source, auto-h\u00e9berg\u00e9) offrent une interface conviviale pour les traducteurs, avec validation automatique et gestion des versions. L’inconv\u00e9nient ? Il faut maintenir l’infrastructure.<\/p>\n\n\n\n![\"\"](\"https:\/\/rumandcode.io\/app\/uploads\/2025\/06\/article-de-blogue-a-simon-2.png\")
<\/figure>\n\n\n\nLe pluriel<\/h3>\n\n\n\n
![\"\"](\"https:\/\/rumandcode.io\/app\/uploads\/2025\/06\/pluriel-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/rumandcode.io\/app\/uploads\/2025\/06\/pluriel-2.png\")
<\/figure>\n\n\n\nL\u2019ordre des mots<\/h3>\n\n\n\n
![\"\"](\"https:\/\/rumandcode.io\/app\/uploads\/2025\/06\/pluriel-3.png\")
<\/figure>\n\n\n\nLa direction du texte<\/h3>\n\n\n\n
![\"\"\/](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdlw9OMEwPjmMsigUVtNzThq1GUN57AlPRh2ZAB7-KG8IRasJ5w1eJ7iPsRJRjon94xPet6qyI_88QgpK7N4d4q-FPiZwyKHZJtrrvGVKyHMJCJpeLDi8sDzkNm9yrRXP_9Bhee5g?key=y-7WKaSBaAxtWMyE_Loe4A\")
![\"\"\/](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeAvgDPibPCIb3iMo4KbmuEzRKX6qhc0s5J0a-T3m8e-LsAfV8vUhA8miGuAFXae17VFnTxxOA4G8dm7LQ5ztYIFELrsuiQKO-HuDJ_fN3jXhLDka3oga8YRlnN2Vo2iTmNxNfb4w?key=y-7WKaSBaAxtWMyE_Loe4A\")
Le contenu dynamique<\/h1>\n\n\n\n
Utilisation d’un identifiant de langue<\/h3>\n\n\n\n
Utilisation de colonnes traduites<\/h3>\n\n\n\n
Id<\/strong><\/td> Titre<\/strong><\/td> Contenu<\/strong><\/td><\/tr> 1<\/strong><\/td> Bonjour le monde<\/td> Lorem ipsum dolor sit amet.<\/td><\/tr> 2<\/strong><\/td> Un nouveau d\u00e9part<\/td> Suspendisse et felis ornare, mollis.<\/td><\/tr> 3<\/strong><\/td> Annonce<\/td> Nam vitae dui ultrices, maximus.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Id<\/strong><\/td> Titre_FR<\/strong><\/td> Titre_EN<\/strong><\/td> Contenu_FR<\/strong><\/td> Contenu_EN<\/strong><\/td><\/tr> 1<\/strong><\/td> Bonjour le monde<\/td> Hello world<\/td> Lorem ipsum dolor sit amet.<\/td> Mauris porttitor turpis a arcu.<\/td><\/tr> 2<\/strong><\/td> Un nouveau d\u00e9part<\/td> A new start<\/td> Suspendisse et felis ornare, mollis.<\/td> Etiam ultricies quis augue at.<\/td><\/tr> 3<\/strong><\/td> Annonce<\/td> Announcement<\/td> Nam vitae dui ultrices, maximus.<\/td> Proin aliquet turpis ac fermentum.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n \n
Utilisation d\u2019une table de traduction<\/h3>\n\n\n\n
\n
Les sources de traductions<\/h2>\n\n\n\n
Fichiers de traduction simples<\/h3>\n\n\n\n
![\"\"](\"https:\/\/rumandcode.io\/app\/uploads\/2025\/06\/fichier-traduction-1.png\")
<\/figure>\n\n\n\n
Les fichiers .yaml, utilis\u00e9s par Ruby on Rails et i18n-js :<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/rumandcode.io\/app\/uploads\/2025\/06\/fichier-traduction-2.png\")
<\/figure>\n\n\n\nSolutions sp\u00e9cialis\u00e9es<\/h3>\n\n\n\n