Branchlate· Part 2 of 2

The challenge: editing text in an app, without touching the app

To edit a string right on the page, the Chrome extension has to know which key it comes from. The answer fits in characters that do not render.

September 15, 20264 min readLire en français

The business does not read JSON. They see a button that says “Place order” and would like it to say “Confirm my order”. Ideally: open the application, click the text, fix it, done.

That is the job of Branchlate's Chrome extension. It puts a small dot next to every translated text on the page, and a click opens the editor, with the text in every language.

The challenge. On a rendered page, a string is just a string: nothing says which translation key it came from. Two keys can even show the same word. And asking teams to add an SDK, attributes or a special build was out of the question.

The options

An SDK in the appto integrate, then maintain, in every app
Attributes in the HTMLa special build, modified components
A pseudo-languageshows a text is translated, not which one
An invisible markernothing to change in the app

Four ways to tie a rendered string to its key. Only the last one asks nothing of the teams using the app.

Hiding the key in the text

Unicode has characters that do not render: zero-width spaces, joiners. The browser keeps them in the text but never draws them. Four of them are enough to write a number in base 4: the key's number, hidden in its own text.

checkout.submit · en

prefix 00103102₄ = 1,234

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

mapping[00103102] → checkout.submit"Place order".length → 19 (instead of 11)

Four characters that do not render make four digits: every text carries, right after its first letter, its number in base 4. A few characters are enough for thousands of keys. The text looks the same, but its length changes: this is a preview tool, never production.

From the language file to the dot

The trick is that the app already loads its copy from a language file. The extension only has to have Branchlate serve it, with the branch's texts, marked. The app shows them as usual, without knowing anything.

01extension
RedirectsThe language file the app asks for is served by Branchlate.
02server
MarksEvery text gets its number, invisible.
03extension
LinksIt fetches the table that maps each number to its key.
04page
SpotsIt looks for the numbers in the page and puts a dot on every visible text.
05editor
EditsA click opens the editor; the validated text shows on reload.

No SDK, no attribute, no special build: everything goes through the language file the app already loads. Texts that appear later in the page are followed too.

Try it

Branchlate extensionClick a white dot

staging.acme.shop/cart

Your cart

A5 notebook12.00 CHF
Fountain pen24.50 CHF

Total36.50 CHF

Place order

By ordering, you accept our terms.

Saved in Branchlate

A playable reconstruction, on a sample shop. As with the real extension, an edit is saved at once but only shows when the page reloads.

The limits, accepted

Text nodes only: a field's help text or an accessibility label gets no dot.
Language files loaded by the browser: a page fully rendered on the server does not go through the extension.
A preview tool: invisible characters change string lengths. They never reach production.

What I take from it

Go through what already exists: the language file the app loads anyway.
A simple, robust encoding beats an integration to maintain in every app.