mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00

Files

T

Mathieu Duckerts-Antoine a9be149e1e [IMP] translation contexts

A new directive t-tanslation-context and a new family of directives (of the form
t-translation-context-...) are introduced to allow to translate terms in contexts.

Set t-translation-context="fr" on a node makes every call of the translation
function to be done with "fr" as seconde parameter when translating an
attribute/content within that node or its children (if no closer
t-translation-context directive is found).
A directive t-translation-context-attr="fr" can be used on a node to target its
attribute "attr". For example, if a div has an attribute title="a title",
use t-translation-context-title="pt" will make "a title" to be translated
in the context "pt". Note that this takes precedence over any other directive
t-translation-context found on a parent (or the div itself).
The translation function is in charge of the interpretation of the context: OWL
does not associate any meaning with a translation context.

2025-01-15 11:01:53 +01:00

2.7 KiB

Raw Permalink Blame History

🦉 Translations 🦉

If properly setup, Owl can translate all rendered templates. To do so, it needs a translate function, which takes

a string (the term to translate)
a string (the translation context of the term) and returns a string.

For example:

const translations = {
  fr: {
    hello: "bonjour",
    yes: "oui",
    no: "non",
  },
  pt: {
    hello: "bom dia",
    yes: "sim",
    no: "não",
  },
};
const translateFn = (str, ctx) => translations[ctx]?.[str] || str;

const app = new App(Root, { templates, tranaslateFn });
// ...

See the app configuration page for more info on how to configure an Owl application.

Once setup, all rendered templates will be translated using translateFn:

each text node will be replaced with its translation,
each of the following attribute values will be translated as well: title, placeholder, label and alt,
translating text nodes can be disabled with the special attribute t-translation, if its value is off.
the translate function receives as second parameter a context that can be used to contextualized the translation. That context can be set globally on a node and its children by using t-translation-context. If a specific node attribute x needs another context, that context can be specified with a special directive t-translation-context-x.

So, with the above translateFn, the following templates:

<div>hello</div>
<div t-translation="off">hello</div>
<div>Are you sure?</div>
<input placeholder="hello" other="yes"/>

will be rendered as:

<div>bonjour</div>
<div>hello</div>
<div>Are you sure?</div>
<input placeholder="bonjour" other="yes"/>

and the following template:

<div t-translation-context="fr" title="hello">hello</div>
<div>Are you sure?</div>
<input t-translation-context-placeholder="pt" placeholder="hello" other="yes"/>

will be rendered as:

<div title="bonjour">bonjour</div>
<div>Are you sure?</div>
<input placeholder="bom dia" other="yes"/>

Note that the translation is done during the compilation of the template, not when it is rendered.

In some case, it is useful to be able to extend the list of translatable attributes. For example, one may want to also translate data-title attributes. To do that, we can define additional attributes with the translatableAttributes option:

const app = new App(Root, { templates, tranaslateFn, translatableAttributes: ["data-title"] });
// ...

It is also possible to remove an attribute from the default list by prefixing it with -:

const app = new App(Root, {
  templates,
  tranaslateFn,
  translatableAttributes: ["data-title", "-title"],
});
// data-title attribute will be translated, but not title attribute...

2.7 KiB Raw Permalink Blame History

🦉 Translations 🦉

2.7 KiB

Raw Permalink Blame History