Translating "rich" or structured text

Fluent
#1

Is there a good practice for localizations which include some structure in the returned text, like spans with text attributes (emphasis, color, links, etc.)? Messages like:

The practice I’ve most often seen has been to embed markers in the string and search for them after translation, or (shudder) to parse the translations as HTML. Neither strike me as very good approaches. It would be nice to have some way for the message catalog to return translations with some (small, well-controlled) amount of structure, but I’m not sure what this would look like, exactly.

The usual i18n difficulties apply: an attribute-bearing span in one translation might not appear at all in another language, or may even be disjoint. Spans could potentially overlap or be nested (e.g. links vs emphasis) and the “topology” could differ between languages.

Are there any examples of i18n systems that handle this well? Is there any work on this kind of thing in the Fluent ecosystem?

#2

Hi Wim!

Are you familiar with https://github.com/projectfluent/fluent.js/wiki/DOM-Overlays ?

#3

I’m doing this kind of thing in my app, especially for embedded links. I’m doing it using both django-ftl for server side rendered pages, and elm-fluent for client side.

I have slightly different strategies for these two, due to the nature of the Fluent implementations, but in both I embed HTML directly:

Using django-ftl:

accounts-password-reset-complete-message-html =
    Your password has been set.
    You may go ahead and <a href="{ $login_url }">log in</a> now.

Using elm-fluent:

learn-verse-progress-complete-html =  <b>PROGRESS:</b> You reached 100% - well done!

learn-you-can-change-your-testing-method-html =
    You can change your testing method at any time in your <a>preferences</a>.

The last one, the <a> without an href, works using the mechanism described here.