Branchlate· Article 2 sur 2

Le défi : modifier un texte dans l'app, sans toucher à l'app

Pour éditer un texte directement sur la page, l'extension Chrome doit savoir de quelle clé il vient. La réponse tient dans des caractères qui ne s'affichent pas.

15 septembre 20264 min de lectureRead in English

Le métier ne lit pas de JSON. Il voit un bouton qui dit « Commander » et voudrait qu'il dise « Valider ma commande ». L'idéal : ouvrir l'application, cliquer sur le texte, le corriger, et c'est tout.

C'est le rôle de l'extension Chrome de Branchlate. Elle pose une petite pastille à côté de chaque texte traduit de la page, et un clic ouvre l'éditeur, avec le texte dans toutes les langues.

Le défi. Sur une page affichée, un texte n'est qu'un texte : rien ne dit de quelle clé de traduction il vient. Deux clés peuvent même afficher le même mot. Et pas question de demander aux équipes d'ajouter un SDK, des attributs ou un build spécial.

Les options

Un SDK dans l'appà intégrer, puis à maintenir, dans chaque app
Des attributs dans le HTMLun build spécial, des composants modifiés
Une pseudo-languemontre qu'un texte est traduit, pas lequel
Un marqueur invisiblerien à changer dans l'app

Quatre façons de relier un texte affiché à sa clé. Seule la dernière ne demande rien aux équipes qui utilisent l'app.

Cacher la clé dans le texte

Unicode contient des caractères qui ne s'affichent pas : des espaces de largeur nulle, des liants. Le navigateur les garde dans le texte, mais ne les dessine pas. Quatre d'entre eux suffisent pour écrire un nombre en base 4 : le numéro de la clé, caché dans son propre texte.

checkout.submit · fr

préfixe 00103102₄ = 1 234

0U+200Bzero width space
1U+200Czero width non-joiner
2U+200Dzero width joiner
3U+2060word joiner

mapping[00103102] → checkout.submit"Commander".length → 17 (au lieu de 9)

Quatre caractères qui ne s'affichent pas font quatre chiffres : chaque texte porte, juste après sa première lettre, son numéro en base 4. Quelques caractères suffisent pour des milliers de clés. Le texte paraît identique, mais sa longueur change : c'est un outil de prévisualisation, jamais la production.

Du fichier de langue à la pastille

L'astuce, c'est que l'app charge déjà ses textes depuis un fichier de langue. Il suffit que l'extension le fasse servir par Branchlate, avec les textes de la branche, marqués. L'app affiche ces textes comme d'habitude, sans rien savoir.

01extension
DétourneLe fichier de langue que l'app demande est servi par Branchlate.
02serveur
MarqueChaque texte reçoit son numéro, invisible.
03extension
RelieElle récupère la table qui associe chaque numéro à sa clé.
04page
RepèreElle cherche les numéros dans la page et pose une pastille sur chaque texte visible.
05éditeur
ÉditeUn clic ouvre l'éditeur ; le texte validé apparaît au rechargement.

Aucun SDK, aucun attribut, aucun build spécial : tout passe par le fichier de langue que l'app charge déjà. Les textes qui apparaissent plus tard dans la page sont suivis aussi.

Essayez

Extension BranchlateCliquez une pastille blanche

staging.acme.shop/panier

Votre panier

Carnet A512.00 CHF
Stylo plume24.50 CHF

Total36.50 CHF

Commander

En commandant, vous acceptez nos conditions.

Enregistré dans Branchlate

Reconstitution jouable, sur une boutique d'exemple. Comme avec la vraie extension, une modification est enregistrée tout de suite, mais n'apparaît qu'au rechargement de la page.

Les limites, assumées

Les nœuds texte seulement : le texte d'aide d'un champ ou une étiquette d'accessibilité n'a pas de pastille.
Des fichiers de langue chargés par le navigateur : une page entièrement rendue côté serveur ne passe pas par l'extension.
Un outil de prévisualisation : les caractères invisibles changent la longueur des chaînes. Ils ne vont jamais en production.

Ce que j'en retiens

Passer par ce qui existe déjà : le fichier de langue que l'app charge de toute façon.
Un encodage simple et robuste vaut mieux qu'une intégration à maintenir dans chaque app.