l20n with HTML markup?

Question

How would I use l20n if I wanted to create something like this:

About <strong>Firefox</strong>

I want to translate the phrase as a whole but I also want the markup. I don't want to have to do this:

<aboutBrowser "About {{ browserBrandShortName }}">
<aboutBrowserStrong "About &lt;strong&gt;{{ browserBrandShortName }}&lt;/strong&gt;">

...as the translation itself is now duplicated.

I understand that this might not be in the scope of l20n, but it is probably a common enough case in the real world. Is there some kind of established way to go about this?

Answer 1

Sometimes duplicating the translation is the best thing you can do. Redundancy is good in localization: it allows to make fewer assumptions about translations into other languages. One of the core principles of L20n is that only the localizer will know what they really need.

Your solution is actually okay

The solution that you proposed is actually quite good. It's entirely possible that the emphasis that you're trying to express with <strong> will have some unknown implications in some language that we might not be aware of. For instance, some languages might use declensions or postpositions to mean "about something", in which case you—as a developer—shouldn't make too many assumptions about the exact position of the <strong> element. It might be that the entire translation will be a single word surrounded by <strong>.

Here's your code again, formatted using L20n's multiline string literals:

<aboutBrowser "About {{ browserBrandShortName }}">
<aboutBrowserEmphasized """
  About <strong>{{ browserBrandShortName }}</strong>
""">

Note that for this to work as expected, you'll need to add a data-l10n-overlay attribute to the DOM node with data-l10n-id=aboutBrowserEmphasized. Otherwise, < and > will be escaped.

Making few assumptions matters

Let me digress quickly and bring up Bug 859035 — Do not use the same "unknown" entity for Size & Author when installing a WebApp from Firefox OS. The English-speaking developer assumed the they can use the "unknown" adjective to qualify both the size and the author in the installation dialog. However, in certain languages, like French or Polish, the adjective must be accorded with the object in terms of gender and plurals. So even though in English we can only have one string:

<unknown "Unknown">

…other languages might require two separate strings for each of the contexts they're used in. In French, you'd say "auteur inconnu" (unknown author, masculine) but "taille inconnue" (unknown size, feminine):

<unknownSize "inconnue">
<unknownAuthor "inconnu">

In English, this means some redundancy:

<unknownSize "Unknown">
<unknownAuthor "Unknown">

…but that's OK, because in the end the quality of localization is improved. It is generally a good practice to use unique strings everywhere and reuse sparingly. Ideally, you'd allow different translations for all strings. Even something as simple and common as "Yes" and "No" can be tricky if you consider languages like Welsh:

Welsh doesn't have a single word to use every time for yes and no questions. The word used depends on the form of the question. You must generally answer using the relevant form of the verb used in the question, or in questions where the verb is not the first element you use either 'ie' / 'nage'.